<template>
    <el-dialog :title="groundMap[action]" :visible.sync="dialogGroundVisible" width="500px" 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="负责区域：">-->
                    <!--<select-place ref="SelectPlace" size="small" @submit="setCode"></select-place>-->
                <!--</el-form-item>-->
                <el-form-item label="负责区域：">
                    <el-select v-model="peopleData.manageAreaId" size="small" placeholder="请选择" style="width: 100%">
                        <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-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="dialogGroundVisible = 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/ground'
    export default {
        name: "people-edit",
        components: {
            SelectPlace
        },
        props: {
            action: {
                type: String,
                default: 'add'
            }
        },
        data() {
            return {
                dialogGroundVisible: false,
                groundMap: {
                    edit: '编辑地勤人员',
                    add: '添加地勤人员'
                },
                peopleData: {},
                roleOptions: ['超级管理员', '区域管理员', '普通管理员'],
                defaultData: {
                    workCardNumber: '',
                    username: '',
                    account: '',
                    mobile: '',
                    ifDisenable: false,
                    provinceCode: '',
                    // cityCode: '',
                    // areaCode: '',
                    manageAreaId: ''
                }
            }
        },
        methods: {
            open(data) {
                this.dialogGroundVisible = true
                if(data) {
                    this.peopleData = data
                } else {
                    this.peopleData = this.defaultData
                }

                console.log(data, this.peopleData, this.$refs.SelectPlace)
                let areaCode =  this.peopleData.areaCode
                setTimeout(() => {
                    this.$refs.SelectPlace.openCode(areaCode)
                    this.setCode(areaCode)
                }, 0)
            },
            setCode(code) {
                console.log(code)
                const arr = code.split(',')
                this.peopleData.provinceCode = arr[0]
                this.peopleData.cityCode = arr[1]
                this.peopleData.areaCode = arr[2]
                console.log(code)
            },
            save() {
                this.peopleData.ifDisenable = this.peopleData.ifDisenable ? 1 : 0
                api.updateGround(this.peopleData).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogGroundVisible = false
                    this.$emit('updateList')
                }).catch(error => {
                    console.log(error)
                })
            },
            submit() {
                // console.log(this.peopleData)
                if(this.peopleData.workCardNumber!='' && this.peopleData.username!='' && this.peopleData.account!='' && this.peopleData.mobile!='' && this.peopleData.manageAreaId) {
                    console.log(this.peopleData)
                    this.peopleData.ifDisenable = this.peopleData.ifDisenable ? 1 : 0
                    api.addGround(this.peopleData).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogGroundVisible = 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: -1vh;
        .info-wrp {
            padding-right: 10px;
            margin-top: -20px;
            .btn-group {
                text-align: center;
                margin-top: 20px;
            }
        }
    }

</style>
