<style>
  .stuCloseBtn {
    position: absolute;
    right: -8px;
    top: -9px;
    width: 20px;
    height: 20px;
    border: 1px solid red;
    background-color: red;
    color: #fff;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor:pointer;
  }

</style>
<template>
  <div>
    <q-card flat class="q-pa-lg q-my-lg" v-loading="loading">
      <div class="text-h6 text-weight-bold">分配给以下部门/成员</div>
      <div style="display:flex;justify-content:end;width:600px;margin-bottom:10px;">
        <q-btn round color="primary" icon="iconfont icon-img_haha" @click="addEmployee()" />
      </div>
      <div style="display:flex;margin-bottom:10px;position:relative;width:620px;" v-for="(item,index) in List" :key="index">
        <q-select class="col-6 q-pb" v-model="item.Content" @input="getName(item.Content,index)"
          style="width:300px;margin-right:10px;" clearable filled stack-label use-input option-value="Id"
          option-label="EmployeeName" ref="ManagerId" :options="EmployeeList" label="留学顾问" :dense="false" emit-value
          map-options @filter="filterFn">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                未找到相关数据
              </q-item-section>
            </q-item>
          </template>
        </q-select>
        <q-select filled v-model="item.CodeList" multiple option-value="Id" option-label="Name" :options="NeedData"
          label="客户需求" style="width: 300px" emit-value map-options />
        <div class="stuCloseBtn">
          <i @click="delStepStu(index)" class="iconfont icon-guanbi"></i>
        </div>
      </div>
      <q-btn class="q-mt-xl q-px-lg" unelevated color="primary" :loading="saving" @click="saveHandler">立即保存</q-btn>
    </q-card>
    <choiceapproval v-if="outerVisible" @close="getclose()" :singleCheck="true" @success="getsuccess2"
      :byval="chosenUser" cptype="0">
    </choiceapproval>
  </div>
</template>

<script>
  import choiceapproval from "../../components/enterprise/choiceapproval";
  import {
    getDictValue
  } from "../../api/administration/administration";
  import {
    saveDict
  } from "../../api/system/notiveSysSet";
  import {
    GetNeedsList
  } from "../../api/school/index";
  import {
    queryEmployee
  } from "../../api/users/user"; //获取员工
  export default {
    components: {
      choiceapproval
    },
    data() {
      return {
        chosenUser: [],
        outerVisible: false,
        saving: false,
        loading: false,
        dictObjEmp: {
          ID: 0,
          Code: "",
          Content: "",
          DictKey: "PUSH_STU_STUDYABROAD",
          Mask: "",
          Name: "留学客户分配规则",
        },
        multiCheck: [],
        NeedData: [], //多选
        EmployeeList: [], // 员工
        AllemployeeList: [],
        List: [{
          CodeList: [],
          Code: '',
          Content: '',
          Mask: ""
        }]
      };
    },
    created() {
      this.getGetNeedsList();
      this.getEmployee();
      this.init();
    },
    methods: {
      //点击添加
      addEmployee() {
        let obj = {
          CodeList: [],
          Code: '',
          Content: '',
          Mask: ""
        }
        this.List.push(obj);
      },
      delStepStu(index){
        this.List.splice(index,1);
      },
      //选择Name
      getName(Id, index) {
        this.EmployeeList.forEach(x => {
          if (x.Id == Id) {
            this.List[index].Mask = x.EmployeeName;
          }
        })
      },
      //获取业务员
      getEmployee() {
        var qMsg = {
          EmployeeName: ''
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            this.AllemployeeList = res.Data;
          }
        })
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },

      //获取客户需求
      getGetNeedsList() {
        GetNeedsList().then(res => {
          if (res.Code == 1) {
            this.NeedData = res.Data;
          }
        });
      },
      getclose() {
        // 企业关闭
        this.ismember = false;
        this.outerVisible = false;
      },
      getsuccess2(list, type) {
        this.chosenUser = list;
        this.outerVisible = false;
      },
      init() {
        this.loading = true;
        getDictValue({
          Key: "PUSH_STU_STUDYABROAD"
        }).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            var tempObj = res.Data;
            if (tempObj) {
              this.dictObjEmp.ID = tempObj.ID;
              this.dictObjEmp.Content = tempObj.Content;
              if (tempObj.Content) {
                this.List = JSON.parse(tempObj.Content);
              }
            }
          }
        });
      },
      saveHandler() {
        if(this.List.length==0){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请添加数据`
          });
          return
        }
        if(this.List.length>0){
          for(let i=0;i<this.List.length;i++){
            if(this.List[i].Content==''||this.List[i].Content==null){
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: `请选择第${i+1}条留学顾问`
              });
              return
            }
            if(this.List[i].CodeList.length==0){
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: `请选择第${i+1}条客户需求`
              });
              return
            }
          }
          this.List.forEach(x => {
            x.Code = x.CodeList.toString();
          })
        }
        this.dictObjEmp.Content = JSON.stringify(this.List);
        this.saving = true;
        saveDict(this.dictObjEmp).then(r => {
          this.saving = false;
          if (r.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.init();
          } else {
            this.saving = false;
          }
        });
      }
    }
  };

</script>

<style></style>
