<template>
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">
          {{ objOption.AccountId == 0 ? "新增员工信息" : "修改员工信息" }}
        </div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-md q-px-xs text-grey-6">基本资料</div>
        <div class="row wrap">
          <q-select
            filled
            v-if="isEditShow"
            stack-label
            option-value="SId"
            option-label="SName"
            v-model="objOption.School_Id"
            ref="School_Id"
            :options="schoolList"
            label="所属校区"
            class="col-6 q-pb-lg q-pr-lg"
            emit-value
            map-options
            @input="schoolChagne"
          />
          <selectTree
            :treeData="DeptList"
            v-if="isEditShow"
            :defaultArray="returnString"
            nodeKey="DeptId"
            :multiple="false"
            labelKey="DeptName"
            childrenKey="ChildList"
            tipText="选择部门"
            @getChild="getChild"
            classStr="col-6 q-pr-lg q-pb-lg"
          ></selectTree>
          <q-select
            filled
            stack-label
            v-if="isEditShow"
            option-value="PostId"
            option-label="PostName"
            v-model="objOption.Post_Id"
            ref="Post_Id"
            :options="PostList"
            label="岗位"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <q-input
            filled
            stack-label
            maxlength="20"
            :dense="false"
            v-model="objOption.EmployeeName"
            ref="EmployeeName"
            class="col-6 q-pr-lg q-pb-lg"
            label="员工姓名"
            :rules="[val => !!val || '请填写员工姓名']"
          />

          <q-input
            filled
            stack-label
            maxlength="20"
            :dense="false"
            v-model="objOption.IDCard"
            ref="IDCard"
            class="col-6 q-pr-lg q-pb-lg"
            label="身份证号码"
            :rules="[val => !!val || '请填写身份证号码']"
          />

          <q-select
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            ref="ID"
            v-model="objOption.Sex"
            :options="SexList"
            label="性别"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />

          <q-select
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            v-model="objOption.Education"
            ref="Education"
            :options="EducationList"
            label="学历"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <q-input
            type="tel"
            filled
            stack-label
            maxlength="100"
            :dense="false"
            v-model="objOption.EmployeeTel"
            ref="EmployeeTel"
            class="col-6 q-pr-lg q-pb-lg"
            label="联系电话"
          />
          <q-input
            filled
            v-model="objOption.EntryTime"
            class="col-6 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="objOption.EntryTime"
                    @input="() => $refs.qDateProxy1.hide()"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-input
            filled
            v-model="objOption.BirthDate"
            class="col-6 q-pr-lg q-pb-lg"
            mask="date"
            label="生日"
          >
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy
                  ref="qDateProxy3"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date
                    v-model="objOption.BirthDate"
                    @input="() => $refs.qDateProxy3.hide()"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-input
            filled
            stack-label
            maxlength="100"
            :dense="false"
            v-model="objOption.Address"
            ref="Address"
            class="col-6 q-pr-lg q-pb-lg"
            label="地址"
          />
          <q-input
            filled
            stack-label
            maxlength="60"
            :dense="false"
            v-model="objOption.Email"
            ref="Email"
            class="col-6 q-pr-lg q-pb-lg"
            label="邮箱"
          />
          <q-input
            filled
            stack-label
            maxlength="20"
            :dense="false"
            v-model="objOption.Account"
            ref="Account"
            class="col-6 q-pr-lg q-pb-lg"
            label="账号"
            :rules="[val => !!val || '账号']"
          />
          <q-input
            v-if="objOption.AccountId == 0"
            filled
            stack-label
            maxlength="20"
            :dense="false"
            v-model="objOption.Password"
            ref="Password"
            class="col-6 q-pr-lg q-pb-lg"
            label="密码"
            :rules="[val => !!val || '密码']"
          />
          <q-select
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            v-model="objOption.LeaveStatus"
            @input="getLeave"
            ref="Education"
            :options="LeaveStatusList"
            label="在职状态"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <q-input
            v-show="objOption.AccountId > 0 && objOption.LeaveStatus == 4"
            filled
            v-model="objOption.LeaveTime"
            class="col-6 q-pr-lg q-pb-lg"
            mask="date"
            label="离职时间"
          >
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy
                  ref="qDateProxy2"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date
                    v-model="objOption.LeaveTime"
                    @input="() => $refs.qDateProxy2.hide()"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-select
            filled
            stack-label
            :disable="objOption.AccountId == 0 ? false : true"
            option-value="Id"
            option-label="Value"
            ref="ID"
            v-model="objOption.AccountType"
            :options="AccountTypeList"
            label="用户类型"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <q-select
            filled
            stack-label
            option-value="Id"
            option-label="EmployeeName"
            ref="ID"
            v-model="objOption.DirectSupervisor"
            :options="EmployeeList"
            label="直属上级"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <q-select
            filled
            stack-label
            option-value="Id"
            option-label="Name"
            ref="UserRole"
            clearable
            v-model="objOption.UserRole"
            :options="roleList"
            label="用户角色"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
          />
          <div class="col-6 q-pb-lg">
            <q-toggle
              label="人工客服"
              v-model="objOption.IsTenCccUser"
              :true-value="1"
              :false-value="0"
            ></q-toggle>
          </div>
          <div class="col-6 q-pb-lg" style="margin-top:20px;">
            <q-uploader
              style="display: inline-block;max-height: 320px;max-width: 100%; background-repeat:no-repeat"
              :style="{ 'background-image': 'url(' + objOption.UserIcon + ')' }"
              max-files="1"
              hide-upload-btn
              @rejected="onRejected"
              label="头像"
              accept=".jpg, image/*"
              auto-upload
              :factory="uploadFile"
              no-thumbnails
            >
            </q-uploader>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight:400 !important"
          @click="closeSaveForm"
        />
        <q-btn
          label="立即提交"
          color="accent"
          class="q-px-md"
          style="font-weight:400 !important"
          :loading="saveLoading"
          @click="setStudent"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
