<template>
    <el-dialog title="编辑人员" :visible.sync="show" destroy-on-close :before-close="onClose">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item class="my-input" label="姓名" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="form.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="my-input" label="联系方式" prop="phone_num">
                <el-input type="number" v-model="form.phone_num"></el-input>
            </el-form-item>
            <el-form-item label="检查职务" prop="position">
                <el-radio-group v-model="form.position">
                    <el-radio label="">无</el-radio>
                    <el-radio label="1">主办人员</el-radio>
                    <el-radio label="2">协办人员</el-radio>
                    <el-radio label="3">主/协</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属机构:" prop="enforceOrgs">
                <el-cascader
                    :options="orgOptions"
                    class="user-cascader"
                    v-model="form.enforceOrgs"
                    :props="orgProps"
                    :show-all-levels="false"
                    clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item label="角色配置">
                <el-select class="my-select" :automatic-dropdown="false" v-model="chooseRoleName" @focus="showChooseRole=true"></el-select>
                <!-- <el-input class="my-input" v-model="chooseRoleName" suffix-icon="el-icon-arrow-down" readonly @focus="showChooseRole=true"></el-input> -->
            </el-form-item>
            <el-form-item>
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" :loading="uploading" @click="onSubmit">确定</el-button>
            </el-form-item>
        </el-form>

        <choose-role :show.sync="showChooseRole" @confirm="onConfirmChooseRole"></choose-role>
    </el-dialog>
</template>

<script>
import ChooseRole from '@/component/ChooseRole';confirm

import { notEmpty } from '@/utils/tool';

import { updateUser } from "@/api/system_user";
import { getOrgTree } from '@/api/org';

export default {
    props: ['show', 'user'],
    components: {
        ChooseRole,
    },
    data () {
        return {
            form: {
                name: '',
                phone_num: '',
                enforceOrgs: '',
                enforce_org_id: '',
                position: '',
                sex: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                enforceOrgs: [
                    { required: true, message: '请选择所属机构', trigger: 'change' }
                ],
                // position: [
                //     { required: true, message: '请选择检查职务', trigger: 'change' }
                // ],
                phone_num: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' }
                ],
            },
            uploading: false,
            orgOptions: [],
            orgDic: null,
            orgProps: {
                checkStrictly: true,
                value: 'enforce_org_id',
                label: 'enforce_org_name',
                children: 'sub_orgs',
            },
            showChooseRole: false,
            chooseRoleId: null,
            chooseRoleName: '',
        }
    },
    watch: {
        show: {
            handler(n) {
                if (n) {
                    this.loadDetail();
                }
            },
            immediate: true,
        }
    },
    mounted () {
        this.loadOrgTree();
    },
    methods: {
        onClose(flag) {
            this.$emit('update:show', false);
            this.$emit('close', flag);
        },
        checkOrgLeaf(list) {
            if (list) {
                list.map(item => {
                    if (item.sub_orgs && item.sub_orgs.length > 0) {
                        this.checkOrgLeaf(item.sub_orgs);
                    }
                    else {
                        delete item.sub_orgs;
                    }
                });
            }
        },
        setupOrgDic(list) {
            if (this.orgDic == null) {
                this.orgDic = new Object();
            }
            if (list && list.length > 0) {
                list.map(item => {
                    this.orgDic[item.enforce_org_id] = item;
                    if (item.sub_orgs && item.sub_orgs.length > 0) {
                        this.setupOrgDic(item.sub_orgs);
                    }
                });
            }
        },
        loadOrgTree() {
            getOrgTree().then(res => {
                if (res && res.data) {
                    let list = res.data;
                    this.checkOrgLeaf(list);
                    this.setupOrgDic(list);
                    this.orgOptions = list;
                }
            });
        },
        loadDetail() {
            if (this.user) {
                this.form.name = this.user.name;
                this.form.sex = this.user.sex;
                this.form.phone_num = this.user.phone_num;
                this.form.position = this.user.position;
                this.form.enforce_org_id = this.user.enforce_org_id;
                let arr = [];
                this.setupOrgList(arr, this.user.enforce_org_id);
                this.form.enforceOrgs = arr;
                this.chooseRoleId = '';
                this.chooseRoleName = '';
                if (this.user.roles && this.user.roles.length > 0) {
                    const role = this.user.roles[0];
                    this.chooseRoleId = role.id;
                    this.chooseRoleName = role.name;
                }
            }
        },
        setupOrgList(arr, target) {
            if (arr && target && this.orgDic) {
                const item = this.orgDic[target];
                if (item) {
                    if (notEmpty(item.enforce_org_pid) && item.enforce_org_pid != '0') {
                        this.setupOrgList(arr, item.enforce_org_pid);
                    }
                    arr.push(target);
                }
            }
        },
        onConfirmChooseRole(data) {
            this.chooseRoleId = data.id;
            this.chooseRoleName = data.name;
            this.showChooseRole = false;
        },
        onSubmit() {
            const vm = this;
            this.$refs['form'].validate((valid) => {
                if (valid && vm.user) {
                    vm.uploading = true;
                    if (vm.chooseRoleId > 0) {
                        vm.form.roles = [{
                            id: vm.chooseRoleId,
                        }];
                    }
                    updateUser(vm.user.id, vm.form).then(res => {
                        vm.$message.success('更新成功');
                        vm.$refs.form.resetFields();
                        vm.uploading = false;
                        vm.onClose(true);
                    }).catch(() => {
                        vm.uploading = false;
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss">
.my-input {
    .el-input__inner {
        width: 400px;
    }
}
.my-select {
    .el-input__inner {
        width: 300px;
    }
}
</style>

<style lang="scss" scoped>
.tool {
    display: flex;
    justify-content: flex-end;
    margin: 8px;
}
</style>