<style>
  .employee_Dialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #F0F5FB;
    padding: 5px 10px;
    align-items: center;
  }

  .employee_Dialog .EMP_Main {
    margin: 20px 0;
  }

  .employee_Dialog .EMPList {
    width: 65px;
    height: auto;
    display: inline-block;
    background-color: #F0F5FB;
    text-align: center;
    color: #2D2D2D;
    font-size: 12px;
    padding: 6px 0;
    margin: 0 10px 10px 0;
  }

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

  .employee_Dialog .EmpLine_title {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .employee_Dialog .drawer_Span {
    margin-left: 10px;
  }

  .employee_Dialog .emp_lingdaiDiv {
    width: 30px;
    height: 30px;
    background-color: #DADBFB;
    color: #8175FB;
    border-radius: 50%;
    text-align: center;
  }

</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top:61px;width:500px" class="no-border-radius employee_Dialog">
      <div class="drawerTop">
        <div style="display:flex;align-items:center;">
          <div class="emp_lingdaiDiv">
            <i class="iconfont icon-lingdai" style="font-size:22px;"></i>
          </div>
          <span class="drawer_Span" v-if="setingObj.type==1">离职</span>
          <span class="drawer_Span" v-if="setingObj.type==2">重置密码</span>
          <span class="drawer_Span" v-if="setingObj.type==3">调岗</span>
          <span class="drawer_Span" v-if="setingObj.type==4">调部门</span>
        </div>
      </div>
      <div style="margin:20px;">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>选中人员</div>
        </div>
        <div class="EMP_Main">
          <div class="EMPList" v-for="item in setingObj.selected">
            <q-avatar size="md" v-if="item.UserIcon">
              <img :src="item.UserIcon" />
            </q-avatar>
            <q-avatar size="md" color="teal-10" text-color="white" v-if="!item.UserIcon">
              {{GetFirst(item.EmployeeName)}}</q-avatar>
            <div style="margin-top:6px;">{{item.EmployeeName}}</div>
          </div>
        </div>
      </div>
      <!-- 离职 -->
      <div style="margin:20px;" v-if="setingObj.type==1">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>确认离职</div>
        </div>
        <q-toggle size="md" color="primary" style="margin:20px 0" v-model="LeveaMsg.LeaveStatus" :false-value="1"
          :true-value="4" />
        <div class="row">
          <div class="col-6">
            <q-input filled v-model="LeveaMsg.LeaveTime" class="col-3 q-pr-lg q-pb-lg" mask="date" label="离职时间">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                    <q-date v-model="LeveaMsg.LeaveTime" @input="() => $refs.qDateProxy1.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>
      </div>
      <!-- 修改部门 -->
      <div style="margin:20px;" v-if="setingObj.type==4">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>修改部门</div>
        </div>
        <div class="row" style="margin-top:20px;">
          <div class="col-6">
            <selectTree :treeData='DeptList' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
              labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"
              classStr="col-6 q-pr-lg q-pb-lg"></selectTree>
          </div>
        </div>
      </div>
      <!-- 修改岗位 -->
      <div style="margin:20px;" v-if="setingObj.type==3">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>修改岗位</div>
        </div>
        <div class="row" style="margin-top:20px;">
          <div class="col-6">
            <q-select filled stack-label option-value="PostId" option-label="PostName" v-model="Post_Id" ref="Post_Id"
              :options="PostList" label="岗位" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
          </div>
        </div>
      </div>
      <div style="text-align:left;margin-left:20px;">
        <q-btn color="primary" label="确定" @click="saveReuslt()" style="width:300px;" />
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  import {
    UpdateEmployeeLeave,
    UpdateEmployeeDept,
    UpdateEmployeePost
  } from '../../../api/users/user'
  import {
    getDeptTree
  } from '../../../api/system/dept.js'
  //岗位
  import {
    queryDeptPostList
  } from '../../../api/system/post'
  import selectTree from '../../../components/common/select-tree'
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    components: {
      selectTree
    },
    data() {
      return {
        persistent: true,
        saveLoading: false,
        LeveaMsg: {
          LeaveStatus: 4, //是否离职 1是 2否
          LeaveTime: '' //离职时间
        },
        returnString: [], //部门默认
        DeptList: [], // 部门下拉
        PostList: [], //岗位下拉
        departId: -2, // 部门
        Post_Id: 0 //岗位
      }
    },
    mounted() {
      if (this.setingObj.type == 4) {
        this.getDepartList();
      }
      if (this.setingObj.type == 3) {
        this.queryPostList();
      }
    },
    methods: {
      closeShenheForm() {
        this.$emit('close')
      },
      //获取部门下拉数据
      getDepartList() {
        let msg = {
          School_Id: this.setingObj.selected[0].School_Id
        }
        getDeptTree(msg).then(res => {
          if (res.Code == 1) {
            this.DeptList = res.Data;
          }
        })
      },
      //获取岗位下拉
      queryPostList() {
        var postMsg = {
          QDeptIds: this.setingObj.selected[0].Dept_Id
        };
        queryDeptPostList(postMsg).then(res => {
          if (res.Code == 1) {
            let obj = {
              PostName:'不限',
              PostId:0
            }
            this.PostList = res.Data;
            this.PostList.unshift(obj);
          }
        })
      },
      //选择部门
      getChild(deptArray) {
        if (deptArray && deptArray != '') {
          this.departId = deptArray;
        }
      },
      //保存信息
      saveReuslt() {
        if (this.setingObj.type == 1) {
          let Msg = [];
          if (this.LeveaMsg.LeaveTime == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择离职日期`
            })
            return;
          }
          if (this.setingObj.selected.length > 0) {
            this.setingObj.selected.forEach(x => {
              let obj = {
                Id: x.Id,
                AccountId: x.AccountId,
                AccountType: x.AccountType,
                LeaveStatus: this.LeveaMsg.LeaveStatus,
                LeaveTime: this.LeveaMsg.LeaveTime
              }
              Msg.push(obj);
            })
          }
          UpdateEmployeeLeave(Msg).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.$emit('close')
            }
          })
        }
        if (this.setingObj.type == 4) {
          let Msg = [];
          if (this.departId == -2) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择部门`
            })
            return;
          }
          let obj = {};
          if (this.setingObj.selected.length > 0) {
            obj.Id = this.setingObj.selected[0].Id;
            obj.AccountId = this.setingObj.selected[0].AccountId;
            obj.AccountType = this.setingObj.selected[0].AccountType;
            obj.Dept_Id = this.departId;
          }
          UpdateEmployeeDept(obj).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.$emit('close')
            }
          })
        }
        if (this.setingObj.type == 3) {
          if (this.Post_Id == 0) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择岗位`
            })
            return;
          }
          let obj = {};
          if (this.setingObj.selected.length > 0) {
            obj.Id = this.setingObj.selected[0].Id;
            obj.AccountId = this.setingObj.selected[0].AccountId;
            obj.AccountType = this.setingObj.selected[0].AccountType;
            obj.Post_Id = this.Post_Id;
          }
          UpdateEmployeePost(obj).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.$emit('close')
            }
          })
        }
      },
      GetFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      }
    },
  }

</script>

<style>

</style>
