<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="90%"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="form-dialog-box"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0)">
      <div
        v-loading="loading"
        :element-loading-text="''"
        element-loading-spinner="''"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        >
        <div style="display: flex">
          <!-- 票种规格  -->
          <div style="width: 400px;">
            <div><el-button
                v-if="false"
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >添加票种和规格</el-button></div>
            <el-table :data="tableList">
              <el-table-column type="index" label="序号" align="center"  />
              <el-table-column label="票种规格名称" align="center" key="goodsName" prop="goodsName" />
              <el-table-column label="发布状态" align="center" key="status" prop="status">
                <template slot-scope="scope">
                  <switchBox 
                  :defaultChecked="true" 
                  v-model="scope.row.status" 
                  @changeFun="openAttraction(scope.row)" 
                  :disabled="false"
                  :active-value="0"
                  :inactive-value="1"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button type="primary" @click="getTableDeatilsFun(scope.row)" icon="el-icon-edit" circle></el-button>
                  <el-button type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 规格信息  -->
          <div style="width: calc( 100% - 400px ); padding-left: 40px;box-sizing: border-box;">
            <el-form :model="form" ref="form" :rules="rules" label-width="130px">
              <div class="form-title"><span>规格信息</span></div>
              <el-form-item label="票种规格名称：" prop="goodsName">
                <el-input style="width: 100%;" v-model="form.goodsName" placeholder="请输入票种规格名称" maxlength="50" show-word-limit />
              </el-form-item>
              <el-form-item label="规格描述：" prop="goodsSnapshot">
                <el-input style="width: 100%;" v-model="form.goodsSnapshot" placeholder="请输入规格描述" maxlength="50" show-word-limit />
              </el-form-item>
              <el-form-item label="日期类型：" :prop="'dayTypeRadio'">
                <div style="display: flex;align-items: center;">
                  <el-radio-group v-model="form.dayTypeRadio" @input="value => radioInput('dayType',value)">
                    <div style="display: flex;align-items: center;">
                      <el-radio label="-1">日历票</el-radio>
                      <el-radio style="display: flex;align-items: center;" label="-2">
                        <el-form-item label="" label-width="0" :prop="'dayType'">
                          <span>期票,</span>
                          <el-date-picker
                            :disabled="!form.dayTypeRadio||form.dayTypeRadio==-1"
                            v-model="form.dayType"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                          <span>内有效</span>
                        </el-form-item>
                      </el-radio>
                    </div>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="消费日期：" prop="useExpireDateRadio">
                <el-radio-group v-model="form.useExpireDateRadio" @input="radioInputs">
                  <div style="display: flex;flex-direction: column;padding-top: 10px;">
                    <div>
                      <el-radio label="1">不限</el-radio>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 25px;">
                      <el-radio style="display: flex;align-items: center;" label="2">
                        <div style="display: flex;align-items: center;"> 
                          <el-form-item label="" label-width="0" :prop="'useExpireDateDay'">
                            <span>自购买后</span>
                            <el-input-number 
                              :disabled="form.useExpireDateRadio!=2"
                              v-model="form.useExpireDateDay" 
                              placeholder="请输入天数"
                              controls-position="right">
                            </el-input-number>
                            <span>天可使用</span>
                          </el-form-item>
                        </div>
                      </el-radio>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 25px;">
                      <el-radio style="display: flex;align-items: center;" label="3">
                        <div style="display: flex;align-items: center;">
                          <el-form-item label="" label-width="0" :prop="'useExpireDateTime'">
                            <span>指定</span>
                            <el-date-picker
                              :disabled="form.useExpireDateRadio!=3"
                              v-model="form.useExpireDateTime"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              value-format="yyyy-MM-dd"
                              end-placeholder="结束日期">
                            </el-date-picker>
                            <span>日期范围内使用</span>
                          </el-form-item>
                        </div>
                      </el-radio>
                      
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="销售价格">
                <div style="display: flex;">
                  <el-form-item label="小程序价格：" prop="salePrice">
                    <el-input-number 
                      v-model="form.salePrice" 
                      placeholder="请输入小程序价格"
                      controls-position="right">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="划线价格：" prop="originalPrice">
                    <el-input-number 
                      v-model="form.originalPrice" 
                      placeholder="请输入划线价格"
                      controls-position="right">
                    </el-input-number>
                  </el-form-item>
                </div>
              </el-form-item>
              <el-form-item label="实名购票" prop="isAuth">
                <el-radio-group v-model="form.isAuth">
                  <el-radio :label="1">实名</el-radio>
                  <el-radio :label="2">不实名</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.isAuth==1" label="实名要求" prop="oneMany">
                <el-radio-group v-model="form.oneMany">
                  <el-radio :label="1">一证一票</el-radio>
                  <el-radio :label="2">一证多票</el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="form-title"><span>退票规则</span></div>
              <el-form-item label="退票政策" prop="backStatus">
                <el-radio-group v-model="form.backStatus">
                  <el-radio :label="1">允许退票</el-radio>
                  <el-radio :label="2">不允许退票</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="提前退票" v-if="form.backStatus==1" prop="backStatusRadio">
                <div style="display: flex;align-items: center;">
                  <el-radio-group v-model="form.backStatusRadio" @input="radioInputss">
                    <el-radio label="-1">不限</el-radio>
                    <el-radio label="-2">{{ '' }}</el-radio>
                  </el-radio-group>
                  <div style="display: flex;align-items: center;">
                    需提前
                    <el-form-item label="" label-width="0" :prop="'backStatusDay'">
                      <el-input-number 
                        :disabled="form.backStatusRadio!=-2"
                        v-model="form.backStatusDay" 
                        placeholder="请输入天数"
                        controls-position="right">
                      </el-input-number>
                    </el-form-item>
                    天，在
                    <el-form-item label="" label-width="0" :prop="'backStatusTime'">
                      <el-time-picker
                        :disabled="form.backStatusRadio!=-2"
                        v-model="form.backStatusTime"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </el-form-item>
                    点前退票
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="过期未核销" prop="expiredProcess">
                <el-radio-group v-model="form.expiredProcess">
                  <el-radio :label="1">自动退款</el-radio>
                  <el-radio :label="2">自动核销</el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="form-title"><span>特殊票种</span></div>
              <el-form-item label="指定年龄" prop="ageRadio">
                <div style="display: flex;align-items: center;">
                  <el-radio-group v-model="form.ageRadio" @input="radioInputsss">
                    <el-radio label="-1">不限</el-radio>
                    <el-radio label="-2">{{ '' }}</el-radio>
                  </el-radio-group>
                  <div style="display: flex;align-items: center;">
                    年龄限购
                    <el-form-item label="" label-width="0" prop="ageMin">
                      <el-input-number 
                        :disabled="form.ageRadio!=-2"
                        v-model="form.ageMin" 
                        placeholder="请输入年龄"
                        controls-position="right">
                      </el-input-number>
                    </el-form-item>
                    至
                    <el-form-item label="" label-width="0" prop="ageMax">
                      <el-input-number 
                       :disabled="form.ageRadio!=-2"
                        v-model="form.ageMax" 
                        placeholder="请输入年龄"
                        controls-position="right">
                      </el-input-number>
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="指定性别" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio :label="-1">不限</el-radio>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="指定地点" prop="areaRadio">
                <div style="display: flex;align-items: center;">
                  <el-radio-group v-model="form.areaRadio" @input="value => radioInput('area',value)">
                    <el-radio label="-1">不限</el-radio>
                    <el-radio label="-2">{{ '' }}</el-radio>
                  </el-radio-group>
                  <div style="display: flex;align-items: center;">
                    限定区域,区域身份证号
                    <el-form-item label="" label-width="0" prop="area">
                      <el-input
                        :disabled="form.areaRadio!=-2"
                        placeholder="请输入身份证号"
                        v-model="form.area">
                      </el-input>
                    </el-form-item>
                    <span style="">多个以,隔开</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button @click="reset">重置表单</el-button>
                <el-button
                  v-if="form&&form.goodsId"
                  type="primary"
                  @click="submitForm()"
                  :loading="loading"
                  element-loading-text="提交中..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  > 
                  {{ loading ? '提交中...' : '保存编辑' }}
                </el-button>
                <el-button
                  type="primary"
                  @click="submitForm(true)"
                  :loading="loading"
                  element-loading-text="提交中..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  > 
                  {{ loading ? '提交中...' : '新增票种规格' }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
      <el-button @click="cancel">关闭</el-button>
    </span>
    <!-- 添加或修改对话框 End -->
  </el-dialog>
</template>

<script>
import { 
  getTableDeatilsByIdApi,
  updateTableApi,
  delTableParamsApi,
  addTableApi
 } from '@/api/CURD'

export default {
  name: "addAndEdit",
  dicts: ['tourism_scenicAreaTickets_status','tourism_scenicAreaTickets_type','tourism_scenicAreaTickets_type'],
  data() {
    return {
      title: "",
      activeName: 'first',
      model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
      open: false,
      loading: false,
      loadingText: "拼命加载数据中...",
      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
      configUrl: {
        add: '/merchant/merchantPerformAuditorium/saveMerchantGoods', // 新增地址
        details: '/merchant/merchantPerformAuditorium/merchantGoodsDetail', // 规格详情
        list: '/merchant/merchantPerformAuditorium/merchantGoodsList',// 规格列表
        edit: '/merchant/merchantPerformAuditorium/saveMerchantGoods', // 编辑地址
        updateStatusById: '/goods/goods/updateStatus',
        delect: '/merchant/merchantPerformAuditorium/deleteMerchantGoods',
      },
      performId: null,
      form: {
        id: undefined,
      },
      rules: {
        goodsName: [{ required: true, message: "请输入票种规格名称", trigger: ["change","blur"] }],
        goodsSnapshot: [{ required: true, message: "请输入规格描述", trigger: ["change","blur"] }],
       
        dayTypeRadio: [{ required: true, message: "请选择日期类型", trigger: ["change","blur"] }],
        dayType: [{ required: false, message: "请选择时间范围", trigger: ["change","blur"] }],
        
        useExpireDateRadio: [{ required: true, message: "请选择费日期", trigger: ["change","blur"] }],
        useExpireDateDay: [{ required: false, message: "请输入天数", trigger: ["change","blur"] }],
        useExpireDateTime: [{ required: false, message: "请选择时间", trigger: ["change","blur"] }],

        salePrice: [{ required: true, message: "请输入小程序价格", trigger: ["change","blur"] }],
        originalPrice: [{ required: true, message: "请输入划线价格", trigger: ["change","blur"] }],
        
        isAuth: [{ required: true, message: "请选择实名购票", trigger: ["change","blur"] }],
        oneMany: [{ required: true, message: "请选择实名要求", trigger: ["change","blur"] }],
        backStatus: [{ required: true, message: "请选择退票政策", trigger: ["change","blur"] }],

        backStatusRadio: [{ required: true, message: "请选择提前退票", trigger: ["change","blur"] }],
        backStatusDay: [{ required: false, message: "请输入时间", trigger: ["change","blur"] }],
        backStatusTime: [{ required: false, message: "请选择时间点", trigger: ["change","blur"] }],
        
        expiredProcess: [{ required: true, message: "请选择过期未核销", trigger: ["change","blur"] }],
        ageRadio: [{ required: true, message: "请选择指定年龄", trigger: ["change","blur"] }],
        ageMin: [{ required: false, message: "请输入年龄限购", trigger: ["change","blur"] }],
        ageMax: [{ required: false, message: "请输入年龄限购", trigger: ["change","blur"] }],
        
        sex: [{ required: true, message: "请选择指定性别", trigger: ["change","blur"] }],
        
        areaRadio: [{ required: true, message: "请选择指定地点", trigger: ["change","blur"] }],
        area: [{ required: false, message: "请输入身份证", trigger: ["change","blur"] }],
      },
      tableList: [],// 景点产品关联
    };
  },
  methods: {
    async initData(title , model,row){
      this.title = title
      this.open = true
      this.loadingText = "拼命加载数据中..."
      this.loading = true
      this.actionUrlLoading = false
      this.model = model
      this.formStatus = 0
      await this.getTableListFun(row)
      this.$set(this,'form',{})
      this.loading = false
      this.$nextTick(()=>{
        if(this.$refs["form"]) {
          this.$refs["form"].clearValidate();
        }
      })
    },
    /** 获取列表详情 */
    async getTableListFun(row) {
      const id = row.performId
      this.performId = id
      this.loading = true
      try {
        let res = await getTableDeatilsByIdApi(this.configUrl.list,{performId: id})
        if(res.code == 200) {
          this.tableList = res.data.rows
          this.formStatus = 1
        }else {
          this.$message.error('获取详情失败!!!');
          this.formStatus = 2
          this.loading = false
          this.open = false;
        }
        this.loading = false
      } catch (error) {
        console.error('获取详情失败!!!!',error)
        this.formStatus = 2
        this.loading = false
        this.open = false;
      }
    },
    /** 获取详情 */
    async getTableDeatilsFun(row) {
      const id = row.goodsId
      this.loading = true
      try {
        let res = await getTableDeatilsByIdApi(this.configUrl.details,{goodsId: id})
        if(res.code == 200) {
          let obj = {
            ...res.data,
            useExpireDate: res.data.useExpireDate?res.data.useExpireDate.type:'1',
            backStatusRadio: res.data.goodsPerformRefundRule?'-2':'-1',
          }
          if(res.data.dayType){
            obj['dayTypeRadio'] = '-2'
            obj['dayType'] = res.data.dayType.split('~')
          }else {
            obj['dayTypeRadio'] = '-1'
          }
          if(!res.data.useExpireDate){
            obj['useExpireDateRadio'] = '1'
          }else {
            let sss = JSON.parse(res.data.useExpireDate)
            obj['useExpireDateRadio'] = sss.type
            if(sss.type==1) {
              obj['useExpireDateRadio'] = '1'
            }else if(sss.type==2){
              obj['useExpireDateRadio'] = '2'
              obj['useExpireDateDay'] = sss.value
            }else if(sss.type==3) {
              obj['useExpireDateRadio'] = '3'
              obj['useExpireDateTime'] = sss.value.split('~')
            }
            
          }
          if(res.data.goodsPerformRefundRule) {
            obj['backStatusDay'] = res.data.goodsPerformRefundRule.days
            obj['backStatusTime'] = res.data.goodsPerformRefundRule.hour
          }
          if( !res.data.goodsPerformSpecial ) {
            obj['ageRadio'] = "-1"
          }
          if( res.data.goodsPerformSpecial && res.data.goodsPerformSpecial.age ) {
            obj['ageRadio'] = "-2"
            obj['ageMin'] = res.data.goodsPerformSpecial.age.split('~')[0]
            obj['ageMax'] = res.data.goodsPerformSpecial.age.split('~')[1]
          }else {
            obj['ageRadio'] = "-1"
          }
          if( res.data.goodsPerformSpecial && res.data.goodsPerformSpecial.sex ) {
            obj['sex'] = res.data.goodsPerformSpecial.sex
          }else {
            obj['sex'] = -1
          }
          if( res.data.goodsPerformSpecial && res.data.goodsPerformSpecial.area ) {
            obj['areaRadio'] = "-2"
            obj['area'] = res.data.goodsPerformSpecial.area
          }else {
            obj['areaRadio'] = "-1"
          }
          this.radioInput('dayType',obj.dayTypeRadio)
          this.radioInputs(obj.useExpireDateRadio)
          this.radioInputss(obj.backStatusRadio)
          this.radioInputsss(obj.ageRadio)
          this.radioInput('area',obj.areaRadio)
          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
          this.formStatus = 1
        }else {
          this.$message.error('获取详情失败!!!');
          this.formStatus = 2
          this.loading = false
          this.$set(this,'form',{})
        }
        this.loading = false
      } catch (error) {
        console.error('获取详情失败!!!!',error)
        this.formStatus = 2
        this.loading = false
        this.$set(this,'form',{})
      }
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm(type) {
      console.log("dsfsfds=======",type,this.form)
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loadingText = "提交数据中..."
          this.loading = true
          addTableApi(this.configUrl.edit,{
            ...this.resetFormData(type),
          }).then(response => {
            this.$modal.msgSuccess(`${ this.form.goodsId ? '编辑':'新增' }成功`);
            this.loading = false
            this.$set(this,'form',{})
            this.$nextTick(()=>{
              this.$refs.form.clearValidate();
            })
            this.getTableListFun({performId:this.performId})
            //this.open = false;
            //this.$emit('refresh')
          }).catch(()=>{
            this.$message.error(`${ this.form.goodsId ? '编辑':'新增' }失败!!!`);
            this.loading = false
          })
        }
      });
    },
    /**
     * 修改状态
     * @date 2023-11-22
     * @returns {any}
     */
     openAttraction(row) {
      this.$modal.confirm(`是否确认${row.status == 1 ? '上架' : '下架'} ${row.goodsName}吗？`).then( () => {
        return getTableDeatilsByIdApi(this.configUrl.updateStatusById,{
          id: row.goodsId,
          status: row.status == 1 ? 0 : 1
        });
      }).then(() => {
        this.getTableListFun({performId:this.performId})
        this.$modal.msgSuccess(`${row.status == 1 ? '上架' : '下架'}成功`);
      }).catch((e) => {
        console.error("失败====",e)
      });
    },
    resetFormData(type){
      let params = JSON.parse(JSON.stringify(this.form))

      if(params.dayTypeRadio == -1) { // 日期类型
        params.dayType = null
      }else {
        params.dayType = params.dayType?params.dayType.join('~'):null
      }

      if(params.useExpireDateRadio == 1) { // 消费日期
        params['useExpireDate'] = JSON.stringify({
          type: 1,
          value: null
        })
      }else if(params.useExpireDateRadio == 2) {
        params['useExpireDate'] = JSON.stringify({
          type: 2,
          value: params.useExpireDateDay
        })
      }else if(params.useExpireDateRadio == 3) {
        params['useExpireDate'] = JSON.stringify({
          type: 3,
          value: params.useExpireDateTime?params.useExpireDateTime.join('~'):null
        })
      }

      if(params.backStatusRadio == -1) { // 提前退票
        params['goodsPerformRefundRule'] = null
      }else if(params.backStatusRadio == -2) {
        params['goodsPerformRefundRule'] = {
          days: params.backStatusDay,
          hour: params.backStatusTime,
        }
      }
      params['goodsPerformSpecial'] = {}
      params.goodsPerformSpecial['sex'] = params.sex == -1 ?null : params.sex
      if(params.ageRadio == -1) { // 指定年龄
        params.goodsPerformSpecial['age'] = null
      }else if(params.ageRadio == -2) {
        params.goodsPerformSpecial['age'] = params.ageMin + "~" + params.ageMax
      }
      if(params.areaRadio == -1) { // 指定年龄
        params.goodsPerformSpecial['area'] = null
      }else if(params.areaRadio == -2) {
        params.goodsPerformSpecial['area'] = params.area
      }
      if(type){
        params['goodsId'] = null
      }else {
        params['goodsId'] = params.goodsId
      }
      params['performId'] = this.performId
      delete params.dayTypeRadio
      delete params.useExpireDateRadio
      delete params.backStatusRadio
      delete params.ageRadio
      delete params.areaRadio
      delete params.useExpireDateTime
      delete params.useExpireDateDay
      delete params.ageMax
      delete params.ageMin
      delete params.backStatusDay
      delete params.backStatusTime
      delete params.sex
      return params
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      if(this.$refs["form"]) {
        //this.$refs["form"].resetFields();
        this.$set(this,'form',{})
        this.$nextTick(()=>{
          this.$refs["form"].clearValidate();
        })
      }
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.reset();
      this.open = false;
    },
    handleAdd(){
      this.$set(this,'form',{})
      this.$nextTick(()=>{
        this.$refs["form"].clearValidate();
      })
    },
    /**    */
    radioInput(key,value) {
      console.log('key,value===',key,value)
      if(value==-2) {
        this.rules[key][0].required = true
      }else {
        this.rules[key][0].required = false
      }
    },
    /** */
    radioInputs(value) {
      if( value == 1 ){
        this.rules.useExpireDateDay[0].required = false
        this.rules.useExpireDateTime[0].required = false
        this.$refs.form.clearValidate('useExpireDateTime');
        this.$refs.form.clearValidate('useExpireDateDay');
      }else if( value == 2 ) {
        this.rules.useExpireDateDay[0].required = true
        this.rules.useExpireDateTime[0].required = false
        this.$refs.form.clearValidate('useExpireDateTime');
      }else if( value == 3 ) {
        this.rules.useExpireDateDay[0].required = false
        this.rules.useExpireDateTime[0].required = true
        this.$refs.form.clearValidate('useExpireDateDay');
      }
    },
    /** */
    radioInputss(value) {
      if( value == -1 ){
        this.rules.backStatusDay[0].required = false
        this.rules.backStatusTime[0].required = false
        this.$refs.form.clearValidate('backStatusDay');
        this.$refs.form.clearValidate('backStatusTime');
      }else if( value == -2 ) {
        this.rules.backStatusDay[0].required = true
        this.rules.backStatusTime[0].required = true
      }
    },
    /** */
    radioInputsss(value) {
      if( value == -1 ){
        this.rules.ageMin[0].required = false
        this.rules.ageMax[0].required = false
        this.$refs.form.clearValidate('ageMin');
        this.$refs.form.clearValidate('ageMax');
      }else if( value == -2 ) {
        this.rules.ageMin[0].required = true
        this.rules.ageMax[0].required = true
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
        const ids = row.goodsId || this.ids;
        this.$modal.confirm('是否确认删除数据项？').then( () => {
          return delTableParamsApi(this.configUrl.delect,{
            goodsId: ids
          });
        }).then(() => {
          this.getTableListFun({performId:this.performId})
          this.$modal.msgSuccess("删除成功");
        }).catch((e) => {
          console.error("删除失败====",e)
        });
      },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog-box {
  padding: 0 30px;
  padding: 0 30px;
  min-height: 50vh;
  max-height: 65vh;
  overflow-y: auto;
  >div {
    width: 100%;
    min-height: 50vh;
  }
  .form-title {
    padding: 0 0 10px 0;
    span {
      display: flex;
      color: rgba(65,80,88,1);
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      line-height: 23px;
      border-left: 4px solid rgb(22, 132, 252);
      padding-left: 10px;
    }
    
  }
  ::v-deep .ql-editor {
    height: 400px;
  }
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}
.el-table{
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}

.area-container {
  min-height: 400px;
}

::v-deep .area-wrap-city.el-cascader {
  line-height: normal;
  .el-input {
    cursor: pointer;
    width: 100% !important;
    height: 28px !important;
    .el-input__inner {
      display: none !important;
    }
    span.el-input__suffix {
      position: inherit !important;
      i.el-input__icon {
        line-height: inherit;
        margin-left: 5px;
      }
    }

    .el-input__wrapper {
      box-shadow: none;
      input {
        display: none;
      }
    }
  }

  .el-cascader__tags {
    display: none;
  }
}

.area-city-popper {
  .el-cascader-panel {
    .el-scrollbar.el-cascader-menu {
      .el-cascader-menu__wrap.el-scrollbar__wrap {
        height: 315px;
      }
    }
  }
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
<style>
.custom-class-box {
  z-index: 999999 !important;
}
</style>