<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-13 15:27:46
 * @LastEditors: 无尘
 * @LastEditTime: 2020-08-26 10:02:54
 -->

<template>
  <section class="common-right-wrap">
    <div class="new-card-body border-box">
      <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="卡券策略名称" prop="policyName">
          <limitInput :inputWidth="340" :inputValue.sync="formData.policyName" :getByType="'word'" :holder="'请输入卡券策略名称'" :maxLength="20"> </limitInput>
        </el-form-item>
        <div class="item-title font-14 color-303133 font-w-600">卡券选择策略</div>
        <div class="el-form-item el-form-item--large is-required">
          <label for="name" class="el-form-item__label" style="width: 120px; cursor: pointer;">
            <el-tooltip class="item" effect="dark" content="支持多选，最多可选20个模板" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">选择卡券模板</span></el-tooltip>
          </label>
          <div class="el-form-item__content" style="margin-left: 120px;">
            <div class="card-add-btn text-center cursor-pointer" @click="showCardTemp"><span class="font-14 color-606266">选择卡券模板</span></div>
            <div v-if="formData.cardTemplateJson.length" class="m-t-20">
              <el-table class="select-table" max-height="450" :data="formData.cardTemplateJson" tooltip-effect="dark" :style="{ width: '100%' }">
                <el-table-column label="卡券模板名称" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">{{ scope.row.templateName }}</template>
                </el-table-column>
                <el-table-column prop="" label="卡券类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.cardType == 0">抵金券</span>
                    <span v-if="scope.row.cardType == 1">折扣券</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="有效期" width="505">
                  <template slot-scope="scope">
                    <el-select class="w-100" v-model="scope.row.effectiveType" placeholder="">
                      <el-option label="固定日期" value="0"></el-option>
                      <el-option label="发送后" value="1"></el-option> </el-select
                    ><el-date-picker v-if="scope.row.effectiveType == 0" class="m-l-10 w-300 vertical-middle" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="scope.row.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> <el-select class="w-100 m-l-10" v-if="scope.row.effectiveType == 1" v-model="scope.row.sendNumberDay" placeholder="请选择"> <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select><span class="font-14 color-606266 p-l-10" v-if="scope.row.effectiveType == 1">有效，有效天数</span><el-input-number class="w-100 m-l-10" v-if="scope.row.effectiveType == 1" v-model="scope.row.effectiveDay" controls-position="right" :min="1" :max="366"></el-input-number><span class="font-14 color-606266 p-l-10" v-if="scope.row.effectiveType == 1">天</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="发送总数" width="350">
                  <template slot-scope="scope">
                    {{ scope.row.sendLimit }}
                    <!-- <el-select class="w-100" v-model="scope.row.limitType" placeholder=""> <el-option label="限制总数" value="0"></el-option> </el-select> -->
                    <!-- <el-input-number class="w-100 m-l-10 vertical-middle" v-model="scope.row.sendLimit" controls-position="right" :min="1" :max="999999999"></el-input-number> -->
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-button type="text" @click="toDelTemp(scope.$index, scope.row, formData.cardTemplateJson)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="!formData.cardTemplateJson.length && cardErr" class="el-form-item__error">请选择卡券模板</div>
          </div>
        </div>
        <div class="item-title font-14 color-303133 font-w-600">执行策略</div>
        <div class="el-form-item el-form-item--large">
          <label for="name" class="el-form-item__label" style="width: 120px; cursor: pointer;">
            <el-tooltip class="item" effect="dark" content="卡券的发送范围设置" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">发送范围</span></el-tooltip>
          </label>
          <div class="el-form-item__content" style="margin-left: 120px;">
            <el-radio v-model="formData.sendRange" label="0" @change="changeSendType">全企业</el-radio><el-radio class="m-l-40" v-model="formData.sendRange" label="1" @change="changeSendType"><span @click="clickSendType">部分部门</span></el-radio>
            <div v-if="formData.sendRange == 1" class="flex-column item-cell-select inline-block ">
              <div class="depart-item-wrap" @click="showDepartDilog">
                <div style="width: 357px;" class="el-select el-select--large depart-item-content">
                  <span class="font-14 color-c0c4cc p-l-10" style="display: inline-block;line-height: 32px;color: #c0c4cc;" v-if="!formData.departmentJson.length"></span>
                  <div class="el-select__tags" style="max-width: 348px;">
                    <span style="display:block">
                      <template v-for="(item, index) in formData.departmentJson">
                        <span class="el-tag el-tag--info el-tag--small" :key="index">
                          <span class="el-select__tags-text">{{ item.departmentName }}</span>
                          <i class="el-tag__close el-icon-close" @click.stop="delDepart(index, formData.departmentJson)"></i>
                        </span>
                      </template>
                    </span>
                  </div>
                  <div class="count-number font-12 color-909399">已选{{ formData.departmentJson.length }}个部门</div>
                </div>
              </div>
            </div>
            <div class="position-select">
              <div class="position-check"><el-checkbox v-model="formData.positionFlag">按职务筛选</el-checkbox></div>
              <div class="position-check-tags">
                <el-checkbox class=" no-position-tag" v-model="formData.noPosition" @change="changeNoPosition">无职务</el-checkbox>
                <template v-for="tag in formData.positionNames">
                  <el-tag v-if="tag != -1" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                  </el-tag>
                </template>
                <el-input v-if="inputVisible" class="input-new-tag" v-model="inputValue" ref="saveTagInput" size="small" maxlength="20" show-word-limit @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"> </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加职务</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--large">
          <label for="name" class="el-form-item__label" style="width: 120px; cursor: pointer;">
            策略执行次数
          </label>
          <div class="el-form-item__content" style="margin-left: 120px;">
            <el-radio v-model="formData.sendMonthType" label="0" style="margin-right:0px;">{{ '' }}</el-radio> <el-tooltip class="item" effect="dark" content="每月该策略针对单一成员执行几次" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">每月循环</span></el-tooltip
            ><el-radio v-model="formData.sendMonthType" label="1" style="margin-right:0px;margin-left:30px;">{{ '' }}</el-radio
            ><el-tooltip class="item" effect="dark" content="第n月发送次数，例如第3,6,9月，每月1次" placement="top-start"> <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">多月循环</span></el-tooltip>
            <div v-if="formData.sendMonthType == 0" class="m-t-10 month-recyle"><span class="font-14 color-606266 p-r-10">每月</span><el-input-number class="w-100" v-model="formData.sendTimes" controls-position="right" :min="1" :max="99" @keyup.native="value => toInput(value)"></el-input-number><span class="font-14 color-303133 p-l-10"> 次</span></div>
            <div v-if="formData.sendMonthType == 1" class="m-t-10 month-recyle">
              <span class="font-14 color-606266 p-r-10">第</span><el-select class="w-150" multiple collapse-tags v-model="formData.sendMonthTimes" placeholder="请选择"> <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select><el-input-number class="m-l-10 w-100" style="vertical-align:middle;" v-model="formData.sendTimes" controls-position="right" :min="1" :max="99" @keyup.native="value => toInput(value)"></el-input-number><span class="font-14 color-303133 p-l-10"> 次</span>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--large">
          <label for="name" class="el-form-item__label" style="width: 120px; cursor: pointer;">
            策略有效期
          </label>
          <div class="el-form-item__content" style="margin-left: 120px;">
            <el-radio v-model="formData.policyExpireDateType" label="0">长期有效</el-radio><el-radio v-model="formData.policyExpireDateType" label="1">固定期限</el-radio>
            <div v-if="formData.policyExpireDateType == 1" class="date-valid">
              <el-date-picker class="" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="formData.validDateRange" :editable="false" :value-format="'yyyy-MM-dd HH:mm:ss'" :default-time="['00:00:00', '23:59:59']" type="datetimerange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
            </div>
          </div>
        </div>
        <el-form-item>
          <el-button type="primary" @click="cancelEdit">取消</el-button>
          <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">确认{{ $route.query.policyId ? '编辑' : '新建' }}</el-button>
          <el-button v-if="!$route.query.policyId" type="primary" @click="submitForm('ruleForm', 'flag')">确认并继续新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <select-card-template :cardTempShow="cardTempShow" :selectTemp="formData.cardTemplateJson" @returnData="returnData" @closeTemp="closeTemp"></select-card-template>
    <select-wx-depart :departShow="departShow" :departArr="formData.departmentJson" @refreshData="refreshData"></select-wx-depart>
  </section>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import selectCardTemplate from '@/components/app/protectCard/select-card-template.vue';
