<style>
  .delAssist {
    position: absolute;
    right: -16px;
    top: -12px;
    display: inline-block;
    background: red;
    border-radius: 50%;
    color: #FFF;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }

  .studentAssitTable {
    width: 100%;
    text-align: center;
  }

  .studentAssitTable td {
    height: 40px;
    line-height: 40px;
    border: 1px solid #f2f2f2;
  }

  .studentAssitTable th {
    height: 40px;
    background-color: #f2f2f2;
  }

</style>
<template>
  <div>
    <q-btn label="新增" color="accent q-mb-lg" size="sm" @click="isShowAdd=true" />
    <q-btn label="取消" style="margin-left:20px;" v-if="isShowAdd" flat color="grey-10 q-mb-lg" size="sm"
      @click="isShowAdd=false" />
    <template v-if="isShowAdd">
      <div class="row wrap">
        <q-select filled stack-label option-label="Name" @input="getRole" v-model="AssitMsg.AssistType" option-value="Id"
          :options="AssistDropList" label="角色" dense class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
        <q-select filled dense v-if="AssitMsg.AssistType==2" v-model="AssitMsg.AssistId" :options="RoleListData"
          option-label="EmployeeName" class="col-6 q-pb-lg" option-value="Id" emit-value map-options />
        <q-select filled dense v-else v-model="AssitMsg.AssistId" @filter="filterEmployee" use-input :options="myEmployeeList"
          option-label="EmployeeName" class="col-6 q-pb-lg" option-value="Id" emit-value map-options />

        <i class="iconfont icon-close delAssist"></i>
      </div>
      <div class="row wrap" style="margin-bottom:10px;float:right;">
        <q-btn label="保存" color="accent q-mb-lg" size="md" @click="saveAssit()" />
      </div>
    </template>
    <div v-if="dataList.length>0">
      <table class="studentAssitTable" style="border:1px solid #f2f2f2;border-collapse:collapse;" cellspacing="0"
        cellpadding="0">
        <tr>
          <th style="width:180px;">角色</th>
          <th style="width:180px;">人员</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>{{item.AssistTypeName}}</td>
          <td>{{item.AssistName}}</td>
          <td>
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改"
              @click="getEditInfo(item)"></q-btn>
            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
              @click="deleteAssits(item.Id)" />
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  import {
    GetAssistTypeList,
    SetStudentAssist,
    GetStudentAssistList,
    RemoveStudentAssist
  } from '../../../api/sale/sale'
  import {
    queryEmployee
  } from '../../../api/users/user'

  export default {
    meta: {
      title: ""
    },
    components: {

    },
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        AssitMsg: {
          StuId: 1, //学员编号
          Id: 0, //编号
          AssistId: '', //员工编号
          AssistType: '' //类型
        },
        msg: {
          StuId: 1
        },
        isShowEdit: false,
        dataList: [],
        page_Count: 0,
        AssistDropList: [], //下拉数据
        RoleListData:[], //课程顾问下拉数据
        employeeList: [],
        myEmployeeList: [],
      }
    },
    created() {
      if (this.saveObj && this.saveObj.StuId) {
        this.AssitMsg.StuId = this.saveObj.StuId;
        this.msg.StuId = this.saveObj.StuId;
      }
    },
    mounted() {
      this.getList();
      this.GetAssistTypeList();
      this.getEmployeeList();
    },
    methods: {
      //获取协助人员
      GetAssistTypeList() {
        this.AssistDropList = [];
        GetAssistTypeList({}).then(res => {
          if (res.Code == 1) {
            let template = res.Data;
            template.forEach(x=>{
              if(x.Id!=1){
                this.AssistDropList.push(x);
              }
            })
          }
        })
      },
      //获取员工列表
      getEmployeeList() {
        queryEmployee({
          IsLeave: 1,
          UserRole: 0
        }).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        })
      },
      //切换课程顾问
      getRole() {
        queryEmployee({
          IsLeave: 1,
          UserRole: 2
        }).then(res => {
          this.RoleListData = res.Data;
        })
      },

      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //保存协同人员
      saveAssit() {
        SetStudentAssist(this.AssitMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.getList();
            this.isShowAdd = false;
            this.clearMsg();
          }
        }).catch(() => {

        })
      },
      clearMsg() {
        this.AssitMsg.Id = 0;
        this.AssitMsg.AssistId = 1;
        this.AssitMsg.AssistType = 1;
      },
      //获取数据
      getList() {
        GetStudentAssistList(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        }).catch(() => {

        })
      },
      //删除协同
      deleteAssits(Id) {
        let that = this
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          RemoveStudentAssist({
            Id: Id
          }).then((res) => {
            that.$q.notify({
              icon: 'iconfont icon-chenggong',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            that.getList()
          })
        }).onCancel(() => {});
      },
      //获取修改数据
      getEditInfo(obj) {
        this.AssitMsg.Id = obj.Id;
        this.AssitMsg.AssistId = obj.AssistId;
        this.AssitMsg.AssistType = obj.AssistType;
        this.isShowAdd=true;
      }
    }
  }

</script>
