<template>
  <div class="page_FProcessManagement">
    <ul class="_nav clearfix">
      <li v-for="(item,index) in titleList" :key="index"
      :class="{'_active':item.id==msg.EmpType}"
      @click="getTemplateList(item)"
      >{{item.name}}</li>
        <button class="hollowFixedBtn" style="right: 185px;" @click="clickTheRules(1)">提成限制</button>
        <button class="normalBtn" style="position: absolute; right: 90px;top: 9px;" @click="clickTheRules()">提成规则</button>
        <input type="button" class="hollowFixedBtn" value="新增" @click="AddMsg"/>      
    </ul>
    <template>
      <div
        class="cm_content"
        style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
        v-for="(item,index ) in dataList "
        :key="index"
      >
        <table
          class="po_content singeRowTable"
          style="border:1px solid #E6E6E6;"
          cellspacing="0"
          cellpadding="0"
          v-loading="loading"
        >
          <tr>
            <th width="100" style="min-width: 100px;max-width: 100px;">方案名称</th>
            <th width="100%" class="left-text-indent">提成人员</th>
            <th width="240" style="min-width: 240px;max-width: 240px;">公司所有国内出发线路(单团.散拚)</th>
            <th width="150" style="min-width: 150px;max-width: 150px;">创建时间</th>
            <th width="150" style="min-width: 150px;max-width: 150px;">操作</th>
          </tr>
          <tr>
            <td>
              <span>{{item.Name}}</span>
            </td>
            <td style="padding: 0 10px;" class="left-text-indent">
              <span v-for="(son,sIndex ) in item.EmpList" :key="sIndex">
                <span v-if="sIndex<19">{{ son.EmName }}{{item.EmpList.length==sIndex+1?'':'、'}}</span>
              </span>
              <el-popover
                v-if="item.EmpList.length>=20"
                placement="top-start"
                title="提成人员"
                width="400"
                trigger="click"
                :content="item.EmpListtext">
                <el-button slot="reference" style="border: none;" type="text">查看更多</el-button>
              </el-popover>
            </td>
            <td>
              <span>
                {{item.SalesRate?item.SalesRate+'%':'-'}}
              </span>
            </td>
            <td style="padding: 0 10px;">
              <span>
                {{item.UpdateTime}}
              </span>
            </td>
            <td>
              <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle>
              </el-button>
              <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
            </td>
          </tr>
        </table>
        <div style="width:100%;overflow-x: auto;">
          <table
            class="po_content singeRowTable"
            style="border:1px solid #E6E6E6;"
            cellspacing="0"
            cellpadding="0"
          >
            
            <tr>
              <td rowspan="2" width="100" style="min-width: 100px;">追加工资</td>
              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.WageRateList"
                :key="sIndex"
              >
              <template v-if="item.EmpType==2">
                {{ '平均引流 '+son.StartValue+' 条, ' }} <span>{{son.EndValue && son.EndValue!=-1?'成交 ':'成交 '}}</span><span v-if="son.EndValue && son.EndValue!=-1">{{ son.EndValue+' 单' }}</span>
              </template>
              <template v-if="item.EmpType==1">
                {{ son.StartValue }} <span>{{son.EndValue && son.EndValue!=-1?'<=平均利润<':'<=平均利润'}}</span><span v-if="son.EndValue && son.EndValue!=-1">{{ son.EndValue }}</span>
              </template>
            </th>
            </tr>
            <tr>
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.WageRateList" :key="sIndex"> + {{ son.Rate }}</td>
            </tr>
          </table>
        </div>
        <div style="width:100%;overflow-x: auto;">
          <table
            class="po_content singeRowTable"
            style="border:1px solid #E6E6E6;"
            cellspacing="0"
            cellpadding="0"
          >
           
            <tr>
              <td rowspan="2" width="100" style="min-width: 100px;">提成比例</td>
              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.CommissionRateList"
                :key="sIndex"
              >{{ son.StartValue }} <span>{{son.EndValue && son.EndValue!=-1?'<=平均利润<':'<=平均利润'}}</span><span v-if="son.EndValue && son.EndValue!=-1">{{ son.EndValue }}</span></th>
            </tr>
            <tr>
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.CommissionRateList" :key="sIndex">{{ son.Rate }}%</td>
            </tr>
          </table>
        </div>
        <div style="width:100%;overflow-x: auto;">
          <table
            class="po_content singeRowTable"
            style="border:1px solid #E6E6E6;"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td rowspan="2" width="100" style="min-width: 100px;">年终比例</td>
              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.BonusRateList"
                :key="sIndex"
              >{{ son.StartValue }} <span>{{son.EndValue && son.EndValue!=-1?'<=当月利润<':'<=当月利润'}}</span><span v-if="son.EndValue && son.EndValue!=-1">{{ son.EndValue }}</span></th>
            </tr>
            <tr>
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.BonusRateList" :key="sIndex">{{ son.Rate }}%</td>
            </tr>
          </table>
        </div>
        
      </div>
      <div v-if="dataList.length==0"
        style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;margin-top: 30px;"
      >暂无数据</div>
     
    </template>
    <el-dialog :title="titleName" :visible.sync="ruleVisible" width="750px" @close="resetForm('form')">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <div class="ImpressionTicketing-msgboxtop">
          <el-form-item label="规则名称" prop="Name">
            <el-input v-model="form.Name" clearable></el-input>
          </el-form-item>
          <el-form-item label="人员" prop="EmployeeId">
            <el-select class="multiple_input" filterable multiple v-model="form.EmployeeId"
            @change="personnel" collapse-tags>
              <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                :key="item.EmployeeId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售额" prop="SalesRate">
            <div class="Impression-ratio-box">
              <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
            v-model="form.SalesRate"></el-input>
              <span class="Impression-ratio-right">%</span>
            </div>
          </el-form-item>
        </div>
        <el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
          <p class="ImpressionTicketing-title">基本工资({{msg.EmpType==1?'自然季度平均利润业绩金额':'自然季度平均引流条数'}})</p>
          <div class="ImpressionTicketing-msgbox" 
          v-for="(item,index) in form.WageRateList" :key="index">
            <div>
              <el-form-item 
              :label="msg.EmpType==1&&form.WageRateList.length>0?`${hintStart} ${index+1} `:`${hintStart} ${index+1} ` "  
              :prop="`WageRateList.${index}.StartValue`" 
              :rules="rules.StartValue"
              label-width="100px"
              label-position="left">
              <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
              v-model="item.StartValue" clearable></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="msg.EmpType==1&&form.WageRateList.length>0?`${hintEnd} ${index+1} `:`${hintEnd} ${index+1} ` " 
              :prop="`WageRateList.${index}.EndValue`" 
              :rules="rules.EndValue"
              label-width="100px"
              label-position="left">
              <el-input-number type="number" :min="-1" :max="99999999" 
              v-model="item.EndValue" clearable :controls="false"></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="form.WageRateList.length>0?`追加工资 ${index+1} `:` ` " 
              :prop="`WageRateList.${index}.Rate`" 
              :rules="rules.Rate"
              label-width="100px"
              label-position="left">
              <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
              v-model="item.Rate"></el-input>
              </el-form-item>
            </div>
            <div class="ImpressionTicketing-msg-but">
              <span @click="addRule(item,index,1)" v-if="index==0" class="el-icon-circle-plus-outline itc-outline"></span>
              <span @click="deleteRule(item,index,1)" v-else class="el-icon-delete itc-delete"></span>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
          <p class="ImpressionTicketing-title">提成比例(自然季度平均利润业绩金额)</p>
          <div class="ImpressionTicketing-msgbox" v-for="(item,index) in form.CommissionRateList" :key="index">
            <div>
              <el-form-item 
              :label="form.CommissionRateList.length>0?`开始值 ${index+1} `:` ` "  
              :prop="`CommissionRateList.${index}.StartValue`" 
              :rules="rules.StartValue"
              label-width="100px"
              label-position="left">
              <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
              v-model="item.StartValue" clearable></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="form.CommissionRateList.length>0?`结束值 ${index+1} `:` ` " 
              :prop="`CommissionRateList.${index}.EndValue`" 
              :rules="rules.EndValue"
              label-width="100px"
              label-position="left">
              <el-input-number type="number" :min="-1" :max="99999999" 
              v-model="item.EndValue" clearable :controls="false"></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="form.CommissionRateList.length>0?`比例 ${index+1} `:` ` " 
              :prop="`CommissionRateList.${index}.Rate`" 
              :rules="rules.Rate2"
              label-width="100px"
              label-position="left">
                <div class="Impression-ratio-box">
                  <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
                v-model="item.Rate"></el-input>
                  <span class="Impression-ratio-right">%</span>
                </div>
              </el-form-item>
            </div>
            <div class="ImpressionTicketing-msg-but">
              <span @click="addRule(item,index,2)" v-if="index==0" class="el-icon-circle-plus-outline itc-outline"></span>
              <span @click="deleteRule(item,index,2)" v-else class="el-icon-delete itc-delete"></span>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
          <p class="ImpressionTicketing-title">年终比例(当月月业绩利润)</p>
          <div class="ImpressionTicketing-msgbox" v-for="(item,index) in form.BonusRateList" :key="index">
            <div>
              <el-form-item 
              :label="form.BonusRateList.length>0?`开始值 ${index+1} `:` ` "  
              :prop="`BonusRateList.${index}.StartValue`" 
              :rules="rules.StartValue"
              label-width="100px"
              label-position="left">
              <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
              v-model="item.StartValue" clearable></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="form.BonusRateList.length>0?`结束值 ${index+1} `:` ` " 
              :prop="`BonusRateList.${index}.EndValue`" 
              :rules="rules.EndValue"
              label-width="100px"
              label-position="left">
              <el-input-number type="number" :min="-1" :max="99999999" 
              v-model="item.EndValue" clearable :controls="false"></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item 
              :label="form.BonusRateList.length>0?`比例 ${index+1} `:` ` " 
              :prop="`BonusRateList.${index}.Rate`" 
              :rules="rules.Rate2"
              label-width="100px"
              label-position="left">
                <div class="Impression-ratio-box">
                  <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999" 
                v-model="item.Rate"></el-input>
                  <span class="Impression-ratio-right">%</span>
                </div>
              </el-form-item>
            </div>
            <div class="ImpressionTicketing-msg-but">
              <span @click="addRule(item,index,3)" v-if="index==0" class="el-icon-circle-plus-outline itc-outline"></span>
              <span @click="deleteRule(item,index,3)" v-else class="el-icon-delete itc-delete"></span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="ruleVisible = false,resetForm('form')">取 消</el-button>
        <el-button size="small" type="danger" @click="RulesOk('form')" :loading="ruleLoading">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置限制 -->
    <el-dialog :title="titleName" :visible.sync="TheRulesVisible" width="300px">
      <el-form ref="form" :model="TheRulesForm" :rules="rules" :label-width="titleName.indexOf('限制')!=-1?'80px':'120px'">
        <div v-if="titleName.indexOf('限制')!=-1" class="ImpressionTicketing-msgbox bottom0 line-heigh">
          <el-form-item :label="TheRulesForm.SNO =='1'?'限制金额':'限制条数'" prop="Content">
            <el-input-number :min="0" v-model="TheRulesForm.Content" clearable></el-input-number>
          </el-form-item>
        </div>
        <div v-else class="ImpressionTicketing-msgbox bottom0" v-for="(item,index) in TheRulesData">
          <el-form-item :label="item.Name+':'">
            <span style="margin-left: 10px;">{{item.Content}}
            <i style="margin-left: 5px;">{{item.SNO==2?' RMB':' 条'}}</i>
            </span>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="TheRulesVisible = false,ruleLoading = false">取 消</el-button>
        <el-button size="small" type="danger" @click="titleName.indexOf('限制')!=-1?OkTheRules('form'):TheRulesVisible = false" :loading="ruleLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:"",
        EmployeeList:[],
        rules: {
          Name: [{
            required: true,
            message: '请输入规则名称',
            trigger: "blur"
          }],
          EmployeeId: [{
            required: true,
            message: '请选择参与人员',
            trigger: 'change'
          }],
          StartValue: [{
            required: true,
            message: "请输入开始值",
            trigger: "blur"
          }],
          EndValue: [{
            required: true,
            message: "请输入结束值",
            trigger: "blur"
          }],
          Rate: [{
            required: true,
            message: "请输入金额",
            trigger: "blur"
          }],
          Rate2: [{
            required: true,
            message: "请输入比例",
            trigger: "blur"
          }],
          Content: [{
            required: true,
            message: "请输入限制",
            trigger: "blur"
          }],
          SalesRate: [{
            required: true,
            message: "请输入销售额",
            trigger: "blur"
          }],
        },
        EmpList:[//参与人
            {EmployeeId:''}
        ],
        WageRateList://工资阶梯列表
          {
            StartValue:0,
            EndValue:null,
            Rate:null
          },
        CommissionRateList://提成阶梯列表
          {
            StartValue:0,
            EndValue:null,
            Rate:null
          },
        BonusRateList://年终奖阶梯列表
          {
            StartValue:0,
            EndValue:null,
            Rate:null
          }
        ,
        form:{
          Id:0,
          Name:'',//规则名称
          EmpType:'',//类型 1销售 2引流
          EmployeeId:'',
          SalesRate: null,
          EmpList:[//参与人
            {EmployeeId:''}
          ],
          WageRateList:[//工资阶梯列表
            {
              StartValue:0,
              EndValue:null,
              Rate:null
            }
          ],
          CommissionRateList:[//提成阶梯列表
            {
              StartValue:0,
              EndValue:null,
              Rate:null
            }
          ],
          BonusRateList:[//年终奖阶梯列表
            {
              StartValue:0,
              EndValue:null,
              Rate:null
            }
          ],
        },
        ruleLoading: false,
        ruleVisible:false,
        titleName:'标题',
        loading: false,
        titleList:[
          {name:'引流规则',id:'2'},
          {name:'销售规则',id:'1'}
        ],
        dataList:[],
        msg:{
          EmpType: '2'
        },
        hintStart:'',
        hintEnd:'',
        TheRulesVisible: false,
        TheRulesForm:{
          Name:'',
          SNO:2,
          Content:''
        },
        TheRulesData:[

        ]
      }
    },
    created() {},
    mounted() {
      this.form.EmpType = this.msg.EmpType
      this.getList()
      this.getEmployeeList()
    },
    methods: {
      // 点击确定
      OkTheRules(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              SNO:this.TheRulesForm.SNO==1?2:1,
              Content:this.TheRulesForm.Content,
            }
            this.ruleLoading = true
            this.crmapipost(
              '/api/commission/SetCommissionLimit', data,
              res => {
                if (res.data.resultCode == 1) {
                  this.resetForm('form')
                  // this.getList();
                  this.TheRulesVisible = false;
                  this.ruleLoading = false
                  this.Success(res.data.message)
                } else {
                  this.Error(res.data.message)
                }
              },
              err => {}
            )
          }
        });
      },
      GetCommissionLimit() {
        this.crmapipost(
          '/api/commission/GetCommissionLimit', {},
          res => {
            if (res.data.resultCode == 1) {
              this.TheRulesData = res.data.data
            } else {
              this.Error(res.data.message)
            }
          },
          err => {}
        )
      },
      clickTheRules(type){
        this.TheRulesVisible = true
        if(type==1){
          this.titleName = this.TheRulesForm.SNO==1?'销售提成限制':'引流提成限制'
        }else{
          this.titleName = '提成规则'
          this.ruleLoading = false
          this.GetCommissionLimit()
        }
      },
      // 添加规则
      addRule(row,index,type){
        if(type==1){
          this.form.WageRateList.push(JSON.parse(JSON.stringify(this.WageRateList)))
        }else if(type==2){
          this.form.CommissionRateList.push(JSON.parse(JSON.stringify(this.CommissionRateList)))
        }else{
          this.form.BonusRateList.push(JSON.parse(JSON.stringify(this.BonusRateList)))
        }
      },
      // 删除规则
      deleteRule(row,index,type){
        if(type==1){
          this.form.WageRateList.splice(index,1)
        }else if(type==2){
          this.form.CommissionRateList.splice(index,1)
        }else{
          this.form.BonusRateList.splice(index,1)
        }
      },
      AddMsg(){//新增
        this.ruleVisible = true
        if(this.msg.EmpType=='1'){
          this.titleName = '销售规则'
          this.hintStart = '开始值'
          this.hintEnd = '结束值'
          this.rules.StartValue[0].message = '请输入开始值'
          this.rules.EndValue[0].message = '请输入结束值'
        }if(this.msg.EmpType=='2'){
          this.titleName = '引流规则'
          this.hintStart = '引流条数'
          this.hintEnd = '成交单数'
          this.rules.StartValue[0].message = '请输入引流条数'
          this.rules.EndValue[0].message = '请输入成交单数'
        }
      },
      SetRules(item){//编辑
        if(this.msg.EmpType=='1'){
          this.titleName = '销售规则'
          this.hintStart = '开始值'
          this.hintEnd = '结束值'
          this.rules.StartValue[0].message = '请输入开始值'
          this.rules.EndValue[0].message = '请输入结束值'
        }if(this.msg.EmpType=='2'){
          this.titleName = '引流规则'
          this.hintStart = '引流条数'
          this.hintEnd = '成交单数'
          this.rules.StartValue[0].message = '请输入引流条数'
          this.rules.EndValue[0].message = '请输入成交单数'
        }
        let list = []
        item.EmpList.forEach(x => {
          let data = {
            EmployeeId: x.EmployeeId
          }
          list.push(data)
        });
        this.ruleVisible = true;
        item = JSON.parse(JSON.stringify(item))
        this.form = {
          Id:item.Id,
          Name:item.Name,//规则名称
          EmpType:item.EmpType,//类型 1销售 2引流
          SalesRate:item.SalesRate,
          EmployeeId:item.EmpList.map(x=>x.EmployeeId),
          EmpList:list,
          WageRateList:item.WageRateList,
          CommissionRateList:item.CommissionRateList,
          BonusRateList:item.BonusRateList,
        }
      },
      Delete(item){//删除
        this.$confirm("是否删除? 删除后不可恢复", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.crmapipost('/api/Commission/DelCommissionRule', {
              RuleId: item.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            })
          })
          .catch(() => {});
      },
      // 点击确定
      RulesOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.EmpType = this.msg.EmpType
            let data = {
              Id:this.form.Id,
              Name:this.form.Name,//规则名称
              EmpType:this.form.EmpType,//类型 1销售 2引流
              SalesRate:this.form.SalesRate,
              EmpList:this.form.EmpList,
              WageRateList:this.form.WageRateList,
              CommissionRateList:this.form.CommissionRateList,
              BonusRateList:this.form.BonusRateList,
            }
            this.ruleLoading = true
            this.crmapipost(
              '/api/Commission/SetCommissionRule', data,
              res => {
                if (res.data.resultCode == 1) {
                  this.resetForm('form')
                  this.getList();
                  this.ruleVisible = false;
                  this.ruleLoading = false
                  this.Success(res.data.message)
                } else {
                  this.Error(res.data.message)
                }
              },
              err => {}
            )
          }
        });
      },
      // 已选人员获取
      personnel(){
        this.form.EmpList= []
        for(let i=0;i<this.form.EmployeeId.length;i++){
          let data = {
            EmployeeId:this.form.EmployeeId[i],
          }
          this.form.EmpList.push(data)
        }
      },
      // 点击tab
      getTemplateList(item){
        this.msg.EmpType = item.id
        this.form.EmpType = this.msg.EmpType
        this.TheRulesForm.SNO = Number(this.msg.EmpType)
        this.dataList = []
        this.getList()
      },
      // 获取列表数据
      getList() {
        this.loading = true;
        this.crmapipost("/api/Commission/GetCommissionRuleList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            this.dataList.forEach(j=>{
              if(j.EmpList.length>=20){//部门人员
                j.EmpListtext = '';
                j.EmpList.forEach(x=>{
                  j.EmpListtext = j.EmpListtext+x.EmName+'、'
                })
              }
            })
          }else{
            this.Error(res.data.message)
          }
        });
      },
      // 获取人员列表
      getEmployeeList() {
        let userInfo = this.getLocalStorage()
        let msg = {
          GroupId: userInfo.RB_Group_id,
          BranchId: '-1',
          DepartmentId: '-1',
          PostId: '-1',
          IsLeave: '0'
        }
        this.apipost(
          'admin_get_EmployeeGetList', msg,
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data
            }
          },
          err => {}
        )
      },
      // 重置表单
      resetForm(formName) {
        this.ruleVisible = false;
        // 重置表单
        this.form = {
            id:0,
            Name:'',//规则名称
            EmpType:'',//类型 1销售 2引流
            EmployeeId:'',
            EmpList:[//参与人
              {EmployeeId:''}
            ],
            WageRateList:[//工资阶梯列表
              {
                StartValue:0,
                EndValue:null,
                Rate:null
              }
            ],
            CommissionRateList:[//提成阶梯列表
              {
                StartValue:0,
                EndValue:null,
                Rate:null
              }
            ],
            BonusRateList:[//年终奖阶梯列表
              {
                StartValue:0,
                EndValue:null,
                Rate:null
              }
            ],
        };
        this.$refs[formName].resetFields();
        this.getList()
    },
    }
  }

