<template>
  <div>
    <p class="edit_page_title">编辑【{{role_name}}】薪资设置</p>
    <Form ref="editSalary" :model="editSalary" :rules="editSalary" :label-width="200" id="edit-adminsalary-form">
      <FormItem label="角色权限">
        <Input v-model="role_name" type="text" disabled class="wid_347"></Input>
      </FormItem>
      <FormItem label="基本工资">
        <Input v-model="editSalary.base_wage" type="text" class="wid_347" @on-keyup="clearArrayList('base_wage')"></Input>
      </FormItem>
      <FormItem label="成长基金">
        <Input v-model="editSalary.grow_wage" type="text" class="wid_347" @on-keyup="clearArrayList('grow_wage')"></Input>
      </FormItem>
      <div>
        <FormItem :label="'直充流水消费提成比例档位'+NumberList[index]" v-for="(item,index) in ratioGroup" :key="'ratioGroup'+index" >
          <div style="height:30px;width:355px" class="fl" @click="ratioCanDelete(index,$event)">
            <Input v-model="item.max" type="text" class="wid_137 no_right_border fl" @on-keyup="clearArrayList('ratioGroup',index,'max')">
              <span slot="append">元</span>
            </Input>
            <p class="fl mar_L_5 mar_R_5">以上，提成</p>
            <Input v-model="item.ratio" type="text" class="wid_137 no_right_border fl" @on-keyup="clearArrayList('ratioGroup',index,'ratio',true)">
              <span slot="append">%</span>
            </Input>
          </div>
          <div style="display:inline" class="candelete" v-if="isdelete&&index==ratioIndex">
            <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5 yesimg':'mar_L_5 mar_T_7 yesimg'" @click="isdelete=false">
            <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_8 noimg':'noimg mar_T_6'" @click="deleteRatiogroup">
          </div>
          <div v-if="index===ratioGroup.length-1&&!isdelete">
            <img src="../../../static/image/add.png" alt='+' :class="ratioGroup.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addratioGroup" @click="addratioGroup('')">
            <div v-else style="display:inline">
              <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editRatioGroup(item.max,item.ratio,index)" >
              <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_7':'mar_T_6'" @click="deleteRatioGroup(index)">
            </div>
          </div>
        </FormItem>
        <FormItem :label="'直充流水消费提成比例档位一'"  v-if="ratioGroup.length===0">
          <Input v-model="addratioGroupInfo.max" type="text" readonly class="wid_137 no_right_border fl" @on-keyup="clearArrayList('ratioGroup',index,'max')">
            <span slot="append">元</span>
          </Input>
          <p class="fl mar_L_5 mar_R_5">，分成比例</p>
          <Input v-model="addratioGroupInfo.ratio" type="text" readonly class="wid_137 no_right_border fl" @on-keyup="clearArrayList('ratioGroup',index,'ratio',true)">
            <span slot="append">%</span>
          </Input>
          <img src="../../../static/image/add.png" alt='+' :class="ratioGroup.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addratioGroup" @click="addratioGroup('')">
          <div v-else style="display:inline">
            <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editRatioGroup(addratioGroupInfo.max,addratioGroupInfo.ratio,index)" >
            <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_8':'mar_T_6'" @click="deleteRatioGroup(index)">
          </div>
        </FormItem>
      </div>
      <!-- <FormItem label="推广人数奖" class="people_num">
        <p class="fl">最低达标数</p>
        <Input v-model="editSalary.spread_min" type="text" class="wid_137 fl no_right_border" @on-keyup="clearArrayList('spread_min')">
          <span slot="append">人</span>
        </Input>
        <p class="fl">，不足扣除</p>
        <Input v-model="editSalary.spread_deduct" type="text" class="wid_137 fl no_right_border" @on-keyup="clearArrayList('spread_deduct')">
          <span slot="append">元</span>
        </Input>
        <p class="fl">，每超过1人奖励</p>
        <Input v-model="editSalary.spread_reward" type="text" class="wid_137 fl no_right_border" @on-keyup="clearArrayList('spread_reward')">
          <span slot="append">元</span>
        </Input>
        <p class="fl">，最高奖励</p>
        <Input v-model="editSalary.max_reward" type="text" class="wid_137 fl no_right_border" @on-keyup="clearArrayList('max_reward')">
          <span slot="append">元</span>
        </Input>
      </FormItem> -->
      <FormItem :label="index===0?'元老业绩奖金':''"  v-for="(item,index) in oldPeopleList" :key="'oldPeopleList'+index" >
        <div style="height:30px;width:355px" class="fl"  @click="oldPeopleCanDelete(index,$event)">
            <p class="fl">业绩</p>
            <Input v-model="item.max" type="text" class="wid_130 no_right_border fl mar_L_5" @on-keyup="clearArrayList('oldPeopleList',index,'max')">
              <span slot="append">元</span>
            </Input>
            <p class="fl mar_L_5 mar_R_5">以上奖励</p>
            <Input v-model="item.bonus" type="text" class="wid_130 no_right_border fl" @on-keyup="clearArrayList('oldPeopleList',index,'bonus')">
              <span slot="append">元</span>
            </Input>
          </div>
          <div style="display:inline" class="candelete" v-if="isolddelete&&index==oldPeopleIndex">
            <img src="../../../static/image/yes.png" alt :class="oldPeopleList.length?'mar_T_8 mar_L_5 yesimg':'mar_L_5 mar_T_7 yesimg'" @click="isolddelete=false">
            <img src="../../../static/image/no.png" alt :class="oldPeopleList.length?'mar_T_8 noimg':'noimg mar_T_6'" @click="deleteOldPeoplegroup(index)">
          </div>
          <div v-if="index===oldPeopleList.length-1&&!isolddelete">
            <img src="../../../static/image/add.png" alt='+' :class="oldPeopleList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addOldPeopleList" @click="addOldPeopleList('')">
            <div v-else style="display:inline">
              <img src="../../../static/image/yes.png" alt :class="oldPeopleList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editOldPeopleList(item.max,item.bonus,index)" >
              <img src="../../../static/image/no.png" alt :class="oldPeopleList.length?'mar_T_7':'mar_T_6'" @click="deleteOldPeopleList(index)">
            </div>
          </div>
        </FormItem>
        <FormItem  :label="oldPeopleList.length===0?'元老业绩奖金':''"  v-if="oldPeopleList.length===0">
            <p class="fl">业绩 </p>
            <Input v-model="addOldPeopleInfo.max" type="text" readonly class="wid_130 no_right_border fl mar_L_5" >
              <span slot="append">元</span>
            </Input>
            <p class="fl mar_L_5 mar_R_5">以上奖励</p>
            <Input v-model="addOldPeopleInfo.bonus" type="text" readonly class="wid_130 no_right_border fl" >
              <span slot="append">元</span>
            </Input>
          <img src="../../../static/image/add.png" alt='+' :class="oldPeopleList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addbindRatioGroup" @click="addOldPeopleList('')">
          <div v-else style="display:inline">
            <img src="../../../static/image/yes.png" alt :class="oldPeopleList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editOldPeopleList(addOldPeopleInfo.max,addOldPeopleInfo.ratio,index)" >
            <img src="../../../static/image/no.png" alt :class="oldPeopleList.length?'mar_T_8':'mar_T_6'" @click="deleteOldPeopleList(index)">
          </div>
        </FormItem>
      <!-- <FormItem label="元老奖金入职时间要求">
        <InputNumber :min="0" v-model="editSalary.elder_time" class="wid_347"></InputNumber>
          <p class="form_tap_text">默认无时间要求，输入6，即员工入职半年后可享受该福利</p>
          <div class="clear"></div>
      </FormItem> -->
      <FormItem label="全勤奖">
        <Input v-model="editSalary.full_reward" type="text" class="wid_347" @on-keyup="clearArrayList('full_reward')"></Input>
      </FormItem>
      <FormItem label="加班费">
        <Input v-model="editSalary.overtime_pay" type="text" class="wid_347" @on-keyup="clearArrayList('overtime_pay')"></Input>
      </FormItem>
      <FormItem label="住宿费">
        <Input v-model="editSalary.room" type="text" class="wid_347" @on-keyup="clearArrayList('room')"></Input>
      </FormItem>
      <FormItem label="餐费">
        <Input v-model="editSalary.food" type="text" class="wid_347" @on-keyup="clearArrayList('food')"></Input>
      </FormItem>
      <FormItem label="出账日期">
        <Input v-model="editSalary.statement_date" type="text" class="wid_347 no_right_border" :maxlength="2">
          <span slot="append">号</span>
        </Input>
      </FormItem>
      <FormItem :label="index===0?'其他':''" class="other_form_item" v-for="(item,index) in otherList" :key="'otherList_'+index">
        <div class="fl wid_100" >
          <div>
            <div style="height:30px;width:355px" class="fl"  @click="otherCanDelete(index,$event)">
              <Input  v-model="item.title" type="text" class="wid_161 fl" placeholder="输入自定义项，如房补"></Input><p class="fl">&nbsp;- - &nbsp;</p>
              <Input  v-model="item.price" type="text" class="wid_161 fl" @on-keyup="clearArrayList('otherList',index,'price')"></Input>
            </div>
            <div style="display:inline" class="candelete" v-if="isotherdelete&&index==otherIndex">
            <img src="../../../static/image/yes.png" alt :class="otherList.length?'mar_T_8 mar_L_5 yesimg':'mar_L_5 mar_T_7 yesimg'" @click="isotherdelete=false">
            <img src="../../../static/image/no.png" alt :class="otherList.length?'mar_T_8 noimg':'noimg mar_T_6'" @click="deleteOthergroup(index)">
          </div>
            <div v-if="index===otherList.length-1&&!isotherdelete">
              <img src="../../../static/image/add.png" alt='+' :class="otherList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addOther" @click="addotherList(item,index)">
              <div v-else style="display:inline">
                <img src="../../../static/image/yes.png" alt :class="otherList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editotherList(item.title,item.price,index)" >
                <img src="../../../static/image/no.png" alt :class="otherList.length?'mar_T_8':'mar_T_6'" @click="deleteotherList(index)">
              </div>
            </div>
          </div>
        </div>
      </FormItem>
      <FormItem :label="otherList.length===0?'其他':''" class="other_form_item" v-if="otherList.length===0">
          <Input v-model="addotherInfo.title" type="text" readonly placeholder="输入自定义项，如房补" :class="otherList.length?'wid_161 fl':'wid_161 fl'"></Input>
          <span :style="!otherList.length?'':'position: relative;top:6px'">&nbsp;- -&nbsp;</span>
          <Input v-model="addotherInfo.price" type="text" readonly :class="otherList.length?'wid_161':'wid_161'" @on-keyup="clearArrayList('otherList',index,'price')"></Input>
          <img src="../../../static/image/add.png" alt :class="otherList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addOther" @click="addotherList('')">
          <div v-else style="display:inline">
            <img src="../../../static/image/yes.png" alt :class="otherList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editotherList(addotherInfo.title,addotherInfo.price,0)" >
            <img src="../../../static/image/no.png" alt :class="otherList.length?'mar_T_8':'mar_T_6'" @click="deleteotherList()">
          </div>
      </FormItem>
      <FormItem class="form_btn">
        <Button type="primary" @click='editSalaryInfo'>确认</Button>
        <Button class="return_btn mar_L_15" @click="return_last">返回</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import {stringNumber} from '@/assets/js/common'
