<template>
  <div class="page_FProcessManagement">
    <ul class="_nav clearfix">
      <li style="color: red;">印尼同业销售提成规则</li>
        <input type="button" class="hollowFixedBtn" style="position: absolute; right: 90px;top: 9px;" :value="$t('pub.updateMsg')" @click="SetRules(dataList[0])"/>
    </ul>
      <div
        class="cm_content"
        style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
        v-for="(item,index ) in dataList "
        :key="index"
      >
        <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="150" style="min-width: 150px;"><p>{{$t('objFill.v101.FinancialModule.chengjrs')}}</p></td>

              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.AwardRuleList"
                :key="sIndex"
              >
                {{ son.StartValue }}{{son.EndValue&&son.EndValue!=-1?' ~ '+son.EndValue+'  '+$t('hotel.hotel_people'):' '+$t('objFill.v101.FinancialModule.renyishang')}}
            </th>
            </tr>
            <tr>
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.AwardRuleList" :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="150" style="min-width: 150px;">{{$t('objFill.v101.FinancialModule.nianzhongjl')}}<p>{{$t('objFill.v101.FinancialModule.meiyuert')}}{{item.YNBonusMinPNum}}{{$t('objFill.v101.FinancialModule.renyishang')}}</p></td>
              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.BonusRuleList"
                :key="sIndex"
              >{{ son.StartValue }} {{$t('objFill.v101.FinancialModule.geyuedb')}}
            </th>
            </tr>
            <tr>
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.BonusRuleList" :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;"
      >{{$t('system.content_noData')}}</div>
    <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-msgbox bottom0">
          <el-form-item :label="$t('objFill.v101.FinancialModule.dabiaors')" prop="YNBonusMinPNum">
              <el-input type="Number" v-model="form.YNBonusMinPNum" clearable></el-input>
          </el-form-item>
        </div>
        <el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
          <p class="ImpressionTicketing-title">{{$t('objFill.v101.FinancialModule.chengjrs')}}</p>
          <div class="ImpressionTicketing-msgbox"
          v-for="(item,index) in form.AwardRuleList" :key="index">
            <div>
              <el-form-item
              :label="form.AwardRuleList.length>0?`${$t('objFill.v101.FinancialModule.kaishizhi')} ${index+1} `:` ` "
              :prop="`AwardRuleList.${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.AwardRuleList.length>0?`${$t('objFill.v101.FinancialModule.jishuzhi')} ${index+1} `:` ` "
              :prop="`AwardRuleList.${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.AwardRuleList.length>0?`${$t('objFill.v101.FinancialModule.jiangli')} ${index+1} `:` ` "
              :prop="`AwardRuleList.${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">{{$t('objFill.v101.FinancialModule.nianzhongjl')}}</p>
          <div class="ImpressionTicketing-msgbox" v-for="(item,index) in form.BonusRuleList" :key="index">
            <div>
              <el-form-item
              :label="form.BonusRuleList.length>0?`${$t('objFill.v101.FinancialModule.lianxudb')} ${index+1} `:` ` "
              :prop="`BonusRuleList.${index}.StartValue`"
              :rules="rules.StartValue"
              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.StartValue" clearable></el-input>
                <span class="Impression-ratio-right">{{$t('pub.month')}}</span>
              </div>
              </el-form-item>
            </div>
            <div>
              <el-form-item
              :label="form.BonusRuleList.length>0?`${$t('objFill.v101.FinancialModule.jiangli')} ${index+1} `:` ` "
              :prop="`BonusRuleList.${index}.Rate`"
              :rules="rules.Rate2"
              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,5)" v-if="index==0" class="el-icon-circle-plus-outline itc-outline"></span>
              <span @click="deleteRule(item,index,5)" 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">{{$t('pub.cancelBtn')}}</el-button>
        <el-button size="small" type="danger" @click="RulesOk('form')" :loading="ruleLoading">{{$t('pub.sureBtn')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        EmployeeList: [],
        value:"",
        rules: {
          Name: [{  required: true,  message: this.$t('rule.qsrgzmingcheng'),  trigger: "blur"}],
          YNBonusMinPNum: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrdbrs'),  trigger: "blur"}],
          SalesRate: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrtcbl'),  trigger: "blur"}],
          EmployeeId: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingxzcyrs'),  trigger: 'change'}],
          StartValue: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrksz'),  trigger: "blur"}],
          EndValue: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrksz'),  trigger: "blur"}],
          Rate: [{  required: true,  message: this.$t('rule.qsrjine'),  trigger: "blur"}],
          Rate2: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrbl'),  trigger: "blur"}],
          Content: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrxz'),  trigger: "blur"}],
          Name: [{  required: true,  message: this.$t('objFill.qsrgzmingcheng'),  trigger: "blur"}],
          PeopleNum: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingsrzdrs'),  trigger: "blur"}],
          Money: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qiingsrmjje'),  trigger: "blur"}],
          EmpIdList: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingxzcyxs'),  trigger: 'change'}],
          EnableDate: [{  required: true,  message: this.$t('objFill.v101.FinancialModule.qingxzcyrq'),  trigger: 'change'}],
        },
        AwardRuleList:{  StartValue:0,  EndValue:null,  Rate:null},
        BonusRuleList:{  StartValue:0,  Rate:null},
        form:{
          Id:0,
          AwardRuleList:[  {    StartValue:0,    EndValue:null,    Rate:null  }],
          BonusRuleList:[  {    StartValue:0,    Rate:null  }],
          YNBonusMinPNum:0
        },
        ruleLoading: false,
        ruleVisible:false,
        titleName: this.$t('fnc.tcguize'),
        loading: false,
        dataList:[],
      }
    },
    created() {},
    mounted() {
      this.getList()
    },
    methods: {
      // 初始化表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 添加规则
      addRule(row,index,type){
        if(type==1){
          this.form.AwardRuleList.push(JSON.parse(JSON.stringify(this.AwardRuleList)))
        }else{
          this.form.BonusRuleList.push(JSON.parse(JSON.stringify(this.BonusRuleList)))
        }
      },
      // 删除规则
      deleteRule(row,index,type){
        if(type==1){
          this.form.AwardRuleList.splice(index,1)
        }else{
          this.form.BonusRuleList.splice(index,1)
        }
      },
      AddMsg(){//新增
        this.ruleVisible = true
        this.titleName = this.$t('fnc.tcguize')
      },
      SetRules(item){//编辑
        this.ruleVisible = true;
        item = JSON.parse(JSON.stringify(item))
        this.form = {
          Id:item.Id,
          AwardRuleList:item.AwardRuleList,
          BonusRuleList:item.BonusRuleList,
          YNBonusMinPNum:item.YNBonusMinPNum
        }
      },
      // 点击确定
      RulesOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleLoading = true
            this.apipost(
              'sellcommission_SetYNSaleCommissionRule', this.form,
              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 => {}
            )
          }
        });
      },
      // 获取列表数据
      getList() {
        this.loading = true;
        this.apipost("sellcommission_GetYNSaleCommissionRuleList", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;

          }else{
            this.Error(res.data.message)
          }
        });
      },
      // 重置表单
      resetForm(formName) {
        this.ruleVisible = false;
        // 重置表单
        this.form = {
          Id:0,
          AwardRuleList:[
            {
              StartValue:0,
              EndValue:null,
              Rate:null
            }
          ],
          BonusRuleList:[
            {
              StartValue:0,
              Rate:null
            }
          ],
          YNBonusMinPNum:0
        };
        this.$refs[formName].resetFields();
    },
    }
  }

</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-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 36px !important;
  }
  .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;
  }
  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC{
    flex-wrap: wrap;
  }
  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div{
   flex: 0 0 220px;
  }
  .ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div:last-child{
    flex: 0 0 auto;
  }
  .EmpGroupListBox{
    display: flex;flex-direction: row; flex-wrap: nowrap;
    justify-content: space-between;
    /* box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 1px 4px rgb(0 0 0 / 14%), 0 1px 1px -1px rgb(0 0 0 / 12%); */
    margin-bottom: 5px;

  }
  .EmpGroupListBox:last-child{
    /* margin-bottom: 0; */
  }
  .EmpGroupListBox>div{
    flex: 0 0 220px;
  }
  .EmpGroupListBox>div:nth-child(2){
    /* margin-left: 50px; */
  }
  /deep/.EmpGroupListBox .el-form-item__content{
    /* width: 100%; */
  }
</style>
