<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="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:[]
            }
        },
        components: {

        },
        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>