<script setup>
import { ref,computed,reactive,watch } from "vue";
import {ElMessage} from "element-plus"
import moment from "moment"
import DatePicker from 'vue-datepicker-next';
import _ from 'lodash'
import { Calendar,Clock,CirclePlus,Remove } from '@element-plus/icons-vue'

import { roadshowInterence } from '@/api/api.js';
import { activityBtnDiaConfig, confirmDiaLink } from '../roleConfig';
import {researcherActivityHook} from '../roleConfig/hook.js';

import searchDistPicker from '@/components/searchDistPicker.vue';
// 定义初始表单数据
const initFormData = {
  activityType:
    activityBtnDiaConfig[localStorage.getItem('Role')].defaultActivityType, // 活动名称
  activityClass: '', // 活动类别
  roadshowType: '', // 路演形式
  roadshowPlatform: '', // 路演平台
  roadshowCity: '', // 路演城市
  companyId: 0, // 客户id
  companyName: '', // 客户名称
  meetingType: '', // 会议形式
  meetingPlatform: '', // 会议平台
  meetingCity: '', // 会议城市
  meetingTheme: '', // 会议主题
  partnersName: '', // 合作方名称
  selectResearchers: [
    // 研究员
    {
      researcherId: '',
      startDate: activityBtnDiaConfig.defaultStartTime(),
      startTime: activityBtnDiaConfig.defaultStartTime(),
      endDate: activityBtnDiaConfig.defaultEndTime(),
      endTime: activityBtnDiaConfig.defaultEndTime(),
    },
  ], // 选择的研究员
};

const props = defineProps({
  isShow: {
    type: Boolean,
    require: true,
  },
  initData: {
    // 初始数据
    type: Object,
    default: null,
  },
  edit_id: {
    type: Number,
    default: 0,
  },
  edit_rs_id: {
    type: Number,
    default: 0,
  },
  start_date:{
    type: Date,
    default:new Date() ,
  }
})

const emits=defineEmits(['update:isShow','ensureCallback'])

const form=reactive({formData:{
  ...initFormData,
  activityType:
    activityBtnDiaConfig[localStorage.getItem('Role')]
      .defaultActivityType,
  selectResearchers: [
    {
      researcherId: '',
      startDate: activityBtnDiaConfig.defaultStartTime(props.start_date),
      startTime: activityBtnDiaConfig.defaultStartTime(props.start_date),
      endDate: activityBtnDiaConfig.defaultEndTime(props.start_date),
      endTime: activityBtnDiaConfig.defaultEndTime(props.start_date),
    },
  ], // 选择的研究员
}}) // 表单数据
const researcherList=ref([]) // 研究员列表
const telTypeList=ref([]) //电话会所有类别
const cascaderIdx=ref(0) // 解决报错
const permission=ref(null) // 当前角色权限
const companyInfo=ref(null)

// 除去第一个研究员的其他研究员索引
const addResearchersIdx=computed(()=>{
  return form.formData.selectResearchers
  .map((item, index) => index)
  .slice(1);
})
watch(()=>props.isShow,(newval)=>{
  newval && getResearcherList();
  newval && getTypeList();
})
watch(()=>props.start_date,(value)=>{
  form.formData.selectResearchers[0].startDate = activityBtnDiaConfig.defaultStartTime(value)
  form.formData.selectResearchers[0].startTime = activityBtnDiaConfig.defaultStartTime(value)
  form.formData.selectResearchers[0].endDate = activityBtnDiaConfig.defaultEndTime(value)
  form.formData.selectResearchers[0].endTime = activityBtnDiaConfig.defaultEndTime(value)
})
watch(()=>props.initData,(val)=>{
  form.formData={...form.formData,...val}
})

const formRef=ref(null)

//获取电话会所有类别
const getTypeList=async()=>{
  const res = await roadshowInterence.getTelList();
  if (res.Ret !== 200) return;
  telTypeList.value = res.Data;
}

