<template>
    <transition name="el-zoom-in-center">
        <div class="JNPF-preview-main user-form">
            <div class="JNPF-common-page-header">
                <el-page-header @back="goBack" :content="!dataForm.id ?'新建' : '编辑'" />
                <div class="options">
                    <el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
                        {{$t('common.confirmButton')}}</el-button>
                    <el-button @click="goBack">{{$t('common.cancelButton')}} </el-button>
                </div>
            </div>
            <div class="main" v-loading="formLoading">
                <el-alert :title="getDefaultPassword" type="warning" show-icon :closable="false" />
                <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px">
                    <div class="JNPF-common-title mb-20">
                        <h2 class="bold">账户信息 </h2>
                    </div>
                    <el-row :gutter="20" class="custom-row">
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="账户" prop="account">
                                <el-input v-model="dataForm.account" placeholder="账户名称"
                                    :readonly="!!dataForm.id" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="姓名" prop="realName">
                                <el-input v-model="dataForm.realName" placeholder="真实姓名" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="性别" prop="gender">
                                <el-select v-model="dataForm.gender" placeholder="选择性别">
                                    <el-option v-for="item in genderTreeData" :key="item.enCode"
                                        :label="item.fullName" :value="item.enCode" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="手机号码" prop="mobilePhone">
                                <el-input v-model="dataForm.mobilePhone" placeholder="手机号码" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="是否同步ITSM账号" prop="itsmUser">
                                <el-radio-group v-model="dataForm.itsmUser">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="电子邮箱" prop="email">
                                <el-input v-model="dataForm.email" placeholder="电子邮箱" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="所属组织" prop="organizeIdTree">
                                <JnpfOrganizeSelect v-model="dataForm.organizeIdTree"
                                    placeholder="选择所属组织" multiple @change="onOrganizeChange"
                                    clearable auth />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="直属主管" prop="managerId">
                                <JnpfUserSelect v-model="dataForm.managerId" placeholder="选择直属主管" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="岗位" prop="positionId">
                                <el-select v-model="positionId" placeholder="选择岗位"
                                    @change="onChange('positionId')" @visible-change="visibleChange"
                                    multiple filterable clearable>
                                    <el-option-group v-for="group in positionTreeData"
                                        :key="group.id"
                                        :label="group.fullName+(group.num?'【'+group.num+'】':'')">
                                        <el-option v-for="item in group.children"
                                            :key="group.id+item.id" :label="item.fullName"
                                            :value="item.id">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="职级" prop="ranks">
                                <el-select v-model="dataForm.ranks" placeholder="选择职级">
                                    <el-option v-for="item in ranksList" :key="item.enCode"
                                        :label="item.fullName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="角色" prop="roleId">
                                <el-select v-model="roleId" placeholder="选择角色"
                                    @change="onChange('roleId')" @visible-change="visibleChange"
                                    multiple filterable clearable>
                                    <el-option-group v-for="group in roleTreeData" :key="group.id"
                                        :label="group.fullName+(group.num?'【'+group.num+'】':'')">
                                        <el-option v-for="item in group.children"
                                            :key="group.id+item.id" :label="item.fullName"
                                            :value="item.id">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="排序" prop="sortCode">
                                <el-input-number :min="0" :max="999999" v-model="dataForm.sortCode"
                                    controls-position="right" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="enabledMark">
                                <el-select v-model="dataForm.enabledMark" placeholder="选择状态">
                                    <el-option label="启用" :value="1" />
                                    <el-option label="锁定" :value="2" />
                                    <el-option label="禁用" :value="0" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="说明" prop="description">
                                <el-input v-model="dataForm.description" type="textarea"
                                    :rows="3" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="JNPF-common-title mb-20">
                        <h2 class="bold">个人资料</h2>
                    </div>
                    <el-row :gutter="20" class="custom-row">
                        <el-col :span="24">
                            <el-form-item label="头像" prop="headIcon">
                                <el-upload class="avatar-uploader" :headers="uploadHeaders"
                                    :action="define.comUploadUrl+'/userAvatar'"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    accept="image/*">
                                    <img v-if="dataForm.headIcon"
                                        :src="define.comUrl+dataForm.headIcon" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="民族" prop="nation">
                                <el-select v-model="dataForm.nation" placeholder="选择民族" filterable>
                                    <el-option v-for="item in nationTreeData" :key="item.id"
                                        :label="item.fullName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="籍贯" prop="nativePlace">
                                <el-input v-model="dataForm.nativePlace" placeholder="籍贯" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="证件类型" prop="certificatesType">
                                <el-select v-model="dataForm.certificatesType" placeholder="选择证件类型"
                                    filterable>
                                    <el-option v-for="item in certificatesTypeTreeData"
                                        :key="item.id" :label="item.fullName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="入职时间" prop="entryDate">
                                <el-date-picker v-model="dataForm.entryDate" type="date"
                                    placeholder="选择入职时间" value-format="timestamp">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="证件号码" prop="certificatesNumber">
                                <el-input v-model="dataForm.certificatesNumber"
                                    placeholder="证件号码" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="文化程度" prop="education">
                                <el-select v-model="dataForm.education" placeholder="选择文化程度">
                                    <el-option v-for="item in educationTreeData" :key="item.id"
                                        :label="item.fullName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="出生年月" prop="birthday">
                                <el-date-picker v-model="dataForm.birthday" type="date"
                                    placeholder="选择出生年月" value-format="timestamp">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="办公电话" prop="telePhone">
                                <el-input v-model="dataForm.telePhone" placeholder="办公电话" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="办公座机" prop="landline">
                                <el-input v-model="dataForm.landline" placeholder="办公座机" />
                            </el-form-item>
                        </el-col>

                        <el-col :sm="12" :xs="24">
                            <el-form-item label="紧急联系" prop="urgentContacts">
                                <el-input v-model="dataForm.urgentContacts" placeholder="紧急联系人" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <el-form-item label="紧急电话" prop="urgentTelePhone">
                                <el-input v-model="dataForm.urgentTelePhone"
                                    placeholder="紧急联系人电话" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="通讯地址" prop="postalAddress">
                                <el-input v-model="dataForm.postalAddress" type="textarea"
                                    :rows="3" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </transition>