import selectWxDepart from '@/components/app/protectCard/select-wx-depart.vue';
import { getRequest, postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
  name: 'chat-log',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    activeGroupId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {
    limitInput,
    selectCardTemplate,
    selectWxDepart
  },
  data() {
    return {
      activeBrand: this.brandId, // 商户(品牌) id
      activeGroup: this.activeGroupId, // 商户(品牌) groupId
      activeId: '3',
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',

      formData: {
        policyId: '',
        policyName: '',
        cardTemplateJson: [
          /* {
            templateName: '',
            cardType: '0',
            effectiveType: '0',
            dateRange: [],
            sendNumberDay: '',
            sendLimit: '50000',
          } */
        ],
        sendRange: '0',
        positionFlag: false,
        noPosition: false,
        positionNames: [],
        departmentJson: [], // 部门数据
        sendMonthType: '0',
        sendTimes: '',
        sendMonthTimes: [],
        policyExpireDateType: '0',
        validDateRange: [],
        startTimeString: '',
        endTimeString: '',
        onlineFlag: '1'
      },
      cardErr: false,
      rules: {
        // policyId: [{ required: true, message: '请选择卡券', trigger: 'change' }],
        // receiveType: [{ validator: validateReceiveType, trigger: 'change' }],
        policyName: [{ required: true, message: '请输入卡券策略名称', trigger: 'blur' }],
        cardTemplateJson: [{ type: 'array', required: true, message: '请至少选择一个卡券模板', trigger: 'change' }]
      },
      cardSelectShow: false,
      choiceDateCopy: [],
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDateCopy = [minDate.getTime()];
          if (maxDate) {
            this.choiceDateCopy = [];
          }
        },
        disabledDate: time => {
          if (this.choiceDateCopy.length) {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.choiceDateCopy[0] - one;
            const maxTime = this.choiceDateCopy[0] + one;
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() < Date.now() - 8.64e7;
          }
          return time.getTime() < Date.now() - 8.64e7;
          /*  if (this.choiceDateCopy.length) {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.choiceDateCopy[0];
            const maxTime = this.choiceDateCopy[0] + one;
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() < Date.now() - 8.64e6;
          }
          return time.getTime() < Date.now() - 8.64e6; */
        }
      },
      dateOptions: [],
      monthOptions: [],
      inputVisible: false,
      inputValue: '',
      cardTempShow: false,
      departShow: false,
      loadingBtn: false
    };
  },
  methods: {
    showDepartDilog() {
      const that = this;
      that.departShow = true;
    },
    /**
     * 删除已选部门
     * */

    delDepart(index, arr) {
      // const that = this;
      arr.splice(index, 1);
    },
    toInput(e) {
      const that = this;
      if (!/^[0-9]*$/.test(e.target.value)) {
        that.formData.sendTimes = 1;
      }
    },
    /* 选择无职务 */
    changeNoPosition(e) {
      const that = this;
      if (e && that.formData.positionNames.length >= 50) {
        that.$message.error({
          duration: 1000,
          message: '最多可添加50个职务'
        });
        that.formData.noPosition = false;
        return false;
      }
      if (!!e) {
        that.formData.positionNames.push('-1');
      } else {
        that.formData.positionNames.splice(that.formData.positionNames.indexOf('-1'), 1);
      }
    },
    /**
     *  修改发送类型
     */
    changeSendType() {
      const that = this;
      if (that.formData.sendRange == 1) {
        that.departShow = true;
      } else {
        that.formData.departmentJson = [];
        that.departShow = false;
      }
    },
    clickSendType() {
      const that = this;
      that.departShow = true;
    },
    refreshData(data) {
      const that = this;
      that.departShow = false;
      if (data == 'close') {
        return false;
      }
      that.formData.departmentJson = data;
    },
    /**
     *  取消
     */
    cancelEdit() {
      const that = this;
      that
        .$confirm('是否确认返回，返回后当前页面内容将丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.$router.go(-1);
        })
        .catch(() => {});
    },
    /**
     *  选择卡券模板
     */
    showCardTemp() {
      const that = this;
      that.cardTempShow = true;
    },
    /**
     *  选择卡券模板弹窗返回数据
     */
    returnData(data) {
      const that = this;
      data.forEach(ele => {
        ele.effectiveType = '0';
        ele.dateRange = [];
        ele.sendNumberDay = '0';
        ele.effectiveDay = '366';
        ele.sendLimit = '50000';
      });
      const dataIds = data.map(ele => ele.templateId);
      let arr = [];
      that.formData.cardTemplateJson.forEach(ele => {
        if (dataIds.includes(ele.templateId)) {
          arr.push(ele);
        }
      });
      data.forEach(ele => {
        arr.forEach(el => {
          if (ele.templateId == el.templateId) {
            ele.effectiveType = el.effectiveType;
            ele.dateRange = el.dateRange;
            ele.sendNumberDay = el.sendNumberDay;
            ele.effectiveDay = el.effectiveDay;
          }
        });
      });
      that.formData.cardTemplateJson = JSON.parse(JSON.stringify(data));
      that.cardTempShow = false;
    },
    /**
     *  选择卡券模板弹窗关闭
     */
    closeTemp() {
      const that = this;
      that.cardTempShow = false;
    },
    /**
     *  添加职务
     */
    handleClose(tag) {
      const that = this;
      that.formData.positionNames.splice(that.formData.positionNames.indexOf(tag), 1);
    },

    showInput() {
      const that = this;
      if (that.formData.positionNames.length >= 50) {
        that.$message.error({
          duration: 1000,
          message: '最多可添加50个职务'
        });
        return false;
      }
      that.inputVisible = true;
      that.$nextTick(_ => {
        that.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      const that = this;
      let inputValue = that.inputValue;
      if (inputValue) {
        that.formData.positionNames.push(inputValue);
      }
      that.inputVisible = false;
      that.inputValue = '';
    },
    /**
     *  删除已选卡券
     */
    toDelTemp(index, row, arr) {
      // const that = this;
      arr.splice(index, 1);
      // 还要把已选的卡券模板数据处理
      // that.formData.cardTemplateJson = JSON.parse(JSON.stringify(arr));
    },
    /**
     *  第多少天处理
     */
    handleDay() {
      const that = this;
      let arr = [];
      for (let index = 0; index < 91; index++) {
        if (index == 0) {
          arr.push({
            label: `当天`,
            value: String(index)
          });
        } else {
          arr.push({
            label: `第${index}天`,
            value: String(index)
          });
        }
      }
      that.dateOptions = arr;
      that.monthOptions = [];
      for (let index = 1; index < 13; index++) {
        that.monthOptions.push({
          label: `${index}月`,
          value: String(index)
        });
      }
    },

    /**
     * 确认新建
     */
    submitForm: _debounce(function(formName, flag) {
      const that = this;
      if (!that.formData.validDateRange) {
        that.formData.validDateRange = [];
      }
      if (that.formData.policyExpireDateType == 1 && (!that.formData.validDateRange || !that.formData.validDateRange.length)) {
        that.$message.error({
          duration: 1000,
          message: '请先选择固定期限日期'
        });
        return false;
      }
      // 选择卡券
      if (!that.formData.cardTemplateJson) {
        return false;
      }
      let tag = true;
      that.formData.cardTemplateJson.forEach(ele => {
        if (ele.effectiveType == 0 && (!ele.dateRange || !ele.dateRange.length || !ele.dateRange[0])) {
          ele.dateRange = [];
          tag = false;
        }
        ele.startTimeString = !!ele.dateRange ? ele.dateRange[0] : '';
        ele.endTimeString = !!ele.dateRange ? ele.dateRange[1] : '';
      });
      if (!tag) {
        that.$message.error({
          duration: 1000,
          message: '请先选择模板有效期'
        });
        return false;
      }
      if (!that.formData.cardTemplateJson.length) {
        that.cardErr = true;
        return false;
      } else {
        that.cardErr = false;
      }
      // 选择部门
      if (that.formData.sendRange == 1 && !that.formData.departmentJson.length) {
        that.$message.error({
          duration: 1000,
          message: '请先选择发送的部门'
        });
        return false;
      }
      // 选择多月循环
      if (that.formData.sendMonthType == 1 && !that.formData.sendMonthTimes.length) {
        that.$message.error({
          duration: 1000,
          message: '请先选择多月循环'
        });
        return false;
      }
      if (!that.formData.sendTimes) {
        that.$message.error({
          duration: 1000,
          message: '请先选择策略执行次数'
        });
        return false;
      }
      that.loadingBtn = true;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSaveCard(flag);
        } else {
          that.loadingBtn = false;
        }
      });
    }, 1000),
    postSaveCard(flag) {
      const that = this;
      let para = {
        policyId: that.formData.policyId,
        policyName: that.formData.policyName,
        cardTemplateJson: JSON.stringify(that.formData.cardTemplateJson),
        sendRange: that.formData.sendRange,
        positionFlag: that.formData.positionFlag ? 1 : 0,
        positionNames: !!that.formData.positionNames.length ? that.formData.positionNames.join(',') : '',
        departmentJson: JSON.stringify(that.formData.departmentJson), // 部门数据
        sendMonthType: that.formData.sendMonthType,
        sendTimes: that.formData.sendTimes,
        sendMonthTimes: !!that.formData.sendMonthTimes.length ? that.formData.sendMonthTimes.join(',') : '',
        policyExpireDateType: that.formData.policyExpireDateType,
        startTimeString: that.formData.validDateRange[0],
        endTimeString: that.formData.validDateRange[1],
        onlineFlag: that.formData.onlineFlag,
        wxEnterpriseId: that.wxEnterpriseId
      };
      postRequest(that.$route.query.policyId ? '/haoban-app-customer-web/inner/save-policy' : '/haoban-app-customer-web/inner/save-policy', para)
        .then(res => {
          let resData = res.data;
          that.loadingBtn = false;
          if (resData.errorCode == 1) {
            showMsg.showmsg(that.$route.query.policyId ? '编辑卡券策略成功' : '新建卡券策略成功', 'success');
            if (!flag) {
              that.$router.push(`/cardStrategy`);
            } else {
              that.formData = {
                policyId: '',
                policyName: '',
                cardTemplateJson: [],
                sendRange: '0',
                positionFlag: false,
                noPosition: false,
                positionNames: [],
                departmentJson: [], // 部门数据
                sendMonthType: '0',
                sendTimes: '',
                sendMonthTimes: [],
                policyExpireDateType: '0',
                validDateRange: [],
                startTimeString: '',
                endTimeString: '',
                onlineFlag: '1'
              };
              that.choiceDateCopy = [];
            }
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loadingBtn = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 获取卡券策略数据
     */
    getCardData() {
      const that = this;
      let para = {
        policyId: that.$route.query.policyId,
        gicEnterpriseId: that.brandId
      };
      getRequest('/haoban-app-customer-web/inner/find-policy', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.cardTemplateRelateds.forEach(ele => {
              ele.sendNumberDay = String(ele.sendNumberDay);
              ele.effectiveType = String(ele.effectiveType);
              ele.dateRange = [ele.startTimeString ? ele.startTimeString : '', ele.endTimeString ? ele.endTimeString : ''];
            });
            that.formData = {
              policyId: resData.result.policyId,
              policyName: resData.result.policyName,
              cardTemplateJson: resData.result.cardTemplateRelateds || [],
              sendRange: String(resData.result.sendRange),
              positionFlag: resData.result.positionFlag == 1 ? true : false,
              noPosition: resData.result.positionNames.includes('-1') || resData.result.positionNames.includes(-1) ? true : false,
              positionNames: resData.result.positionNames ? resData.result.positionNames.split(',') : [],
              departmentJson: resData.result.departmentRelateds || [], // 部门数据
              sendMonthType: String(resData.result.sendMonthType),
              sendTimes: resData.result.sendTimes,
              sendMonthTimes: !!resData.result.sendMonthTimes.length ? resData.result.sendMonthTimes.split(',') : [],
              policyExpireDateType: String(resData.result.policyExpireDateType),
              startTimeString: resData.result.startTimeString,
              endTimeString: resData.result.endTimeString,
              onlineFlag: resData.result.onlineFlag,
              validDateRange: [resData.result.startTimeString ? resData.result.startTimeString : '', resData.result.endTimeString ? resData.result.endTimeString : '']
            };
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData && that.$route.query.policyId) {
        that.activeBrand = newData;
        that.getCardData();
      }
    },
    activeGroupId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeGroup = newData;
      }
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '2');
    that.$nextTick(() => {
      that.handleDay();
    });
    if (that.$route.query.policyId) {
      that.getCardData();
    }
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.card-add-btn {
  width: 143px;
  height: 32px;
  border: 1px dashed #d8d8d8;
  &:hover {
    color: #2f54ed;
    border-color: #2f54ed;
    span {
      color: #2f54ed;
    }
  }
}

.selected-card {
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 15px;
  background: rgba(245, 247, 250, 1);
  border-radius: 2px;
}
.new-card-body {
  padding: 30px;
}
.position-select {
  width: 370px;
  margin-top: 10px;
  padding: 15px 20px;
  // min-height: 94px;
  background: rgba(245, 247, 250, 1);
}
.month-recyle {
  width: 370px;
  background: rgba(245, 247, 250, 1);
  padding: 20px;
}
.date-valid {
  width: 400px;
  background: rgba(245, 247, 250, 1);
  padding: 20px;
}
.w-240 {
  width: 240px;
}
.w-90 {
  width: 90px;
}
.w-100 {
  width: 100px;
}
.w-150 {
  width: 150px;
}
.w-300 {
  width: 300px;
}
.m-l-40 {
  margin-left: 40px;
}
.m-r-8 {
  margin-right: 8px;
}
.item-title {
  margin-bottom: 15px;
}
.depart-item-content {
  width: 213px;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  .el-select__tags {
    overflow: hidden;
    white-space: nowrap;
  }
}

.el-form-item.is-error {
  >>> .el-input__inner {
    border-color: #dcdfe6;
    &:focus {
      border-color: #dcdfe6;
    }
  }
}

.w-103 {
  width: 103px;
}
.w-369 {
  width: 369px;
}
.el-input {
  >>> .el-input-group__prepend {
    background-color: #fff;
  }
}
.m-l-24 {
  margin-left: 24px;
}
.el-tag {
  margin-right: 10px;
}
.position-check-tags {
  padding-left: 24px;
  .el-tag + .el-tag {
    margin-left: 0px;
    margin-right: 10px;
  }
  .no-position-tag {
    height: 22px;
    line-height: 22px;
    margin-right: 7px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    border: 1px dashed rgba(220, 223, 230, 1);
    padding: 0 10px;
  }
}

.button-new-tag {
  height: 22px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  color: #2f54ed;
  border-color: #2f54ed;
  background-color: #fff;
}
.input-new-tag {
  min-width: 90px;
  max-width: 300px;
  vertical-align: bottom;
}

.depart-item-content {
  position: relative;
  width: 213px;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  box-sizing: border-box;
  .count-number {
    position: absolute;
    right: 0;
    padding: 0 5px;
    background: #fff;
    z-index: 1;
  }
}

.item-cell-select {
  >>> .el-select__tags {
    white-space: nowrap;
    overflow: hidden;
  }
}

.depart-item-wrap {
  .el-select {
    .el-tag {
      border-radius: 2px;
      border: 1px solid rgba(220, 223, 230, 1);
      background-color: #fff;
      .el-tag__close {
        top: 1px;
        color: #909399;
        &:hover {
          color: #909399;
          background-color: transparent;
        }
      }
    }
  }
}
</style>