// 取消按钮
const cancel=()=>{
  // 清空表单
  form.formData = { 
    ...initFormData,
    activityType: activityBtnDiaConfig[localStorage.getItem('Role')].defaultActivityType
  };
  form.formData.selectResearchers = [{
    researcherId: '',
    startDate: activityBtnDiaConfig.defaultStartTime(props.start_date),
    startTime: activityBtnDiaConfig.defaultStartTime(props.start_date),
    endDate: activityBtnDiaConfig.defaultEndTime(props.start_date),
    endTime: activityBtnDiaConfig.defaultEndTime(props.start_date),
  }]
  
  formRef.value.resetFields();
  researcherList.value = [];
  emits('update:isShow', false);
  ++cascaderIdx.value;
}

const findName=(id)=>{
  console.log(researcherList.value,'researcherList.value');
  const flat_arr = _.cloneDeep(researcherList.value)
    .map((item) => item.ResearcherList || [])
    .flat(Infinity);
  console.log(flat_arr,'flat_arr');
  return flat_arr.find((user) => user.AdminId === id)
    ? flat_arr.find((user) => user.AdminId === id).RealName
    : '';
}

// 确认按钮
const confirm=async()=>{
  await formRef.value.validate();

  if(form.formData.companyName && !form.formData.companyId) return ElMessage.warning('请选择客户');
  
  let parmas;

  const param_research = ['公开会议', '路演'].includes(
    form.formData.activityType
  )
    ? form.formData.selectResearchers.map((item) => ({
        ResearcherId: Number(item.researcherId),
        ResearcherName: findResearcherName(item.researcherId),
        StartDate: moment(item.startDate).format('YYYY-MM-DD'),
        EndDate: moment(item.endDate).format('YYYY-MM-DD'),
        StartTime: moment(item.startTime).format('HH:mm:ss'),
        EndTime: moment(item.endTime).format('HH:mm:ss'),
        StartWeek: moment(item.startDate).format('ddd'),
        EndWeek: moment(item.endDate).format('ddd'),
      }))
    : form.formData.selectResearchers[0].researcherId.map((item) => ({
        ResearcherId: Number(item),
        ResearcherName: item === 99 ? 'ficc全体' : findResearcherName(item),
        StartDate: moment(
          form.formData.selectResearchers[0].startDate
        ).format('YYYY-MM-DD'),
        EndDate: moment(
          form.formData.selectResearchers[0].endDate
        ).format('YYYY-MM-DD'),
        StartTime: moment(
          form.formData.selectResearchers[0].startTime
        ).format('HH:mm:ss'),
        EndTime: moment(
          form.formData.selectResearchers[0].endTime
        ).format('HH:mm:ss'),
        StartWeek: moment(
          form.formData.selectResearchers[0].startDate
        ).format('ddd'),
        EndWeek: moment(
          form.formData.selectResearchers[0].endDate
        ).format('ddd'),
      }));

  const dynaic_city_param = {
    公开会议: form.formData.meetingCity,
    路演: form.formData.roadshowCity,
  };

  parmas = {
    ActivityType: form.formData.activityType,
    ActivityCategory: form.formData.activityClass[form.formData.activityClass.length-1],
    City: ['公开会议', '路演'].includes(form.formData.activityType)
      ? dynaic_city_param[form.formData.activityType][1]
      : '',
    Province: ['公开会议', '路演'].includes(form.formData.activityType)
      ? dynaic_city_param[form.formData.activityType][0]
      : '',
    CooperationName: form.formData.partnersName,
    Theme: form.formData.meetingTheme,
    RoadshowType: form.formData.activityType === '路演' ?
      form.formData.roadshowType : form.formData.meetingType,
    RoadshowPlatform: form.formData.activityType === '路演' ?
      form.formData.roadshowPlatform : form.formData.meetingPlatform,
    CompanyId: form.formData.companyId || 0,
    CompanyName: form.formData.companyName || '',
    ResearcherList: param_research,
    EnglishCompany:form.formData.englishCompany
  };

  const res =  props.edit_id
  ? await roadshowInterence.editRoadshow({
      ...parmas,
      RsCalendarId: props.edit_id,
      RsCalendarResearcherId: props.edit_rs_id,
      EditType: ['公开会议', '路演'].includes(form.formData.activityType) ? 2 : 1
    }) : await roadshowInterence.addRoadshow(parmas);

  if (res.Ret !== 200) return;

  const { text, content, query } = setDynamicLink(
    form.formData.activityType
  );
  props.edit_id ? ElMessage.warning('提交成功') : confirmDiaLink(text, content, query);

  emits('ensureCallback');
  cancel();

}
// 获取研究员列表
const getResearcherList=async()=>{
  const res = await roadshowInterence.getResearcherList();
  if (res.Ret === 200) {
    // researcherList.value = formatResearcherList(res.Data);
    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
    const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);

    researcherList.value = [{
      label:'ficc',
      ResearcherList:ficcList
    },{
      label:'权益',
      ResearcherList:raiList
    }]
  }
}
// 对获取到的研究员列表做处理
const formatResearcherList=(list)=>{
  list.forEach((group) => {
    // 对组做处理
    group.label = group.GroupName;
    // 如果有列表
    if (group.ResearcherList) {
      group.ResearcherList.forEach((item) => {
        // 对研究员做处理
        item.label = item.RealName;
        item.value = item.AdminId;
      });
    } else {
      // 没有列表
      group.value = group.GroupId;
    }
  });
  return list;
}
// 选择的研究员发生改变
const removeResearchersChange=(val)=>{
  form.formData.selectResearchers[0].researcherId = form.formData.selectResearchers[0].researcherId.filter(item => item !== val)
  cascaderIdx.value++;
}
// 活动类型改变
const activityTypeChange=()=>{
  console.log(form.formData.activityType,'form.formData.activityTyp');
  ++cascaderIdx.value;
  // 清空部分表单内容
  form.formData.roadshowType = '';
  form.formData.roadshowPlatform = '';
  form.formData.roadshowCity = '';
  form.formData.companyId = 0;
  form.formData.companyName = '';
  form.formData.meetingType = '';
  form.formData.meetingPlatform = '';
  form.formData.meetingCity = '';
  form.formData.meetingTheme = '';
  form.formData.partnersName = '';
  form.formData.activityClass = '';
  companyInfo.value = '';
  form.formData.selectResearchers = [
    {
      researcherId: '',
      startDate: form.formData.selectResearchers[0].startDate,
      startTime: form.formData.selectResearchers[0].startTime,
      endDate: form.formData.selectResearchers[0].endDate,
      endTime: form.formData.selectResearchers[0].endTime,
    },
  ];
  formRef.value.clearValidate();
}
// 开始时间发生变化
const startTimeChange=(type,value,row)=>{
  if(type=='date'){
    row.endDate = value
    // 为了确保 修改startTime时，endDate正常显示
    row.startTime=new Date(moment(value).format('YYYY-MM-DD')+' '+moment(row.startTime).format('HH:mm:ss'))
  }else{
    row.endTime=new Date(moment(value).add(1,'hours'))
    // 当选择23点30分时，间隔一个小时，日期到了第二天，由于字段不同，需要赋值给 endDate
    row.endDate=new Date(moment(value).add(1,'hours'))
  }
}
// 客户名称搜索
const companySearch=async(query, cb)=>{
  cb([]);
  if (!query) return;
  const res = await roadshowInterence.searchRoadshowCompany({
    KeyWord: query,
  });
  if (res.Ret === 200) {
    let arr = res.Data || [];
    console.log(arr);
    if (!arr.length) {
      cb([{ nodata: true }]);
    } else {
      cb(arr);
    }
  }
}

