<template>
  <div>
    <!-- 弹出框表单 -->
    <el-drawer :title="title" :visible.sync="open" :direction="direction" size="50%">
      <div class="tips">此功能为快速添加员工入口,如需为员工办理完整的入职手续,请使用[员工关系-入职管理]功能</div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <!-- <Field label="性别" prop="gender" v-model="form.gender" type="select" :enumData="dict.gender" placeholder="请选择性别"/> -->
          <!-- <Field label="出生日期" prop="birthday" v-model="form.birthday" type="date" /> -->
          <!-- <Field label="照片" prop="photoPath" v-model="form.photoPath" type="textarea" placeholder="请输入照片"/> -->
          <!-- <Field label="身份证号码" prop="idCard" v-model="form.idCard" placeholder="请输入身份证号码"/> -->
          <!-- <Field label="工号" prop="workNum" v-model="form.workNum" placeholder="请输入工号"/> -->
          <!-- <Field label="政治面貌 " prop="politicalstatus" v-model="form.politicalstatus" type="select" :enumData="dict.politicalstatus" placeholder="请选择政治面貌 "/> -->
          <!-- <Field label="所属部门名称" prop="deptName" v-model="form.deptName" placeholder="请输入所属部门名称"/> -->

          <Field
            label="员工姓名"
            :maxLength="10"
            prop="name"
            v-model="form.name"
            placeholder="请输入员工姓名"
          />

          <Field
            label="手机号码"
            :maxLength="11"
            prop="phoneNumber"
            v-model="form.phoneNumber"
            placeholder="请输入联系电话"
          />

          <!--                    <Field label="所属部门" :maxLength="10" prop="deptName" v-model="form.deptName" placeholder="请选择所属部门" @focus="ishowBumen = true"/>
          -->

          <Field
            label="所属部门"
            prop="deptId"
            v-model="form.deptId"
            :enumData="dict.deptId"
            type="select"
            placeholder="请选择所属部门"
          />

          <Field
            label="职位"
            prop="positionId"
            v-model="form.positionId"
            :enumData="dict.positionId"
            type="select"
            placeholder="请选择职位"
          />

          <Field
            label="工号"
            :maxLength="15"
            prop="workNum"
            v-model="form.workNum"
            placeholder="请输入工号"
          />

          <!-- <Field label="是否在政务大厅" prop="positionId" v-model="form.positionId" placeholder="请选择" type="select"/> -->
          <!-- <Field label="职位名称" prop="positionName" v-model="form.positionName" placeholder="请输入职位名称"/> -->
          <!-- <Field label="员工类型" prop="staffType" v-model="form.staffType" type="select" :enumData="dict.staffType" placeholder="请选择员工类型"/> -->
          <!-- <Field label="员工状态" prop="status" v-model="form.status" type="select" :enumData="dict.status" placeholder="请选择员工状态"/> -->
          <!-- <Field label="入职登记表" prop="registerPath" v-model="form.registerPath" type="textarea" placeholder="请输入入职登记表"/> -->
          <!-- <Field label="入职时间" prop="entryDate" v-model="form.entryDate" type="date" /> -->
          <!-- <Field label="转正时间" prop="regularDate" v-model="form.regularDate" type="date" /> -->
          <!-- <Field label="离职时间" prop="leaveDate" v-model="form.leaveDate" type="date" /> -->
          <!-- <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> -->
        </el-row>

        <form-buttons @submit="submitForm" noCancelBtn />
      </el-form>
    </el-drawer>
    <!-- 部门选择 -->
    <el-dialog :visible.sync="ishowBumen" width="70%">
      <el-row type="flex" :gutter="20" style="height:40vh">
        <el-col :span="12">
          <el-scrollbar style="height: 100%">
            <el-tree
              size="mini"
              ref="siteTree"
              :data="bumentree"
              id="el-tree"
              node-key="id"
              indent="4"
              :props="treeProps"
              :load="loadNode"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderContent"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="12">
          <div class="titles">已选部门</div>
          <div
            class="el-tag flex flex-pack-justify mt10"
            v-if="deptnode.label"
            style="max-width:80%"
          >
            <div>{{deptnode.label}}</div>
            <div @click="cancledept()">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="mt20">
        <el-button type="primary" size="mini" @click="comfirmbument">确定</el-button>
        <el-button size="mini" @click="ishowBumen = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import form from "@/assets/mixins/formdialog";
export default {
  name: "StaffDetail",
  mixins: [form],
  props: {
    bumentree: {
      type: Array,
      default: []
    },
    currentNode:{
        type:Object,
        default:{}
    }
  },
  components: {},
  watch: {
    open(newval) {
      if (newval) {
        console.log(newval, this.currentNode, this.form.deptId,this.dict.deptId);
        if(this.currentNode && this.currentNode.id){
            this.form.deptId = JSON.stringify(this.currentNode.id)
            this.form.deptName = this.currentNode.label
        }
        console.log(newval, this.currentNode, this.form.deptId);

      }
    }
  },
  created() {
    this.changePath("staff");
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "个人主页",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["gender", "politicalstatus", "staffType", "status"],
      toDate: ["birthday", "entryDate", "regularDate", "leaveDate"],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "请输入员工手机号码", trigger: "blur" },
          { max: 11, message: "最多只能录入11个字符", trigger: "blur" }
        ],
        deptName: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        positionId: [
          { required: true, message: "请选择职位", trigger: "blur" }
        ],
        workNum: [{ required: true, message: "请输入工号" }]
      },
      treeProps: {
        id: "id",
        label: "label",
        areaCode: "areaCode",
        type: "type",
        isLeaf: "isLeaf",
        children: "children",
        icon: "icon"
      },
      ishowBumen: false,
      deptnode: {}
    };
  },

  methods: {
    renderContent: function(h, { node, data, store }) {
      return (
        <span>
          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
        </span>
      );
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return;
      }
      resolve(data.result);
    },
    // 点击
    handleNodeClick(node) {
      this.deptnode = node;
    },
    comfirmbument() {
      this.form.deptId = this.deptnode.id;
      this.form.deptName = this.deptnode.label;
      this.ishowBumen = false;
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "staff/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改员工基本信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "staff/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增员工基本信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "staff/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "员工基本信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        name: "",
        gender: 1,
        birthday: null,
        photoPath: "",
        phoneNumber: "",
        idCard: "",
        workNum: "",
        politicalstatus: 1,
        deptId: null,
        deptName: "",
        positionId: null,
        positionName: "",
        staffType: 1,
        status: 1,
        registerPath: "",
        entryDate: null,
        regularDate: null,
        leaveDate: null,
        remark: ""
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
    cancledept() {
      this.deptnode = {};
    }
  }
};
</script>
<style scoped>
.tips {
  margin-left: 120px;
  margin-bottom: 20px;
  color: #999;
  font-size: 15px;
}
.titles {
  color: #409eff;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.titles::before {
  content: "";
  width: 6px;
  height: 16px;
  background-color: #409eff;
  display: inline-block;
  margin-right: 10px;
}
</style>