export default {
  name: "edit_adminSalary",
  props: {
    role_name: String,
    role_id: Number,
  },
  data() {
    return {
      oldPeopleList:[],
      NumberList:stringNumber,
      is_addratioGroup:true,
      is_addbindRatioGroup:true,
      is_addOldPeopleList:true,
      ratioGroup:[],
      ratioIndex:null,
      isotherdelete:false,
      otherIndex:null,
      bindratioIndex:null,
      oldPeopleIndex:null,
      isolddelete:false,
      bindRatioGroup:[],
      is_addOther: true,
      isdelete:false,
      isbniddelete:false,
      editSalary: {
        ratio_type:'fixed',
        bind_ratio_type:'fixed',
        base_wage: 0.00,
        ratio: null,
        bind_ratio: null,
        spread_min:0,
        statement_date:null,
        full_reward: 0.00,
        overtime_pay:0.00,
        room:0.00,
        food:0.00,
        other:{},
        spread_deduct:0.00,
        spread_reward:0,
        grow_wage:0.00,
        max_reward:0.00,
      },
      otherList: [],
      addotherInfo:{
        title:'',
        price:''
      },
      addratioGroupInfo:{
        ratio:'',
        bgprice:'',
        edprice:'',
      },
      addbindRatioGroupInfo:{
        ratio:'',
        bgprice:'',
        edprice:'',
      },
      addOldPeopleInfo:{
        max:'',
        bonus:''
      },
    };
  },
  methods: {
    deleteRatiogroup(){
      this.ratioGroup.splice(this.ratioIndex,1)
      this.isdelete=false
    },
    deleteBindRatiogroup(){
      this.bindRatioGroup.splice(this.bindratioIndex,1)
      this.isbniddelete=false
    },
    deleteOldPeoplegroup(){
      this.oldPeopleList.splice(this.oldPeopleIndex,1)
      this.isolddelete=false
    },
    deleteOthergroup(){
      this.otherList.splice(this.otherIndex,1)
      this.isotherdelete=false
    },
    ratioCanDelete(index,event){
      this.ratioIndex==index?this.isdelete=!this.isdelete:this.ratioIndex=index;this.isdelete=true
    },
    BindratioCanDelete(index,event){
      this.bindratioIndex==index?this.isbniddelete=!this.isbniddelete:this.bindratioIndex=index;this.isbniddelete=true
    },
    oldPeopleCanDelete(index,event){
      this.oldPeopleIndex==index?this.isolddelete=!this.isolddelete:this.oldPeopleIndex=index;this.isolddelete=true
    },
    otherCanDelete(index,event){
      this.otherIndex==index?this.isotherdelete=!this.isotherdelete:this.otherIndex=index;this.isotherdelete=true
    },
    // input判断
    clearArrayList(array,index,btn,isNum){
      if(!!!index&&!!!btn&!!!isNum){
        for(let i in this.editSalary){
          if(i.toString()===array.toString()){
            if(i.toString()=='spread_min'){
              this.editSalary[i]=this.editSalary[i].replace(/[^\d]/g,"");
            }else{
              this.editSalary[i]=this.editSalary[i].replace(/[^\d.]/g,"")
              this.editSalary[i]=this.editSalary[i].replace(/^\./g,"")
              this.editSalary[i]=this.editSalary[i].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
              this.editSalary[i]=this.editSalary[i].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
            }
          }
        }
      }else{
        if(!!!isNum){
          this[array][index][btn]=this[array][index][btn].replace(/[^\d.]/g,"")
          this[array][index][btn]=this[array][index][btn].replace(/^\./g,"")
          this[array][index][btn]=this[array][index][btn].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
          this[array][index][btn]=this[array][index][btn].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
        }else{
          this[array][index][btn]=this[array][index][btn].replace(/[^\d]/g,"")
        }
      }
    },
    // 获取自定义工资
    getAdminSalaryDetail(){
      this.$api.getCustomSalaryDetail({role_id:this.role_id}).then(data=>{
        if(data.role_id!==undefined){
          data.ratio?data.ratio.forEach((item,index)=>{
            item.max=Number(item.max)/100
          }):''
          if(data.ratio == null) {
              this.ratioGroup = []
          }else {
             this.ratioGroup=data.ratio
          }
          data.bind_ratio?data.bind_ratio.forEach((item,index)=>{
            item.max=Number(item.max)/100
          }):''
          this.bindRatioGroup=data.bind_ratio||[]
          let spread=(data.spread)
          if(!!data.elder_bonus){
            data.elder_bonus.forEach((item,index)=>{
              item.max=Number(item.max)/100
              item.bonus=Number(item.bonus)/100
            })
            this.oldPeopleList=data.elder_bonus
          }
          this.editSalary.spread_min=spread? Number(spread.min):""
          this.editSalary.spread_deduct=spread? Number(spread.deduct)/100:''
          this.editSalary.spread_reward=spread? Number(spread.reward)/100:''
          this.editSalary.max_reward=spread? Number(spread.max_reward)/100:''
          this.editSalary.base_wage=Number(data.base_wage)/100
          this.editSalary.full_reward=Number(data.full_reward)/100
          this.editSalary.overtime_pay=Number(data.overtime_pay)/100
          this.editSalary.statement_date=data.statement_date
          this.editSalary.room=Number(data.room)/100
          this.editSalary.food=Number(data.food)/100
          this.editSalary.grow_wage=Number(data.grow_wage)/100
          if(!!data.other){
            let arr=(data.other)
            for(let i of arr){
              i.price=i.price/100
            }
            this.otherList=arr
          }
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    // 修改
    editSalaryInfo(){
      if(this.is_addratioGroup==false){
        let lastRowInfo=this.ratioGroup[this.ratioGroup.length-1]
        this.editRatioGroup(lastRowInfo.max,lastRowInfo.ratio,this.ratioGroup.length-1)
      }
      if(this.is_addbindRatioGroup==false){
        let lastRowInfo=this.bindRatioGroup[this.bindRatioGroup.length-1]
        this.editbindRatioGroup(lastRowInfo.max,lastRowInfo.ratio,this.bindRatioGroup.length-1)
      }
      if(this.is_addOther==false){
        let lastRowInfo=this.otherList[this.otherList.length-1]
        this.editotherList(lastRowInfo.title,lastRowInfo.price,this.otherList.length-1)
      }
      if(this.is_addOldPeopleList==false){
        let lastRowInfo=this.oldPeopleList[this.oldPeopleList.length-1]
        this.editOldPeopleList(lastRowInfo.max,lastRowInfo.bonus,this.oldPeopleList.length-1)
      }
      let other=[]
      if(this.is_addratioGroup==false||this.is_addbindRatioGroup==false||this.is_addOther==false||this.is_addOldPeopleList==false){
        return false
      }
      this.otherList.forEach((item,index) => {
        if(!!item.title){
          other.push({title:item.title,price:Number(item.price)})
        }
      });
      let spread={
        min:this.editSalary.spread_min,
        deduct:this.editSalary.spread_deduct,
        reward:this.editSalary.spread_reward,
        max_reward:this.editSalary.max_reward,
      }
      let params={
        role_id:this.role_id,
        base_wage:this.editSalary.base_wage,
        grow_wage:this.editSalary.grow_wage,
        spread:spread,
        full_reward:this.editSalary.full_reward,
        overtime_pay:this.editSalary.overtime_pay,
        room:this.editSalary.room,
        food:this.editSalary.food,
        other:other,
        ratio_type:this.editSalary.ratio_type,
        bind_ratio_type:this.editSalary.bind_ratio_type,
        statement_date:this.editSalary.statement_date,
        elder_bonus:this.oldPeopleList,
        ratio:this.ratioGroup,
      }
      this.$api.editDetailCustomSalaryInfo({...params}).then(data => {
        if(data.code===200){
          this.$emit('return_last')
          this.$Message.info(data.msg)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    // 添加图标
    addotherList(item,index) {
      this.otherList.push({title:'',price:''})
      this.is_addOther = false;
    },
    addratioGroup() {
      this.ratioGroup.push({max:'',ratio:''})
      this.is_addratioGroup=false
    },
    addbindRatioGroup() {
      this.bindRatioGroup.push({max:'',ratio:''})
      this.is_addbindRatioGroup=false
    },
    addOldPeopleList() {
      this.oldPeopleList.push({max:'',bonus:''})
      this.is_addOldPeopleList=false
    },
    
    //  确认图标
    editotherList(title,price,index) {
      if(title&&price){
        this.otherList[index].title=title
        this.otherList[index].price=price
        this.is_addOther = true;
      }else{
        this.is_addOther = true;
        this.otherList.splice(index, 1);
      }
    },
    editRatioGroup(max,ratio,index) {
      if(ratio&&max){
        this.ratioGroup[index].ratio=ratio
        // this.ratioGroup[index].min=min
        this.ratioGroup[index].max=max
        this.is_addratioGroup = true;
      }else{
        this.is_addratioGroup = true;
        this.ratioGroup.splice(index, 1);
      }
    },
    editbindRatioGroup(max,ratio,index) {
      if(ratio&&max){
        // this.bindRatioGroup[index].min=min
        this.bindRatioGroup[index].max=max
        this.bindRatioGroup[index].ratio=ratio
        this.is_addbindRatioGroup = true;
      }else{
        this.is_addbindRatioGroup = true;
        this.bindRatioGroup.splice(index, 1);
      }
    },
    editOldPeopleList(max,bonus,index) {
      if(bonus&&max){
        // this.bindRatioGroup[index].min=min
        this.oldPeopleList[index].max=max
        this.oldPeopleList[index].bonus=bonus
        this.is_addOldPeopleList = true;
      }else{
        this.is_addOldPeopleList = true;
        this.oldPeopleList.splice(index, 1);
      }
    },
    // 删除图标
    deleteotherList(index) {
      this.otherList.splice(index, 1);
      this.is_addOther = true;
    },
    deleteRatioGroup(index) {
      this.ratioGroup.splice(index, 1);
      this.is_addratioGroup = true;
    },
    deletebindRatioGroup(index) {
      this.bindRatioGroup.splice(index, 1);
      this.is_addbindRatioGroup = true;
    },
    deleteOldPeopleList(index) {
      this.oldPeopleList.splice(index, 1);
      this.is_addOldPeopleList = true;
    },
    // 返回
    return_last(){
      this.$emit('return_last')
    }
  },
  created(){
    this.getAdminSalaryDetail()
  }
};
</script>
<style>
.addSalary_btn {
  margin-top: 3px;
  margin-left: 5px;
}
.editSalary_btn {
  margin-top: 8px;
  margin-left: 5px;
}
.edleteSalary_btn {
  margin-top: 7px;
}
.pos_top{
  height: 0px;
  position: relative;
  top: -45px;
  left: 355px;
}
</style>

