<template>
    <el-dialog :title="regionMap[action]" :visible.sync="dialogRegionVisible" width="500px" class="dialog-info">
        <div class="info-wrp">
            <el-form ref="form" :model="regionData" label-width="100px">
                <el-form-item label="区域名称：">
                    <el-input v-model="regionData.name" />
                </el-form-item>
                <div class="btn-group">
                    <el-row>
                        <el-button size=small @click="dialogRegionVisible = 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 api from '@/api/region'
    export default {
        name: "region-info",
        props: {
            action: {
                type: String,
                default: 'add'
            }
        },
        data() {
            return {
                dialogRegionVisible: false,
                regionMap: {
                    edit: '编辑区域',
                    add: '添加区域'
                },
                regionData: {},
                defaultData: {
                    name: ''
                }
            }
        },
        methods: {
            open(data) {
                this.dialogRegionVisible = true
                if(data) {
                    this.regionData = data
                } else {
                    this.regionData = this.defaultData
                }
            },
            save() {
                api.updateRegion(this.regionData).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogRegionVisible = false
                }).catch(error => {
                    console.log(error)
                })
            },
            submit() {
                if(this.regionData.name!='') {
                    api.addRegion(this.regionData).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogRegionVisible = false
                        this.$emit('updateList')
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '请把信息填写完整!'
                    });
                }
            }
        },
    }
</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>