<template>
  <q-dialog v-model="persistent" full-height maximized position="right" persistent @hide="closeCutomer"
    transition-show="slide-left">
    <div class="customMain" v-if="addMsg">
      <div class="cycle_Title">小语种提成规则</div>
      <div style="margin-top: 10px;">
        <q-input filled stack-label :dense="false" v-model="addMsg.PlanName" style="width: 640px;" ref="PlanName"
          class="col-12 q-pb-lg" label="方案名称" :rules="[val => !!val || '请填写方案名称']" />
      </div>
      <q-select filled stack-label option-value="Id" option-label="SubjectName" v-model="addMsg.CourseList" use-chips
        use-input :options="myCourseList" label="科目" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value multiple
        map-options @filter="filterFn" @input="$forceUpdate()" />

      <div style="display: flex;align-items: center;margin-bottom: 15px;">
        <q-select filled stack-label option-value="Id" option-label="EmployeeName" v-model="addMsg.EmpList" use-chips
          use-input :options="myEmployeeList" label="提成人员" :dense="false" emit-value multiple map-options
          @filter="filterEmployee" style="flex:1;" @input='getpersonnel(1)' />
        <div class="q-gutter-sm" style="margin-right: 18px;">
          <q-checkbox v-model="personnel" label="全选" @input='getallpersonnel(1)' />
        </div>
      </div>
      <div style="margin-bottom:80px;">
        <div>业绩比例</div>

        <div v-for="(x,y) in addMsg.DetailList" :key="y" style="display: flex;align-items: center;margin-bottom: 10px;">
          <q-input clearable filled v-model="x.StartNum" style="width: 190px;margin-right: 5px;" type="number"
            @input="$forceUpdate()" label="初始值" />
          <q-input clearable filled v-model="x.EndNum" style="width: 190px;margin-right: 5px;" type="number"
            @input="$forceUpdate()" label="结束值" />
          <q-input clearable filled v-model="x.RatioMoney" style="width: 190px;margin-right: 5px;" type="number"
            @input="$forceUpdate()" label="提成比例（%）" />
          <q-btn round size="xs" color="deep-orange" icon="delete" v-if="addMsg.DetailList.length > 1"
            @click="addMsg.DetailList.splice(y, 1)" style="margin-left: 10px;" />
          <q-btn round size="xs" color="primary" icon="add" v-if="addMsg.DetailList.length == y + 1"
            @click="addMsg.DetailList.push({ StartNum: '', EndNum: '', RatioMoney: '' })" style="margin-left: 10px;" />
        </div>
      </div>
      <div
        style="width: 100%;height: 50px;position: absolute;left: 0;bottom: 0;background: #FFF;display: flex;align-items: center;padding: 0 20px;justify-content: flex-end;">
        <q-btn color="accent" size="sm" class="q-mr-md" label="保存" @click="setAdd()"></q-btn>
      </div>

      <div class="dialog-out-close" @click="closeCutomer">
        <i class="iconfont icon-close" style="font-size:26px;" />
      </div>
    </div>
  </q-dialog>
</template>
<script>
  export default {
    components: {

    },
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      isAdd: { // true新增 false修改
        type: Boolean,
        default: true
      },
      loyeeList: { //人员列表
        type: Array,
        default: []
      },
      CourseList: { //课程下拉列表
        type: Array,
        default: []
      },

      selectData: { //修改带过来的对象
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        persistent: true,
        addMsg: null,
        //员工列表
        employeeList: [],
        allCourseList: [],
        myCourseList: [],
        personnel: false, //人员全选
        branch: false, //部门人员
        myEmployeeList: [],
      }
    },
    created() {
      this.employeeList = JSON.parse(JSON.stringify(this.loyeeList))
      this.myEmployeeList = JSON.parse(JSON.stringify(this.loyeeList))
      this.allCourseList = JSON.parse(JSON.stringify(this.CourseList))
      this.myCourseList = JSON.parse(JSON.stringify(this.CourseList))
      if (this.isAdd == true) { //新增
        this.addMsg = {
          Id: 0,
          PlanName: '',
          CourseList: [], //课程列表
          EmpList: [], //提现人员
          LanguageIds: "",
          DetailList: [{
            StartNum: '',
            EndNum: '',
            RatioMoney: '',
            DetailId: 0
          }],

        }
      } else { //修改
        this.addMsg = JSON.parse(JSON.stringify(this.selectData))
        this.addMsg.EmpList = this.getId(this.selectData.EmpList, 3)
        this.addMsg.CourseList = this.getId(this.selectData.CourseSubjectList, 2)
        if (this.addMsg.DetailList.length == 0) {
          this.addMsg.DetailList.push({
            StartNum: '',
            EndNum: '',
            RatioMoney: '',
            DetailId: 0
          })
        }
        if (this.addMsg.EmpList.length == this.employeeList.length) {
          this.personnel = true
        } else {
          this.personnel = false
        }
      }
    },
    mounted() {

    },
    methods: {
      getId(arr, type) {
        let list = [];
        let Id = 'Id';
        if (type == 2) {
          Id = 'Id';
        }
        if (arr && arr.length > 0) {
          arr.forEach(x => {
            list.push(x[Id])
          })
        }
        return list
      },
      closeCutomer() {
        this.$emit('close')
      },

      getallpersonnel(type) {
        if (type == 1) { //人员全选
          if (this.personnel == true) {
            this.addMsg.EmpList = []
            this.myEmployeeList.forEach(x => {
              this.addMsg.EmpList.push(x.Id)
            })
          } else {
            this.addMsg.EmpList = []
          }
        }
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          if (val === '') {
            this.myEmployeeList = this.employeeList
          } else {
            const needle = val.toLowerCase();
            this.myEmployeeList = this.employeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      getpersonnel(type) {
        if (type == 1) { //人员全选
          if (this.addMsg.EmpList.length == this.employeeList.length) {
            this.personnel = true
          } else {
            this.personnel = false
          }
        }
      },
      filterFn(val, update) { //课程的栓选
        update(() => {
          if (val === '') {
            this.myCourseList = this.allCourseList
          } else {
            const needle = val.toLowerCase();
            this.myCourseList = this.allCourseList.filter(v => v.SubjectName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      setAdd() {
        this.$refs.PlanName.validate();
        if (!this.$refs.PlanName.hasError) {
          let msg = JSON.parse(JSON.stringify(this.addMsg))
          for (let i = 0; i < msg.DetailList.length; i++) {
            let x = msg.DetailList[i]
            if (x.StartNum === '') {
              this.$q.notify({
                type: 'negative',
                message: `请输入业绩比例初始值`,
                position: 'top'
              })
              return
            }
            if (x.EndNum == '') {
              this.$q.notify({
                type: 'negative',
                message: `请输入业绩比例结束值`,
                position: 'top'
              })
              return
            }
            if (x.RatioMoney < 0) {
              this.$q.notify({
                type: 'negative',
                message: `请输入业绩比例不小于0的提成比例`,
                position: 'top'
              })
              return
            }
          }
          this.$emit('success', msg)
        }
      },
    },
  }

</script>
<style scoped>
  .cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
  }

  .customMain {
    width: 700px !important;
    display: flex;
    flex-direction: column;
    height: 100 vh;
    padding: 15px 17px 0 17px;
    background-color: #fff;
  }

</style>
