<template>
  <div style="width: 300px;overflow: hidden;" class="border-radius-10 border margin-right-xs  bg-white">
    <el-table :data="staffLists" max-height="300" class="margin-xs" style="width:280px">
      <el-table-column align="left" prop="brandNumber" label="水牌号--管理员名字" min-width="180">
        <template slot-scope="scope">
          <el-select style="width:180px" v-model="scope.row.staffNames" clearable @clear="clear(scope.$index)" no-match-text="重新选择管理员" placeholder="请选择" @change="ratioChange($event,scope.$index)" filterable default-first-option>
            <el-option v-for="(item,index) in staffList" :key="index" :label="item.brandNumber+'--'+ item.staffName" :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ratio" label="占比(%)" width="80">
        <template slot-scope="scope">
          <div class="form-input-width" v-if="editIndex!=scope.$index" @click="openStaffRatio(scope.$index, scope.row)">
            {{ scope.row.ratio }}
            <i class="el-icon-edit text-cyan" v-if="scope.$index!=0"></i>
          </div>
          <el-input v-focus class="form-input-width-xs" size="samll" type="number" v-else v-model="scope.row.ratio" @blur="endStaffRatio(scope.row, scope.$index)" :disabled="scope.$index==0"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 150px;margin:10px auto;" class="flex justify-between align-center">
      <el-button size="mini" type="info" :disabled="staffLists.length == 0" @click="delsalesman">撤销</el-button>
      <el-button size="mini" type="primary" plain @click="handleadd">增加</el-button>
    </div>
  </div>
</template>
<script>
import { selectListType } from "@/api/eashier.js";
export default {
  data() {
    return {
      staffList: [], //选择员工数组
      staffLists: [{ ratio: 100 }], //员工占比初始化 //主员工数组
      editIndex: -1, //员工占比修改下标
      staffListCopy: [], //复制选择员工数组
      storeId: null, //当前门店id
      nums:'',
    };
  },
  methods: {
    handleadd(){
      if(this.staffLists.length>=4) return this.$message({message: '最多只能添加四条',type: 'warning'});
      this.staffLists.push({brandNumber:'',staffName:'',ratio:0})
    },
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    setRatio() {
      let num = 0;
      this.staffLists.forEach((item, i) => {
        if (i != 0) {
          num += item.ratio * 1;
        }
      });
      this.nuns=this.staffLists[0].ratio
      this.staffLists[0].ratio = 100 - num;
    },
    //删除当前选择
    clear(index) {
      this.staffLists.splice(index, 1);
      this.setRatio();
      this.changeStaff();
      this.confirm();
    },
    //下拉选择方法
    ratioChange(v, index) {
      this.staffList.forEach((item) => {
        if (item.id == v) {
          item.ratio = this.staffLists[index].ratio;
          item.staffNames = item.brandNumber + "--" + item.staffName;
          this.staffLists.splice(index, 1, item);
        }
      });
      this.staffLists.forEach((item, indexs) => {
        if (index != indexs && v == item.id) {
          this.staffLists.splice(index, 1, { ratio: 0 });
          this.setRatio();
          this.$message.warning({ message: "员工已存在列表中" });
        }
      });
      let length = this.staffLists.length - 1;
      if (this.staffLists[length].id) {
        this.staffLists.push({ ratio: 0 });
      }
      this.confirm();
      this.changeStaff();
    },
    //打开员工修改输入框
    openStaffRatio(index, row) {
      if (index != 0 || row.ratio * 1 != 100) {
        let form = { ...row };
        this.editIndex = index;
        this.staffLists.splice(index, 1, form);
      }
    },
    //关闭员工修改输入框
    endStaffRatio(row, index) {
      if (index != 0) {
       this.setRatio();
        if (this.staffLists[0].ratio < 1) {
          this.$message.error({
            message: "第一位员工占比过低",
          });
          this.staffLists.forEach((item) => {
            if (item.ratio >= this.nums) {
              item.ratio = 0;

            }
          });
          let number = 0;
          this.staffLists.forEach((item, index) => {
            if (index != 0) {
              number += item.ratio * 1;
              console.l
            }
            this.staffLists[0].ratio = 100 - number
          });

        } else if (this.staffLists[0].ratio > 100) {
          this.$message.error({
            message: "第一位员工占比过高",
          });
          this.staffLists.forEach((item) => {
            if (item.ratio < 0) {
              item.ratio = 0;

            }
          });
          let number = 0;
          this.staffLists.forEach((item, index) => {
            if (index != 0) {
              number += item.ratio * 1;
              console.l
            }
            this.staffLists[0].ratio = 100 - number
          });
        }
        else {
          if (!row.ratio) {
            row.ratio = 0;
          } else {
            if (row.ratio < 0) {
              // this.staffLists.forEach((item, index) => {
              this.$message.error({
                message: "输入不能小于0",
              });
              row.ratio = 0;

              // });
              let number = 0;
              this.staffLists.forEach((item, index) => {
                if (index != 0) {
                  number += item.ratio * 1;
                }
                this.staffLists[0].ratio = 100 - number
              });
            } else {
              row.ratio = row.ratio * 1;
            }

          }
          let form = this.staffLists[index];
          this.editIndex = -1;
          this.staffLists.splice(index, 1, form);
        }
      }
      this.confirm();
      this.changeStaff();
    },
    //撤销增加员工
    delsalesman() {
      let index = this.staffLists.length - 1;
      if (index == 0) {
        this.$message.warning({ message: "第一行员工只能修改" });
      } else {
        let ratio = this.staffLists[index].ratio;
        this.staffLists[0].ratio += ratio;
        this.staffLists.splice(index, 1);
      }
      this.confirm();
      this.changeStaff();
    },
    //组件传值
    show(list, storeId) {
      this.staffLists = [...list];
      this.staffLists.forEach((item) => {
        if (item.id || item.staffId) {
          item.staffNames = item.brandNumber + "-" + item.staffName;
        } else {
          item.staffNames = "";
        }
      });
      if (storeId) {
        this.storeId = storeId;
      }
      this.getData();
    },
    //确定返回方法
    confirm() {
      let list = [];
      this.staffLists.forEach((item) => {
        let items = {
          id: item.id,
          ratio: item.ratio,
          brandNumber: item.brandNumber,
          staffName: item.staffName,
          identityCard: item.identityCard,
          storeId: item.storeId,
          storeName: item.storeName,
          staffType: 1,
          staffNames: item.brandNumber + "--" + item.staffName,
        };
        list.push(items);
      });
      this.$emit("adminData", list);
    },
    //改变员工 去除未选择员工列表中的员工
    changeStaff() {
      var that = this;
      let arr = [];
      this.staffLists.forEach((item) => {
        let list = [];
        this.staffListCopy.forEach((items) => {
          if (item.id != items.id) {
            list.push(items);
          }
        });
        arr = list;
      });
      // var list = that.staffLists
      //   .concat(that.staffListCopy)
      //   .filter(function (v) {
      //     return (
      //       that.staffLists.indexOf(v) === -1 ||
      //       that.staffListCopy.indexOf(v) === -1
      //     );
      //   });
      // list.forEach((item) => {
      //   if (item.id) {
      //     arr.push(item);
      //   }
      // });
      this.staffList = this.noRepeat(arr);
    },
    //获取员工数据
    //获取数据
    async getData() {
      let form = { type: 0 };
      if (this.storeId) {
        form.storeId = this.storeId;
      }
      selectListType(form).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.editStaffRatioShow = false;
          });
          this.staffList = res.rows;
          this.staffListCopy = res.rows;
        } else {
          this.$alert(res.message, "加载员工提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