</script>
<style scoped>
  .hollowFixedBtn{
    position: absolute;
    top: 9px;
    right: 20px;
  }
  ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 10px;background-color: #F1F1F1;cursor: pointer;position: relative;}
  ._nav li._active{background-color:#FFFFFF;color: #333333 }
  ._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
  .ImpressionTicketing-OuterFrame{
    padding: 10px 20px 20px 20px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 20%), 0 3px 4px rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
  }
  .ImpressionTicketing-msgboxtop{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ImpressionTicketing-msgbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .ImpressionTicketing-msgbox.bottom0{
    margin-bottom: 0;
  }
  .ImpressionTicketing-msgbox div{
    flex: 1;
  }
  .ImpressionTicketing-msgbox div.ImpressionTicketing-msg-but{
    flex: 0 0 auto;
  }
  .itc-delete{
    color: #E95252;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
  }
  .itc-outline{
    color: #409EFF;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
  }
  .ImpressionTicketing-title{
    padding: 0;
  }
  .left-text-indent{
    text-align: left;
    text-indent: 20px
  }
  /deep/.el-input-number{
    width: inherit;
  }
  /deep/.el-input-number .el-input__inner{
    text-align: left;
    height: 34px;
  }
  .Impression-ratio-box{
    display: flex;
    justify-content: space-between;
  }
  .Impression-ratio-right{
    font-size: 13px;
    margin-left: 5px;
  }
  /deep/.line-heigh .el-input-number{
    line-height: 32px;
  }
</style>
