<!--
 * @Author: your name
 * @Date: 2021-11-03 11:54:08
 * @LastEditTime: 2021-11-19 17:31:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
-->
<template>
  <div class="mccm-outter">
    <v-label-div title="切换车型">
      <v-btn @click="refresh">返回选择页面</v-btn>
      <v-btn @click="goback">返回营销分析</v-btn>
    </v-label-div>
    <div class="mccm-inner">
      <template v-for="(item, index) in list">
        <div :key="index" style="display: flex; justify-content: flex-start">
          <div class="mccm-item">
            <div class="mc-t">
              <div class="m-t-d1">{{ item.brand | doStr(4) }}</div>
              <span class="m-t-s1">{{ item.model | doStr(10) }}</span>
            </div>
            <div>
              <a-form-model
                :label-col="labelCol"
                
                style="width: 100%"
              >
                <a-form-model-item label="开始时间">
                  <a-date-picker
                    v-model="item.startTime"
                    show-time
                    type="date"
                    placeholder="开始时间"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    style="width: 82%; margin-left:18px"
                    @ok="handlerTime(item)"
                  ></a-date-picker>
                </a-form-model-item>
                <a-form-model-item label="结束时间">
                  <a-date-picker
                    v-model="item.endTime"
                    show-time
                    type="date"
                    placeholder="结束时间"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    style="width: 82%; margin-left:18px"
                    @ok="handlerTime(item)"
                  ></a-date-picker>
                </a-form-model-item>
              </a-form-model>
            </div>
            <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">
              删除
            </div>
            <div class="m-t-btn" @click="handlerChoose(index)" v-else>
              切换车型
            </div>
          </div>
          <img
            v-if="index < list.length - 1"
            class="mccm-vs"
            src="../../../assets/images/comm/img_vs.png"
          />
        </div>
      </template>
    </div>
    <iSwitchModel
      :brand="brand"
      :model="model"
      :visible.sync="modelShow"
      @change="handlerBrand"
    ></iSwitchModel>
  </div>
</template>

<script>
import moment from "moment";
import { getUserSeriesName } from "@/api/comm";
export default {
  name: "mcChooseModel",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    data: {
      handler(val) {
        if (val.length > 0) {
          val.forEach((ele, index) => {
            this.list[index] = Object.assign(this.list[index], ele);
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      labelCol: { span: 9 },
      wrapperCol: { span: 14 },
      modelShow: false,
      brand: "",
      model: "",
      chooseIndex: -1,
      startVal: "",
      endValue: "",
      offsetDays: 86400000 * 30, //最多选择7天
      form: {
        token: "",
        sBrandName: "",
      },
      list: [
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
        {
          brand: "",
          model: "",
          startTime: "",
          endTime: "",
          isDel: false,
        },
      ],
    };
  },
  created() {
    this.brand = this.getBrand.brandname || "奥迪";
    if (this.getChangeSTime) {
      const arr = [];
      this.list.forEach((e) => {
        if(e.brand && e.model) {
          e.startTime = this.getCtime.sStartTime;
          e.endTime = this.getCtime.sEndTime;
          arr.push(e);
        }
      });
      this.setSComparison(arr);
    }
    this.modelData();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    //删除已选择页面
    refresh() {
      for(let i=0;i<this.list.length;i++){
        this.handlerDel(i);
      };
    },
    // 获取车型
    modelData() {
      let model = this.getModel.name || "";
      if (!model) {
        this.getUserSeriesName(this.brand);
      } else {
        this.model = model;
      }
    },
    // 获取车型
    getUserSeriesName(brandName) {
      this.form.token = this.getToken;
      this.form.sBrandName = brandName;
      getUserSeriesName(this.form).then((res) => {
        let data = res.data || [];
        this.model = data[0].name;
      });
    },
    // 打开选择车型的弹出框
    handlerChoose(n) {
      this.chooseIndex = n;
      this.modelShow = true;
    },
    // 删除车型
    handlerDel(n) {
      let row = this.list[n];
      row.brand = "";
      row.model = "";
      row.startTime = "";
      row.endTime = "";
      row.isDel = false;
      let filterArr = this.list.filter((ele) => {
        return ele.brand && ele.model && ele.startTime && ele.endTime;
      });
      if(filterArr.length === 0) {
        this.setMcStatus(false);
      }
      this.$emit("del", n);
      this.$emit("change", filterArr);
    },
    // 获取切换车型的数据
    handlerBrand(arr) {
      let row = this.list[this.chooseIndex];
      row.brand = arr[0].brandname;
      row.model = arr[1].name;
      row.isDel = true;
    },
    // 选择时间的判断
    handlerTime(item) {
      let t1 = item.startTime ? moment(item.startTime).valueOf() : 0;
      let t2 = item.endTime ? moment(item.endTime).valueOf() : 0;
      let current = new Date().getTime();
      if (t1 > current) {
        item.startTime = "";
        this.$message.warning("开始时间不能大于当前时间");
        return;
      }
      if (t2 > current) {
        item.endTime = "";
        this.$message.warning("结束时间不能大于当前时间");
        return;
      }
      if (item.startTime && item.endTime) {
        let isBefore = moment(item.startTime).isBefore(item.endTime);
        if (!isBefore) {
          item.endTime = "";
          this.$message.warning("结束时间必须大于开始时间");
        } else {
          let filterArr = this.list.filter((ele) => {
            return ele.brand && ele.model;
          });
          this.$emit("change", filterArr);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mccm-outter {
  width: 1888px;
  height: 376px;
  border: 2px solid #0f2a4d;
  .mccm-inner {
    width: 100%;
    height: calc(100% - 48px);
    margin-left:1.7rem;
    display: flex;
    justify-content: flex-start;
    .mccm-item {
      width: 240px;
      height: 290px;
      background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
      border: 2px solid #0e5193;
      margin-top: 13px;
      border-radius: 2px;
      position: relative;
      .m-t-btn {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 95px;
        height: 28px;
        background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        text-align: center;
        color: #63aecc;
        line-height: 28px;
      }
      .mc-t {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 21px;
        .m-t-d1 {
          width: 78px;
          height: 78px;
          background-image: url("../../../assets/images/BrandInsight/img_lq.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          line-height: 78px;
          text-align: center;
          font-size: 14px;
          color: #0090ff;
          margin-left: 17px;
        }
        .m-t-s1 {
          display: block;
          font-size: 20px;
          color: #fff;
          margin-left: 6px;
        }
      }
    }
    .mccm-vs {
      width: 78px;
      height: 78px;
      margin-top: 22px;
    }
  }
}
/deep/ .ant-form-item {
  margin-bottom: 10px;
}
/deep/ .ant-calendar-picker {
  min-width: auto !important;
}
</style>
