<template>
    <div class="container">
        <el-form inline label-width="80px">
            <el-form-item label="区域编码">
                <el-input v-model="queryParam.value" class="mr input" clearable placeholder="输入编码搜索"
                          size="small"
                />
            </el-form-item>
            <el-form-item label="字段类型">
                <el-input v-model="queryParam.label" class="mr input" clearable placeholder="输入名称搜索"
                          size="small"
                />
            </el-form-item>
            <el-form-item>
                <el-button :loading="queryLoading" class="mr" icon="el-icon-search" size="mini" type="primary"
                           @click="clearPageToSearch"
                >
                    查询
                </el-button>
                <el-button class="mr" size="mini" type="success" @click="addAreaDialog">
                    新增
                </el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="queryLoading" :data="areaList" border max-height="500" stripe>
            <el-table-column type="index" />
            <el-table-column :show-overflow-tooltip="true" align="center" label="编码" prop="value" width="200"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="区域名称" prop="label" width="300"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remarks"/>
            <el-table-column align="center" label="操作" show-overflow-tooltip width="150">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit" plain size="small" type="primary"
                               @click.stop="editAreaDialog(scope.row)"
                    ></el-button>
                    <el-button circle icon="el-icon-delete" plain size="small" type="danger"
                               @click.stop="deleteArea(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="queryParam.total > 0" :limit.sync="queryParam.pageSize" :page.sync="queryParam.pageNum"
                    :total="queryParam.total" @pagination="queryAreaList"
        />
        <!--字段增改-->
        <el-dialog :close-on-click-modal="false" :title="areaDialog.title" :visible.sync="areaDialog.show"
                   append-to-body width="400px"
        >
            <el-form ref="areaForm" :model="areaDialog.data" label-width="80px">
                <el-form-item label="区域编码" prop="value" required>
                    <el-input v-model="areaDialog.data.value" :disabled="areaDialog.title === '编辑区域'" maxlength="30" show-word-limit size="small" type="text"/>
                </el-form-item>
                <el-form-item label="区域名称" prop="label" required>
                    <el-input v-model="areaDialog.data.label" size="small"/>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="areaDialog.data.remarks" placeholder="备注" type="textarea"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitArea">确 定</el-button>
                <el-button @click="areaDialog.show = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as DictData from '@/api/emport/DictData'

export default {
    name: 'Field',
    data() {
        return {
            queryParam: {
                pageNum: 1,
                pageSize: 20,
                total: 0,
                value: '',
                label: '',
            },
            queryLoading: false,
            areaList: [],
            areaDialog: {
                title: '',
                show: false,
                data: {}
            }
        }
    },
    created() {
        this.queryAreaList()
    },
    methods: {
        // 查询元字段信息
        queryAreaList() {
            this.queryLoading = true
            DictData.searchArea({ ...this.queryParam }).then(res => {
                if (res.code === 200) {
                    this.areaList = res.rows
                    this.queryParam.total = res.total
                }
            }).finally(_ => this.queryLoading = false)
        },
        // 清除分页再查询
        clearPageToSearch() {
            this.queryParam.total = 0
            this.queryParam.pageNum = 1
            this.queryAreaList()
        },
        // 打开添加弹框
        addAreaDialog() {
            this.areaDialog.title = '新增区域'
            this.areaDialog.data = {
                type: 'area'
            }
            this.areaDialog.show = true
        },
        // 打开编辑弹框
        editAreaDialog(data) {
            this.areaDialog.title = '编辑区域'
            this.areaDialog.data = { ...data }
            this.areaDialog.show = true
        },
        // 删除字段
        deleteArea(data) {
            this.$confirm(`是否删除区域 ${data.label} ?`, '删除',
                {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            DictData.deleteDict(data.id).then(res => {
                                this.$message.success("删除成功")
                                done()
                                this.queryAreaList()
                            })
                        } else {
                            done()
                        }
                    }
                }
            )
        },
        // 提交字段信息
        submitArea() {
            this.$refs.areaForm.validate(validate => {
                if (validate) {
                    if (this.areaDialog.title === '新增区域') {
                        DictData.addDict(this.areaDialog.data).then(res => {
                            this.$message.success("新增成功")
                            this.areaDialog.show = false
                            this.queryAreaList()
                        })
                    } else {
                        DictData.updateDict(this.areaDialog.data).then(res => {
                            this.$message.success("修改成功")
                            this.areaDialog.show = false
                            this.queryAreaList()
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    box-shadow: none;
}

.header-operator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .mr {
        margin-right: 8px;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .input {
        width: 250px;
    }
}
</style>
