<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>
    <!--课程顾问 或有教师权限-->
    <template v-if="userInfo.IsCourseConsultant == 1||isHaveTeacherEdit">
      <q-btn label="新增" color="accent q-mb-lg" size="sm" @click="isShowAdd = true" />
    </template>
    <template v-else>
      <span class="text-grey-4">抱歉，你没有权限邀请其他服务人员</span>
    </template>
    <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>
            <template v-if="userInfo.IsCourseConsultant == 1||isHaveTeacherEdit">
              <div v-if="userInfo.IsCourseConsultant == 1&&item.AssistType != 2 && item.AssistType != 4">
                <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)" />
              </div>
              <div v-if="isHaveTeacherEdit &&item.AssistType ==4">
                <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)" />
              </div>
              <div v-if="isShowBian(item)">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改"
                  @click="getGuwenEditInfo(item)"></q-btn>
              </div>
            </template>

          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  import {
    GetAssistTypeList,
    SetStudentAssist,
    GetStudentAssistList,
    RemoveStudentAssist
  } from "../../../api/sale/sale";
  import {
    queryEmployee
  } from "../../../api/users/user";
  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: ""
    },
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      BelongType: {
        type: Number,
        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: [],
        userInfo: {}
      };
    },
    created() {
      this.userInfo = this.getLocalStorage();
      if (this.saveObj && this.saveObj.StuId) {
        this.AssitMsg.StuId = this.saveObj.StuId;
        this.msg.StuId = this.saveObj.StuId;
      }
    },
    computed: mapState({
      isHaveTeacherEdit(state) {
        if (
          state.user.userInfo &&
          state.user.userInfo.ActionMenuList &&
          state.user.userInfo.ActionMenuList.length > 0
        ) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "Query_TeacherAssist") {
              return x;
            }
          });
          if (action) {
            return true;
          }
        }
        return false;
      }
    }),
    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 (this.userInfo.IsCourseConsultant == 1 && this.isHaveTeacherEdit) {
                if (x.Id != 1) {
                  this.AssistDropList.push(x);
                }
              } else if (this.userInfo.IsCourseConsultant == 1 && !this.isHaveTeacherEdit) {
                if (x.Id != 1 && x.Id != 4) {
                  this.AssistDropList.push(x);
                }
              } else if (this.userInfo.IsCourseConsultant == 0 && this.isHaveTeacherEdit) {
                if (x.Id == 4) {
                  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(() => {});
      },
      //课程顾问是本人 显示编辑按钮
      isShowBian(item) {
        let isShow = false;
        if (item.AssistTypeName == '课程顾问') {
          if (this.userInfo.AccountName == item.AssistName) {
            isShow = true
          }
        }
        return isShow;
      },
      //删除协同
      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;
      },
      getGuwenEditInfo(obj) {
        this.getRole();
        this.AssitMsg.Id = obj.Id;
        this.AssitMsg.AssistId = obj.AssistId;
        this.AssitMsg.AssistType = obj.AssistType;
        this.isShowAdd = true;
      }
    }
  };
</script>