<style scoped>
  .CLM-Form .el-input__inner {
    background: transparent;
    border: 0;
  }

  .CLM-Form .el-input-group__append {
    background: transparent;
    border: 0;
  }

  .common_Style {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }

  .classForm_monday {
    background-color: #ced9f8;
    color: #2961FE;
  }

  .classForm_tuesday {
    background-color: #d9f3ff;
    color: #3FC4FF;
  }

  .classForm_wednesday {
    background-color: #f6e2cb;
    color: #F28C1D;
  }

  .classForm_thursday {
    background-color: #ccf3eb;
    color: #02C499;
  }

  .classForm_friday {
    background-color: #f7cfd6;
    color: #F72E52;
  }

  .classForm_saturday {
    background-color: #fff5cc;
    color: #FFCC00;
  }

  .classForm_sunday {
    background-color: #e6e3fe;
    color: #8175FB;
  }

  .CLM-Form .Emp_Line {
    width: 3px;
    height: 10px;
    background-color: #3FC4FF;
    margin-right: 10px;
  }

  .CLM-Form .EmpLine_title {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
  }

  .planTimeLi2 tbody::before {
    content: '';
    display: table-row;
    height: 20px;
  }

  .customerPhoto {
    width: 55px;
    height: 55px;
  }

  .customerPhoto img {
    width: 100%;
    height: 100%;
  }

  .q-field__before,
  .q-field__prepend {
    padding-right: 0px !important;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 60vh">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>基本信息</div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select filled option-value="Id" option-label="Name" class="col-6 q-pb-lg q-pr-lg"
              v-model="objOption.PlanType" :options="TypeList" @input="getEmployeeList" emit-value map-options
              label="方案类型" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.PlanName" ref="PlanName"
              class="col-6 q-pb-lg" label="方案名称" :rules="[val => !!val || '请输入方案名称']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.BasicSalary" ref="BasicSalary"
              class="col-6 q-pb-lg q-pr-lg" label="基本工资" @keyup.native="checkPrice(objOption,'BasicSalary')" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.OpenBonus" ref="OpenBonus"
              class="col-6 q-pb-lg" label="开单奖金" @keyup.native="checkPrice(objOption,'OpenBonus')" suffix="/月" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WorkAgeSalary"
              ref="WorkAgeSalary" class="col-6 q-pb-lg q-pr-lg" label="工龄工资"
              @keyup.native="checkPrice(objOption,'WorkAgeSalary')" suffix="/年" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ClueNumSalary"
              ref="ClueNumSalary" class="col-6 q-pb-lg" label="线索奖金"
              @keyup.native="checkPrice(objOption,'ClueNumSalary')" suffix="大于5条" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select @filter="filterCourseFn" class="col-6 q-pb-lg q-pr-lg" use-input filled multiple
              option-value="CourseId" option-label="CourseName" v-model="UseCourseIdsArray" :options="chooseCourseList"
              emit-value map-options label="学习课程" clearable />
          </div>
          <div class="col-6">
            <q-select @filter="filterCourseFn" use-input filled multiple option-value="CourseId"
              option-label="CourseName" v-model="NotUseCourseIdsArray" :options="chooseCourseList" emit-value
              map-options label="不适用课程" clearable />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6" style="display:flex;align-items:center;">
            <q-select filled v-model="SaleIdsArray" style="width:290px;" clearable multiple @filter="filterEmployee"
              use-input class="q-pb-lg" :options="myEmployeeList" label="适用人员" option-label="EmployeeName"
              option-value="Id" emit-value map-options />
            <div class="q-gutter-sm q-pb-lg">
              <q-checkbox v-model="isCheckAll" label="全选" @input='getAllEmployee' />
            </div>
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.MonthGoalMoney"
              ref="MonthGoalMoney" class="col-6 q-pb-lg" label="月度达标金额"
              @keyup.native="checkPrice(objOption,'MonthGoalMoney')" />
          </div>
        </div>
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>达标人头数配置</div>
          <q-btn style="margin-left:30px;" size="10px" @click="addCourse()" round color="primary"
            icon="iconfont icon-img_haha" />
        </div>
        <div class="row wrap" v-for="(item,index) in objOption.DetailList" :key="index">
          <div class="col-4">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="item.StartNum" ref="StartNum"
              class="col-6 q-pb-lg q-pr-lg" label="开始人数" @keyup.native="checkInteger(item,'StartNum')" />
          </div>
          <div class="col-4">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="item.EndNum" ref="EndNum"
              class="col-6 q-pb-lg q-pr-lg" label="结束人数" @keyup.native="checkInteger(item,'EndNum')" />
          </div>
          <div class="col-4">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="item.Money" ref="Money"
              class="col-6 q-pb-lg" label="奖励金额" @keyup.native="checkPrice(item,'Money')" />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveConsult">
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    SetBounsPlan,
    GetBonusPlan
  } from "../../api/finance/index";
  import {
    queryEmployee
  } from '../../api/users/user'
  import {
    queryCourseDropdownList
  } from '../../api/course/index'

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Id: 0,
          PlanName: '', //方案名称
          PlanType: 1, //方案类型(1-市场，2-课程顾问)
          BasicSalary: '', //基本工资 
          OpenBonus: '', //开单奖金 
          WorkAgeSalary: '', //工龄工资 
          ClueNumSalary: '', //线索奖金
          SaleIds: '', //销售人员
          UseCourseIds: '', //使用课程编号
          NotUseCourseIds: '', //不适用课程编号
          MonthGoalMoney: '', // 月度达标金额
          DetailList: []
        },
        SaleIdsArray: [],
        UseCourseIdsArray: [],
        NotUseCourseIdsArray: [],
        TypeList: [{
          Id: 1,
          Name: '市场'
        }, {
          Id: 2,
          Name: '课程顾问'
        }],
        myEmployeeList: [],
        employeeList: [],
        chooseCourseList: [],
        CourseList: [], //关联课程下拉数据
        saveLoading: false,
        optionTitle: '',
        isCheckAll: false
      }
    },
    created() {
      this.getCourseList();
    },
    mounted() {
      this.getEmployeeList();
      this.initObj()
    },
    methods: {
      //点击适用人员全选
      getAllEmployee() {
        if (this.isCheckAll) {
          this.SaleIdsArray = [];
          this.employeeList.forEach(x => {
            this.SaleIdsArray.push(x.Id);
          })
        } else {
          this.SaleIdsArray = [];
        }
      },
      //新增
      addCourse() {
        let obj = {
          DetailId: 0,
          PlanId: 0,
          StartNum: '', //开始人数
          EndNum: '', //结束人数
          Money: '', //奖励金额
        }
        this.objOption.DetailList.push(obj);
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
            this.chooseCourseList = res.Data;
          }
        })
      },
      //课程筛选
      filterCourseFn(val, update, abort) {
        update(() => {
          this.chooseCourseList = this.CourseList.filter(
            v => v.CourseName.indexOf(val) > -1
          );
        });
      },
      //获取员工列表
      getEmployeeList() {
        var qMsg = {
          IsLeave: 1
        };
        queryEmployee(qMsg).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
          if (this.SaleIdsArray.length == this.employeeList.length) {
            this.isCheckAll = true;
          } else {
            this.isCheckAll = false;
          }
        })
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          let msg = {
            Id: this.saveObj.Id
          }
          GetBonusPlan(msg).then(res => {
            if (res.Code == 1) {
              let tempData = res.Data;
              this.objOption.Id = tempData.Id;
              this.objOption.PlanName = tempData.PlanName;
              this.objOption.BasicSalary = tempData.BasicSalary;
              this.objOption.OpenBonus = tempData.OpenBonus;
              this.objOption.WorkAgeSalary = tempData.WorkAgeSalary;
              this.objOption.ClueNumSalary = tempData.ClueNumSalary;
              this.objOption.SaleIds = tempData.SaleIds;
              this.objOption.UseCourseIds = tempData.UseCourseIds;
              this.objOption.NotUseCourseIds = tempData.NotUseCourseIds;
              this.objOption.DetailList = tempData.DetailList;
              this.objOption.MonthGoalMoney = tempData.MonthGoalMoney;
              this.objOption.PlanType = tempData.PlanType;
              this.SaleIdsArray = tempData.SaleIdList;
              this.UseCourseIdsArray = tempData.UseCourseIdList;
              this.NotUseCourseIdsArray = tempData.NotUseCourseIdList;
            }
          })
          this.optionTitle = "修改客户信息"
        } else {
          this.objOption.Id = 0;
          this.objOption.PlanName = '';
          this.objOption.BasicSalary = '';
          this.objOption.OpenBonus = '';
          this.objOption.WorkAgeSalary = '';
          this.objOption.ClueNumSalary = '';
          this.objOption.SaleIds = '';
          this.objOption.UseCourseIds = '';
          this.objOption.NotUseCourseIds = '';
          this.objOption.MonthGoalMoney = '';
          this.objOption.DetailList = [];
          this.optionTitle = "新增人头奖金信息";
        }
      },
      //保存
      saveConsult() {
        this.$refs.PlanName.validate();
        if (!this.$refs.PlanName.hasError) {
          this.objOption.SaleIds = this.SaleIdsArray.toString();
          this.objOption.UseCourseIds = this.UseCourseIdsArray.toString();
          this.objOption.NotUseCourseIds = this.NotUseCourseIdsArray.toString();
          this.saveLoading = true;
          SetBounsPlan(this.objOption).then(res => {
            this.saveLoading = false;
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据保存成功！",
                position: "top",
              });
              this.$emit("success");
              this.closeCourseForm()
            }
          })
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      }
    },
  }

</script>
