<template>
    <div id="add_personnel">
        <el-form :model="form" :rules="rules" ref="form" label-position="top">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="手机号码" prop="mobilePhone">
                        <el-input
                            v-model="form.mobilePhone"
                            :readonly="isedit"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="角色" prop="role">
                        <el-select
                            v-model="form.role"
                            placeholder="请选择"
                            style="width: 100%"
                            :disabled="isRoleIdEMR(form.role)"
                        >
                            <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.remark"
                                :value="item.id"
                                :disabled="isRoleRemarkEMR(item.remark)"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="isedit ? 8 : 16">
                    <el-form-item label="绑定企业" prop="selectBindEnts">
                        <el-select
                            v-model="form.selectBindEnts"
                            multiple
                            collapse-tags
                            filterable
                            style="width: 100%"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in bindEntList"
                                :key="item.entTaxId"
                                :label="item.entName"
                                :value="item.entTaxId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="isedit">
                    <el-form-item label="人员状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="true">有效</el-radio>
                            <el-radio :label="false">无效</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center">
            <el-button v-if="isedit" type="primary" @click="handleSubmitModify"
                >立即修改</el-button
            >
            <el-button v-else type="primary" @click="handleSubmitAdd"
                >立即添加</el-button
            >
            <el-button @click="handleCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import { addEntUser, modifyEntUser } from "@/api/user_config";
export default {
    name: "add_personnel",
    props: ["inputData"],
    data() {
        return {
            isedit: false,
            roles: [],
            bindEntList: [],
            form: {
                name: "",
                role: "",
                mobilePhone: "",
                selectBindEnts: [],
                status: true, // 有效:true 无效:false
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入购方名称",
                        trigger: "blur",
                    },
                ],
                role: [
                    {
                        required: true,
                        message: "请选择人员角色",
                        trigger: "change",
                    },
                ],
                mobilePhone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur",
                    },
                ],
                selectBindEnts: [
                    {
                        required: true,
                        message: "请至少选择一个企业",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    created() {
        console.log("add_personnel created 填充数据");
        console.log(this.inputData);
        this.fullInputData();
    },
    watch: {
        inputData: function (val) {
            console.log("add_personnel inputData 监听");
            console.log(val);
            this.fullInputData();
        },
    },
    methods: {
        // 角色是企业管理者
        isRoleRemarkEMR(remark) {
            return remark === "企业管理者" ? true : false;
        },
        isRoleIdEMR(id) {
            let result = false;

            if (this.roles) {
                let item = this.roles.find((item) => item.id === id);
                if (item) {
                    result = item.remark === "企业管理者";
                }
            }

            return result;
        },
        handleSubmitModify() {
            console.log("修改人员信息 参数");
            console.log(this.form);
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    modifyEntUser({
                        userMobile: this.form.mobilePhone,
                        name: this.form.name,
                        role: this.form.role,
                        bindEntList: this.form.selectBindEnts,
                        status: this.form.status,
                    })
                        .then((val) => {
                            console.log("修改人员信息结果");
                            console.log(val);
                            this.$message.success(val.msg);
                            this.notifyParent(true);
                        })
                        .catch((error) => {
                            this.$message.error(error);
                        });
                } else {
                    this.$message.error("输入信息不合法，请检查您的输入信息！");
                    return false;
                }
            });
        },
        handleSubmitAdd() {
            console.log("人员新增 参数");
            console.log(this.form);
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    addEntUser({
                        userMobile: this.form.mobilePhone,
                        name: this.form.name,
                        role: this.form.role,
                        bindEntList: this.form.selectBindEnts,
                    })
                        .then((val) => {
                            console.log("人员新增结果");
                            console.log(val);
                            this.$message.success(val.msg);
                            this.notifyParent(true);
                        })
                        .catch((error) => {
                            this.$message.error(error);
                        });
                } else {
                    this.$message.error("输入信息不合法，请检查您的输入信息！");
                    return false;
                }
            });
        },
        handleCancel() {
            this.notifyParent(false);
        },
        notifyParent(issuccess) {
            this.$emit("complete", issuccess);
        },
        fullInputData() {
            this.isedit = this.inputData.editMode;
            this.roles = this.inputData.roles;
            this.bindEntList = this.inputData.bindEntList;
            if (this.isedit) {
                this.form.name = this.inputData.inputDetailInfo.name;
                if (
                    this.inputData.inputDetailInfo.userRoles instanceof Array &&
                    this.inputData.inputDetailInfo.userRoles.length > 0
                ) {
                    // 角色唯一
                    this.form.role = this.inputData.inputDetailInfo.userRoles[0].id;
                }
                this.form.mobilePhone = this.inputData.inputDetailInfo.mobile;
                this.form.selectBindEnts = [];
                let tempEnts = [];
                for (
                    let index = 0;
                    index < this.inputData.inputDetailInfo.ents.length;
                    index++
                ) {
                    const element = this.inputData.inputDetailInfo.ents[index];
                    tempEnts[index] = element.entTaxId;
                }
                this.form.selectBindEnts = tempEnts;
                this.form.status = this.inputData.inputDetailInfo.status;
            } else {
                this.form.name = "";
                this.form.role = "";
                this.form.mobilePhone = "";
                this.form.selectBindEnts = [];
                this.form.status = true;
            }
        },
    },
};
</script>
