<template>
    <el-dialog :title="managerMap[action]" :visible.sync="dialogVisible" width="400px" class="dialog-info">
        <div class="info-wrp">
            <el-form ref="form" :model="peopleData" label-width="100px">
                <el-form-item label="工号：">
                    <el-input v-model="peopleData.workCardNumber" />
                </el-form-item>
                <el-form-item label="姓名：">
                    <el-input v-model="peopleData.username" />
                </el-form-item>
                <el-form-item label="帐号：">
                    <el-input v-model="peopleData.account" />
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="peopleData.mobile" />
                </el-form-item>
                <el-form-item label="所属区域：">
                    <el-select v-model="peopleData.manageAreaId" size="small" placeholder="请选择">
                        <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id" v-if="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色：">
                    <el-select v-model="peopleData.roleId" size="small" placeholder="请选择">
                        <el-option v-for="item in roleOpts" :key="item.id" :label="item.content" :value="item.id"  v-if="item.id!=''" @click.native="roleChange(item)"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="帐号状态：">
                    <el-radio-group v-model="peopleData.ifDisenable">
                        <el-radio :label="false">正常</el-radio>
                        <el-radio :label="true">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="btn-group">
                    <el-row>
                        <el-button size=small @click="dialogVisible = false">取消</el-button>
                        <el-button size=small type="primary" v-show="action=='edit'" @click="save">保存</el-button>
                        <el-button size=small type="primary" v-show="action=='add'" @click="submit">确定</el-button>
                    </el-row>
                </div>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    import SelectPlace from '@/components/SelectPlace'
    import api from '@/api/manager'
    export default {
        name: "people-edit",
        components: {
            SelectPlace
        },
        props: {
            action: {
                type: String,
                default: 'add'
            },
            roleOpts: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                dialogVisible: false,
                managerMap: {
                    edit: '编辑管理员',
                    add: '添加管理员'
                },
                text: '',
                peopleData: {},
                roleOptions: [],
                defaultData: {
                    workCardNumber: '',
                    username: '',
                    account: '',
                    mobile: '',
                    ifDisenable: true,
                    roleName: '',
                    roleId: '',
                    manageAreaId: ''
                }
            }
        },
        methods: {
            open(data) {
                this.dialogVisible = true
                /*delete data.createTime
                delete data.manageAreaName
                delete data.roleContent*/
                this.peopleData = data || this.defaultData
                console.log(this.peopleData)
            },
            roleChange(data) {
                this.peopleData.roleName = data.content
                console.log(data, this.peopleData)
            },
            save() {
                this.peopleData.ifDisenable = this.peopleData.ifDisenable ? 1 : 0
                api.updateCustomer(this.peopleData).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogVisible = false
                    this.$emit('updateList')
                }).catch(error => {
                    console.log(error)
                })
            },
            submit() {
                if(this.peopleData.workCardNumber!='' && this.peopleData.username!='' && this.peopleData.account!='' && this.peopleData.mobile!='' && this.peopleData.roleName!='' && this.peopleData.roleId!='') {
                    console.log(this.peopleData)
                    this.peopleData.ifDisenable = this.peopleData.ifDisenable ? 1 : 0
                    api.addCustomer(this.peopleData).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogVisible = false
                        this.$emit('updateList')
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '请把信息填写完整!'
                    });
                }
            },
        },
        created() {

        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        top: -2vh;
        .el-form-item {
            margin-bottom: 15px;
        }
        .info-wrp {
            padding-right: 10px;
            margin-top: -20px;
            .btn-group {
                text-align: center;
                margin-top: 20px;
            }
        }
    }
</style>
