<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 ||
          isHaveXueManager
      ">
      <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="changeData" v-model="AssitMsg.AssistType"
          option-value="Id" :options="AssistDropList" label="角色" dense use-input 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 use-input map-options />
        <q-select filled dense v-else-if="AssitMsg.AssistType == 4" v-model="AssitMsg.AssistId" :options="TeacherList"
          option-label="EmployeeName" class="col-6 q-pb-lg" option-value="Id" emit-value use-input 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 ||
                  isHaveXueManager
              ">
              <div v-if="
                  userInfo.IsCourseConsultant == 1 &&
                    (item.AssistType == 2 || item.AssistType == 3 || item.AssistType == 5)
                ">
                <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>
            </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: [], //课程顾问下拉数据
        TeacherList: [], //教师列表
        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();
    },
    methods: {
      //获取协助人员
      GetAssistTypeList() {
        this.AssistDropList = [];
        GetAssistTypeList({}).then(res => {
          if (res.Code == 1) {
            let tempData = res.Data;
            if (this.userInfo.IsCourseConsultant == 1) {
              tempData.forEach(x => {
                if (x.Id == 2 || x.Id == 3 || x.Id == 5) {
                  this.AssistDropList.push(x);
                }
                if (x.Id == 4) {
                  if (this.isHaveTeacherEdit) {
                    this.AssistDropList.push(x);
                  }
                }
              });
            } else {
              tempData.forEach(x => {
                if (this.isHaveTeacherEdit) {
                  if (x.Id == 4) {
                    this.AssistDropList.push(x);
                  }
                }
              });
            }
          }
        });
      },
      changeData() {
        var queryObj = {
          IsLeave: 1,
          UserRole: 0,
          AccountTypeStr: ""
        };
        if (this.AssitMsg.AssistType == 2) {
          queryObj.UserRole = 2;
          queryEmployee(queryObj).then(res => {
            this.RoleListData = res.Data;
          });
        }
        if (this.AssitMsg.AssistType == 4) {
          queryObj.AccountTypeStr = "2";
          queryEmployee(queryObj).then(res => {
            this.TeacherList = res.Data;
          });
        } else {
          queryObj.UserRole = 0;
          queryEmployee(queryObj).then(res => {
            this.employeeList = res.Data;
            this.myEmployeeList = 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.$emit("success");
              this.getList();
              this.isShowAdd = false;
              this.clearMsg();
            }
          })
          .catch(() => {});
      },
      clearMsg() {
        this.AssitMsg.Id = 0;
        this.AssitMsg.AssistId = 0;
        this.AssitMsg.AssistType = 0;
      },
      //获取数据
      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;
        this.changeData();
      },
      getGuwenEditInfo(obj) {
        this.getRole();
        this.AssitMsg.Id = obj.Id;
        this.AssitMsg.AssistId = obj.AssistId;
        this.AssitMsg.AssistType = obj.AssistType;
        this.isShowAdd = true;
      }
    }
  };
</script>