import {
  getSchoolDropdown,
  saveManager,
  queryEmployeeInfo,
  getEducation,
  GetLeaveStatus,
  getUserLeaveOrderCommission
} from "../../../api/school/index";
//部门
import { getDeptTree } from "../../../api/system/dept";
//岗位
import { queryDeptPostList } from "../../../api/system/post";
import { UploadSelfFile } from "../../../api/common/common";
import selectTree from "../../common/select-tree";
import {
  queryEmployee, //员工列表
  GetUserRoleList
} from "../../../api/users/user";
export default {
  components: {},
  props: {
    saveObj: {
      type: Object,
      default: null
    }
  },
  components: {
    selectTree
  },
  data() {
    return {
      persistent: true,
      objOption: {
        Id: 0, //管理者编号
        School_Id: 0, //学校编号
        EmployeeName: "", //管理者姓名
        EmployeeTel: "", //管理者电话
        UserIcon: "", //头像
        Dept_Id: 0, //部门编号
        Post_Id: 0, //岗位编号
        IDCard: "", //身份证
        Sex: 0, //性别(0-男,1-女)
        Education: 0, //学历
        EntryTime: "", //入职时间
        LeaveTime: "", //离职时间
        BirthDate: "", //生日、
        Address: "", //地址
        LeaveStatus: 0, //在职状态
        Account: "", //账号
        Password: "", //密码
        AccountType: 1, // 是否是老师
        AccountId: 0, //账号对应的表主键编号
        Email: "", //邮箱
        DirectSupervisor: 0, //直属上级
        UserRole: "", //用户角色(1-市场人员，2-课程顾问)
        IsTenCccUser: 0 //电话客服
      },
      optionTitle: "",
      schoolList: [],
      saveLoading: false,
      DeptList: [], //部门列表
      PostList: [], //岗位列表
      returnString: [], //默认岗位
      SexList: [
        {
          //性别
          Id: 0,
          Name: "男"
        },
        {
          Id: 1,
          Name: "女"
        }
      ],
      roleList: [],
      EducationList: [], //学历数组
      LeaveStatusList: [], //在职状态
      isEditShow: false, //是否显示修改应该隐藏
      //账号类型
      AccountTypeList: [
        {
          Id: 1,
          Value: "后台用户"
        },
        {
          Id: 2,
          Value: "教师"
        },
        {
          Id: 3,
          Value: "助教"
        }
      ],
      EmployeeList: [], //员工列表
      errdata: "" //提示语言
    };
  },
  created() {
    this.queryDeptTree(0);
    this.queryPostList(0);
    this.getSchool();
    this.getEducationList();
    this.getLeaveState();
    this.Employee();
    this.getRoleList();
  },
  mounted() {
    this.initObj();
  },
  methods: {
    getRoleList() {
      GetUserRoleList().then(res => {
        if (res.Code == 1) {
          this.roleList = res.Data;
        }
      });
    },
    Employee() {
      var qMsg = {
        EmployeeName: ""
      };
      queryEmployee(qMsg)
        .then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            var obj = {
              EmployeeName: "请选择",
              Id: 0
            };
            this.EmployeeList.unshift(obj);
          }
        })
        .catch(() => {});
    },
    //学校改变
    schoolChagne() {
      this.objOption.Dept_Id = 0;
      this.returnString = [0];
      this.objOption.Post_Id = 0;
      this.PostList = [];
      this.queryDeptTree();
    },

    //部门改变
    deptChange() {
      this.objOption.Post_Id = 0;
      this.PostList = [];
    },
    getChild(deptArray) {
      var tempStr = "";
      if (deptArray && deptArray != "") {
        tempStr = deptArray;
      }
      this.objOption.Dept_Id = tempStr;
      if (this.saveObj) {
        if (this.objOption.Dept_Id != this.saveObj.Dept_Id) {
          this.deptChange();
          this.queryPostList();
        }
      } else {
        this.deptChange();
        this.queryPostList();
      }
    },
    //获取部门结构树
    queryDeptTree() {
      var msg = {
        School_Id: 0
      };
      if (this.objOption.School_Id && this.objOption.School_Id != "") {
        msg.School_Id = this.objOption.School_Id;
      }
      getDeptTree(msg).then(res => {
        if (res.Code == 1) {
          this.DeptList = res.Data;
        }
      });
    },
    //获取岗位列表
    queryPostList() {
      var postMsg = {
        QDeptIds: ""
      };
      if (this.objOption.Dept_Id) {
        postMsg.QDeptIds = this.objOption.Dept_Id;
      }
      queryDeptPostList(postMsg).then(res => {
        if (res.Code == 1) {
          this.PostList = res.Data;
          this.$forceUpdate();
        }
      });
    },
    GetUserLeave(UserId) {
      getUserLeaveOrderCommission({ UserId: UserId })
        .then(res => {
          if (res.Code == 1) {
            this.errdata = "";
          }
        })
        .catch(err => {
          if (err.Code == 0) {
            ///返回来是0 的时候保存提示语言
            this.errdata = err.Message;
          }
        });
    },
    getLeave(val) {
      if (val == 4) {
        this.GetUserLeave(this.saveObj.EmAccountId);
      }
    },
    initObj() {
      if (this.saveObj) {
        this.optionTitle = "修改员工信息";
        this.isEditShow = false; //是否显示修改隐藏项
        queryEmployeeInfo({
          Id: this.saveObj.Id,
          AccountId: this.saveObj.AccountId,
          AccountType: this.saveObj.AccountType
        }).then(res => {
          this.objOption.Id = res.Data.Id;
          this.objOption.School_Id = res.Data.School_Id;
          this.objOption.EmployeeName = res.Data.EmployeeName;
          this.objOption.EmployeeTel = res.Data.EmployeeTel;
          this.objOption.UserIcon = res.Data.UserIcon;
          this.objOption.Post_Id = res.Data.Post_Id;
          this.objOption.Dept_Id = res.Data.Dept_Id;
          this.objOption.IDCard = res.Data.IDCard;
          this.objOption.Sex = res.Data.Sex;
          this.objOption.Education = res.Data.Education;
          this.objOption.EntryTime = res.Data.EntryTime;
          this.objOption.LeaveTime = res.Data.LeaveTime;
          this.objOption.BirthDate = res.Data.BirthDate;
          this.objOption.Address = res.Data.Address;
          this.objOption.LeaveStatus = res.Data.LeaveStatus;
          this.objOption.Account = res.Data.Account;
          this.objOption.AccountType = res.Data.AccountType;
          this.objOption.AccountId = res.Data.AccountId;
          this.objOption.Email = res.Data.Email;
          this.objOption.DirectSupervisor = res.Data.DirectSupervisor;
          this.objOption.UserRole = res.Data.UserRole;
          this.objOption.IsTenCccUser = res.Data.IsTenCccUser;
          if (this.objOption.School_Id) {
            this.queryDeptTree();
          }
          if (this.objOption.Dept_Id) {
            this.queryPostList();
            this.returnString.push(this.objOption.Dept_Id.toString());
          }
          this.$forceUpdate();
        });
      } else {
        this.optionTitle = "新增员工";
        this.isEditShow = true;
      }
    },
    getSchool() {
      getSchoolDropdown({}).then(res => {
        this.schoolList = res.Data;
        var obj = {
          SName: "全部",
          SId: 0
        };
        this.schoolList.unshift(obj);
        this.$forceUpdate();
      });
    },
    onRejected(rejectedEntries) {
      this.$q.notify({
        type: "negative",
        position: "top",
        message: `文件验证失败，请重新上传`
      });
    },
    uploadFile(files) {
      UploadSelfFile("studentIcon", files[0], res => {
        if (res.Code == 1) {
          this.objOption.UserIcon = res.FileUrl;
        }
      });
    },
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    setStudent() {
      if (this.objOption.AccountId == 0) {
        if (this.objOption.Dept_Id == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择部门`
          });
          return;
        }
        if (this.objOption.Post_Id == 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择岗位`
          });
          return;
        }
        if (this.objOption.Password == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请填写密码`
          });
          return;
        }
      }
      if (this.objOption.EmployeeName == "") {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请填写员工姓名`
        });
        return;
      }
      if (this.objOption.Account == "") {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请填写账号`
        });
        return;
      }
      if (this.objOption.IsTenCccUser == 1) {
        if (this.objOption.Email == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `电话客服必须填入正确的邮箱，否则无法保存`
          });
          return;
        }
        if (this.objOption.EmployeeTel == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `电话客服必须填入正确的使用电话，否则会造成无法正常使用`
          });
          return;
        }
      }
      if (
        this.saveObj &&
        this.saveObj.PropertyNumber &&
        this.saveObj.PropertyNumber > 0 &&
        this.objOption.LeaveStatus === 4
      ) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `有正在使用的资产，不能设置离职`
        });
        return;
      }
      if (this.objOption.LeaveStatus == 4 && this.errdata != "") {
        //选择离职的时候看接口返回是否可以离职

        this.$q.notify({
          type: "negative",
          position: "top",
          message: this.errdata
        });
        return;
      }

      this.saveLoading = true;
      saveManager(this.objOption)
        .then(res => {
          this.saveLoading = false;
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "数据保存成功！",
            position: "top"
          });
          this.$emit("success");
          this.closeSaveForm();
        })
        .catch(() => {
          this.saveLoading = false;
        });
    },
    //获取学历数据
    getEducationList() {
      getEducation({}).then(res => {
        if (res.Code == 1) {
          this.EducationList = res.Data;
        }
      });
    },
    //获取在职状态
    getLeaveState() {
      GetLeaveStatus({}).then(res => {
        if (res.Code == 1) {
          this.LeaveStatusList = res.Data;
        }
      });
    }
  },
  watch: {}
};
</script>

<style>
.upload-assiatant-box .q-uploader__list {
  display: none;
}

.upload-assiatant-box .q-uploader {
  width: auto;
}
</style>