// 选择客户
const companySelect=async(e)=>{
  if (e.nodata) return;
  form.formData.companyId = e.CompanyId;
  form.formData.companyName = e.CompanyName;
  form.formData.englishCompany = e.EnglishCompany

  const { Data } = await roadshowInterence.componyDetail({
    CompanyId: form.formData.companyId,
    EnglishCompany:e.EnglishCompany
  });
  companyInfo.value = Data;
}

// 添加研究员点击
const addResearcher=()=>{
  const { startDate, startTime, endDate, endTime } =
    form.formData.selectResearchers[0]; //默认添加时间同步

  form.formData.selectResearchers.push({
    researcherId: null,
    startDate,
    startTime,
    endDate,
    endTime,
  });
}

// 删除研究员
const delResearcher=(index)=>{
  form.formData.selectResearchers.splice(index, 1);
}

const HOOK = researcherActivityHook({form,companyInfo,formRef,researcherList})
const {rules,activityClassProps,setDynamicLink,addUserCheckHandler,onChangeCity,findResearcherName}=HOOK

permission.value = activityBtnDiaConfig[localStorage.getItem('Role')];

</script>

<template>
  <div class="activity-btn-dia">
    <el-dialog
      v-dialogDrag
      :title="props.edit_id ? '修改活动' : '添加活动'"
      :model-value="props.isShow"
      :modal-append-to-body="false"
      @close="cancel"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="form.formData"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="活动类型" prop="activityType">
          <el-select
            v-model="form.formData.activityType"
            placeholder="请选择活动类型"
            @change="activityTypeChange"
            :disabled="!!props.edit_id"
          >
            <el-option
              v-for="(type, index) in permission.activityTypeList"
              :key="index"
              :label="type"
              :value="type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动类别"
          v-if="form.formData.activityType === '报告电话会'"
          prop="activityClass"
        >
            <el-cascader
                :props="activityClassProps"
                v-model="form.formData.activityClass"
                :options="telTypeList">
            </el-cascader>
        </el-form-item>
        <el-form-item
          label="路演形式"
          v-if="form.formData.activityType === '路演'"
          prop="roadshowType"
        >
          <el-select
            v-model="form.formData.roadshowType"
            placeholder="请先选择路演形式"
          >
            <el-option value="线上"></el-option>
            <el-option value="线下"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="路演平台"
          v-if="form.formData.roadshowType === '线上' && form.formData.activityType === '路演'"
          prop="roadshowPlatform"
        >
          <el-input
            v-model="form.formData.roadshowPlatform"
            placeholder="请输入路演平台(eg：进门财经、腾讯会议)"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="路演城市"
          v-if="form.formData.roadshowType === '线下' && form.formData.activityType === '路演'"
          prop="roadshowCity"
        >
          <search-dist-picker 
            :provinceInfo="form.formData.roadshowCity[0]"
            :cityInfo="form.formData.roadshowCity[1]"
            @selected="onChangeCity($event,'roadshow')"/>
        </el-form-item>
        <el-form-item
          label="客户名称"
          v-if="form.formData.activityType === '路演'"
          prop="companyName"
        >
          <el-autocomplete
            v-model="form.formData.companyName"
            popper-class="company-autocomplete"
            :fetch-suggestions="companySearch"
            placeholder="请输入客户名称"
            @select="companySelect"
            clearable
          >
            <template #default="{ item }">
              <div v-if="item.nodata" style="text-align: center">暂无数据</div>
              <div class="name" v-else>{{ item.CompanyName }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <!-- 客户信息 -->
        <div
          class="company-info"
          v-if="
            form.formData.activityType === '路演' &&
            form.formData.companyId &&
            companyInfo
          "
        >
          <template v-if="companyInfo.EnglishCompany===1">
            <p>所属国家：{{companyInfo.EnglishCountry}}</p>
            <p>累计点击量：{{companyInfo.EnglishViewTotal}}</p>
          </template>
          <template v-else>
            <p>客户状态：{{ companyInfo.Status }}</p>
            <p>所属行业：{{ companyInfo.IndustryName }}</p>
            <p>开通品种：{{ companyInfo.PermissionName }}</p>
            <p>累计报告阅读次数：{{ companyInfo.ReportReadTotal }}</p> 
          </template>
        </div>
        <el-form-item
          label="会议形式"
          v-if="form.formData.activityType === '公开会议'"
          prop="meetingType"
        >
          <el-select
            v-model="form.formData.meetingType"
            placeholder="请先选择会议形式"
          >
            <el-option value="线上"></el-option>
            <el-option value="线下"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="会议平台"
          v-if="form.formData.meetingType === '线上' && form.formData.activityType==='公开会议'"
          prop="meetingPlatform"
        >
          <el-input
            v-model="form.formData.meetingPlatform"
            placeholder="请输入会议平台(eg：进门财经、腾讯会议)"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="会议城市"
          v-if="form.formData.meetingType === '线下' && form.formData.activityType==='公开会议'"
          prop="meetingCity"
        >
          <v-distpicker
            ref="meetingCity"
            :province="form.formData.meetingCity[0]"
            :city="form.formData.meetingCity[1]"
            @selected="onChangeCity($event, 'meeting')"
            hide-area
          ></v-distpicker>
        </el-form-item>
        <el-form-item
          label="会议主题"
          v-if="form.formData.activityType === '公开会议'"
          prop="meetingTheme"
        >
          <el-input
            v-model="form.formData.meetingTheme"
            placeholder="请输入会议主题"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="合作方名称"
          v-if="form.formData.activityType === '公开会议'"
          prop="partnersName"
        >
          <el-input
            v-model="form.formData.partnersName"
            placeholder='请输入合作方名称（多个合作方用","隔开）'
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="研究员"
          prop="selectResearchers[0].researcherId"
          :rules="[
            { required: true, message: '请选择研究员', trigger: 'change' },
          ]"
        >
          <el-cascader
            v-model="form.formData.selectResearchers[0].researcherId"
            :options="researcherList"
            :show-all-levels="false"
            :props="{
              children: 'ResearcherList',
              expandTrigger: 'hover',
              multiple: ['内部会议', '报告电话会'].includes(
                form.formData.activityType
              ),
              emitPath: false,
            }"
            clearable
            placeholder="请选择研究员"
            :key="cascaderIdx"
            @remove-tag="removeResearchersChange"
          />
        </el-form-item>
        <el-form-item
          label="开始时间"
          prop="selectResearchers[0].startTime"
          :rules="[
            { required: true, message: '请选择开始时间', trigger: 'blur' },
          ]"
        >
          <el-col :span="12">
            <date-picker
              format="MM.DD(ddd)"
              v-model:value="form.formData.selectResearchers[0].startDate"
              style="width: 100% !important"
              :clearable="false"
              :editable="false"
              @change="(value)=>startTimeChange('date',value,form.formData.selectResearchers[0])"
            >
              <template #icon-calendar>
                <el-icon><Calendar /></el-icon>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model:value="form.formData.selectResearchers[0].startTime"
              style="width: 100% !important"
              :clearable="false"
              :editable="false"
              @change="(value)=>startTimeChange('time',value,form.formData.selectResearchers[0])"
            >
              <template #icon-calendar>
                <el-icon><Clock /></el-icon>
              </template>
            </date-picker>
          </el-col>
        </el-form-item>
        <el-form-item
          label="结束时间"
          prop="selectResearchers[0].endTime"
          :rules="[
            { required: true, message: '请选择结束时间', trigger: 'blur' },
          ]"
        >
          <el-col :span="12">
            <date-picker
              format="MM.DD(ddd)"
              v-model:value="form.formData.selectResearchers[0].endDate"
              style="width: 100% !important"
              :clearable="false"
              :editable="false"
            >
              <template #icon-calendar>
                <el-icon><Calendar /></el-icon>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model:value="form.formData.selectResearchers[0].endTime"
              style="width: 100% !important"
              :clearable="false"
              :editable="false"
            >
              <template #icon-calendar>
                <el-icon><Clock /></el-icon>
              </template>
            </date-picker>
          </el-col>
        </el-form-item>

        <!-- 新增的研究员 -->
        <div
          v-for="researcherIdx in addResearchersIdx"
          :key="researcherIdx"
          class="add-researcher-box"
        >
          <el-form-item
            label="研究员"
            :prop="`selectResearchers[${researcherIdx}].researcherId`"
            :rules="[
              { required: true, message: '请选择研究员', trigger: 'change' },
            ]"
          >
            <el-cascader
              style="max-width: 340px;"
              v-model="form.formData.selectResearchers[researcherIdx].researcherId"
              :options="researcherList"
              :show-all-levels="false"
              :props="{
                expandTrigger: 'hover',
                children: 'ResearcherList',
                emitPath: false,
              }"
              clearable
              placeholder="请选择研究员"
              :key="cascaderIdx"
              @change="addUserCheckHandler"
            />
            <el-icon class="remove-outline" @click="delResearcher(researcherIdx)"><Remove /></el-icon>
          </el-form-item>
          <el-form-item label="开始时间"
          :prop="`selectResearchers[${researcherIdx}].startTime`"
          :rules="[
            { required: true, message: '请选择开始时间', trigger: 'change' },
          ]">
            <el-col :span="12">
              <date-picker
                format="MM.DD(ddd)"
                v-model:value="form.formData.selectResearchers[researcherIdx].startDate"
                :clearable="false"
                :editable="false"
                style="width: 100% !important"
                @change="(value)=>startTimeChange('date',value,form.formData.selectResearchers[researcherIdx])"
              >
                <template #icon-calendar>
                  <el-icon><Calendar /></el-icon>
                </template>
              </date-picker>
            </el-col>
            <el-col :span="12">
              <date-picker
                format="HH:mm"
                type="time"
                :show-second="false"
                v-model:value="form.formData.selectResearchers[researcherIdx].startTime"
                :clearable="false"
                :editable="false"
                style="width: 100% !important"
                @change="(value)=>startTimeChange('time',value,form.formData.selectResearchers[researcherIdx])"
              >
                <template #icon-calendar>
                  <el-icon><Clock /></el-icon>
                </template>
              </date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="结束时间"
          :prop="`selectResearchers[${researcherIdx}].endTime`"
          :rules="[
            { required: true, message: '请选择结束时间', trigger: 'change' },
          ]">
            <el-col :span="12">
              <date-picker
                format="MM.DD(ddd)"
                v-model:value="form.formData.selectResearchers[researcherIdx].endDate"
                style="width: 100% !important"
                :clearable="false"
                :editable="false"
              >
                <template #icon-calendar>
                  <el-icon><Calendar /></el-icon>
                </template>
              </date-picker>
            </el-col>
            <el-col :span="12">
              <date-picker
                format="HH:mm"
                type="time"
                :show-second="false"
                v-model:value="form.formData.selectResearchers[researcherIdx].endTime"
                style="width: 100% !important"
                :clearable="false"
                :editable="false"
              >
                <template #icon-calendar>
                  <el-icon><Clock /></el-icon>
                </template>
              </date-picker>
            </el-col>
          </el-form-item>
        </div>
        <!-- 添加研究员按钮 -->
        <div
          @click="addResearcher"
          class="add-box"
          v-if="['路演', '公开会议'].includes(form.formData.activityType) && !props.edit_id"
        >
          <el-icon style="font-size: 18px; margin-right: 5px"><CirclePlus /></el-icon>
          <span>添加研究员</span>
        </div>
      </el-form>
      <div class="btn-group">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.activity-btn-dia {
  .el-form {
    .el-cascader,
    .el-select,
    .el-autocomplete,
    .el-input {
      width: 100%;
    }
    .distpicker-address-wrapper {
      display: flex;
      label:nth-child(-n + 2) {
        padding: 0 5px;
        flex: 50%;
        select {
          width: 100%;
        }
      }
    }
    .el-col {
      padding: 0 5px;
    }
    .company-info {
      margin-bottom: 20px;
      border: 1px solid #b3d8ff;
      background: #ecf5ff;
      padding: 10px;
      p {
        margin: 6px 0;
        text-indent: -70px;
        margin-left: 70px;
      }
    }
    .add-researcher-box .el-form-item .el-form-item__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-cascader {
        padding-right: 20px;
      }
      .remove-outline {
        font-size: 20px;
        cursor: pointer;
        color: #f00;
      }
    }
  }
  .add-box {
    width: 100px;
    display: flex;
    align-items: center;
    color: #5882ef;
    cursor: pointer;
  }
  .btn-group {
    margin: 20px 0;
    text-align: center;
    .el-button {
      width: 140px;
    }
  }
}
</style>