</template>

<script>
import { getPositionByOrganize } from '@/api/permission/position'
import { getRoleByOrganize } from '@/api/permission/role'
import { getGroupSelector } from '@/api/permission/group'
import { createUser, updateUser, getUserInfo } from '@/api/permission/user'
import store from '@/store'
export default {
    data() {
        return {
            visible: false,
            btnLoading: false,
            dataForm: {
                id: '',
                sortCode: 0,
                enabledMark: 1,
                account: '',
                realName: '',
                organizeId: '',
                organizeIdTree: [],
                managerId: '',
                positionId: '',
                roleId: '',
                groupId: '',
                description: '',
                headIcon: '',
                gender: null,
                nation: '',
                nativePlace: '',
                entryDate: null,
                certificatesType: '',
                certificatesNumber: '',
                education: '',
                birthday: null,
                telePhone: '',
                landline: '',
                mobilePhone: '',
                email: '',
                urgentContacts: '',
                urgentTelePhone: '',
                postalAddress: '',
                ranks: '',
                itsmUser: false
            },
            ranksList: [],
            roleId: [],
            groupId: [],
            positionId: [],
            positionTreeData: [],
            roleTreeData: [],
            groupTreeData: [],
            genderTreeData: [],
            nationTreeData: [],
            educationTreeData: [],
            certificatesTypeTreeData: [],
            uploadHeaders: { Authorization: this.$store.getters.token },
            formLoading: false,
            genderProps: {
                value: 'enCode',
                label: 'fullName'
            },
            dataRule: {
                account: [
                    { required: true, message: '请输入账户', trigger: 'blur' },
                    { validator: this.formValidate('fullName', '账户不能含有特殊符号'), trigger: 'blur' },
                    { max: 50, message: '账户最多为50个字符！', trigger: 'blur' }
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { validator: this.formValidate('fullName', '真实姓名不能含有特殊符号'), trigger: 'blur' },
                    { max: 50, message: '真实姓名最多为50个字符！', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                mobilePhone: [
                    { required: true, message: '请输入手机号码', trigger: 'change' }
                ],
                organizeIdTree: [
                    { required: true, message: '请选择所属组织', trigger: 'click', type: 'array' }
                ]
            }
        }
    },
    computed: {
        sysConfig() {
            return store.getters && store.getters.sysConfig
        },
        getDefaultPassword() {
            return '新用户默认初始密码是' + (this.sysConfig.newUserDefaultPassword || '0000')
        }
    },
    methods: {
        init(id, organizeIdTree) {
            this.visible = true
            this.dataForm.id = id || ''
            this.roleId = []
            this.groupId = []
            this.positionId = []
            this.positionTreeData = []
            this.roleTreeData = []
            this.dataForm.organizeIdTree = []
            this.$nextTick(() => {
                this.formLoading = true
                this.$refs['dataForm'].resetFields()
                // 获取分组下拉列表
                getGroupSelector().then(res => {
                    this.groupTreeData = res.data
                })
                // 获取民族
                this.$store.dispatch('base/getDictionaryData', { sort: 'Nation' }).then(res => {
                    this.nationTreeData = res
                    // 获取学历
                    this.$store.dispatch('base/getDictionaryData', { sort: 'Education' }).then(res => {
                        this.educationTreeData = res
                    })
                    // 获取证件类型
                    this.$store.dispatch('base/getDictionaryData', { sort: 'certificateType' }).then(res => {
                        this.certificatesTypeTreeData = res
                    })
                    // 获取性别
                    this.$store.dispatch('base/getDictionaryData', { sort: 'sex' }).then(res => {
                        this.genderTreeData = res
                    })
                    //获取职级
                    this.$store.dispatch('base/getDictionaryData', { sort: 'Rank' }).then(res => {
                        this.ranksList = res
                    })
                })
                if (this.dataForm.id) {
                    getUserInfo(this.dataForm.id).then(res => {
                        this.dataForm = res.data
                        if (this.dataForm.roleId) this.roleId = this.dataForm.roleId.split(',')
                        if (this.dataForm.groupId) this.groupId = this.dataForm.groupId.split(',')
                        if (this.dataForm.positionId) this.positionId = this.dataForm.positionId.split(',')
                        if (this.dataForm.organizeIdTree && this.dataForm.organizeIdTree.length) {
                            this.getOptionsByOrgIds(this.dataForm.organizeIdTree)
                        }
                        this.formLoading = false
                    }).catch(() => this.formLoading = false)
                } else {
                    this.dataForm.organizeIdTree = organizeIdTree.length ? [organizeIdTree] : []
                    if (this.dataForm.organizeIdTree && this.dataForm.organizeIdTree.length) {
                        this.getOptionsByOrgIds(this.dataForm.organizeIdTree)
                    }
                    this.formLoading = false
                }
            })
        },
        goBack() {
            this.$emit('close')
        },
        onChange(key) {
            this.dataForm[key] = this[key].join()
        },
        onOrganizeChange(val) {
            this.dataForm.positionId = ''
            this.dataForm.roleId = ''
            this.dataForm.organizeId = ''
            this.positionId = []
            this.roleId = []
            if (!val || !val.length) return
            this.getOptionsByOrgIds(val)
        },
        getOptionsByOrgIds(organizeIdTree) {
            const organizeIds = organizeIdTree.map(o => o[o.length - 1])
            this.dataForm.organizeId = organizeIds.join()
            getPositionByOrganize(organizeIds).then(res => {
                this.positionTreeData = res.data.list.filter(o => o.children && Array.isArray(o.children) && o.children.length)
            })
            getRoleByOrganize(organizeIds).then(res => {
                this.roleTreeData = res.data.list.filter(o => o.children && Array.isArray(o.children) && o.children.length)
            })
        },
        visibleChange(val) {
            if (!val) return
            if (!this.dataForm.organizeIdTree || !this.dataForm.organizeIdTree.length) this.$message.warning('请先选择所属组织')
        },
        handleAvatarSuccess(res) {
            if (res.code === 200 && res.data && res.data.url) {
                this.dataForm.headIcon = res.data.url
            } else {
                this.$message.error('头像上传失败');
            }
        },
        handleConfirm() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    const formMethod = this.dataForm.id ? updateUser : createUser
                    formMethod(this.dataForm).then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.btnLoading = false
                                this.$emit('close', true)
                            }
                        })
                    }).catch(() => {
                        this.btnLoading = false
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.user-form {
    .main {
        padding: 10px 30px 0;
    }
    >>> .el-select,
    >>> .el-cascader,
    >>> .el-date-editor {
        width: 100%;
    }
    >>> .avatar-uploader {
        .el-upload {
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409eff;
        }
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 130px;
        height: 130px;
        line-height: 130px;
        text-align: center;
    }
    .avatar {
        width: 130px;
        height: 130px;
        display: block;
    }
}
</style>
