<template>
    <div class="container">
        <el-form inline label-width="80px">
            <el-form-item label="字段名">
                <el-input v-model="queryParam.fieldName" class="mr input" clearable placeholder="输入名称搜索"
                          size="small"
                />
            </el-form-item>
            <el-form-item label="字段类型">
                <el-input v-model="queryParam.fieldType" class="mr input" clearable placeholder="输入名称搜索"
                          size="small"
                />
            </el-form-item>
            <el-form-item label="字段注释">
                <el-input v-model="queryParam.fieldComment" 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="addMetaFieldDialog">
                    新增
                </el-button>
                <el-button class="mr" size="mini" type="success" @click="errFieldCheck">
                    异常字段检测
                </el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="queryLoading" :data="metaFieldList" border max-height="500" stripe>
            <el-table-column :show-overflow-tooltip="true" align="center" label="字段名" prop="fieldName" width="400"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="字段类型" prop="fieldType"/>
            <el-table-column :show-overflow-tooltip="true" align="center" label="字段注释" prop="fieldComment"/>
            <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="editMetaFieldDialog(scope.row)"
                    ></el-button>
                    <el-button circle icon="el-icon-delete" plain size="small" type="danger"
                               @click.stop="deleteMetaRule(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="queryMetaFieldList"
        />
        <!--字段增改-->
        <el-dialog :close-on-click-modal="false" :title="metaFieldDialog.title" :visible.sync="metaFieldDialog.show"
                   append-to-body width="400px"
        >
            <el-form ref="metaFieldForm" :model="metaFieldDialog.data" label-width="80px">
                <el-form-item label="字段名" prop="fieldName" required>
                    <el-input v-model="metaFieldDialog.data.fieldName" maxlength="30" show-word-limit size="small" type="text"/>
                </el-form-item>
                <el-form-item label="字段类型" prop="fieldType" required>
                    <el-input v-model="metaFieldDialog.data.fieldType" size="small" placeholder="例如 VARCHAR2(64) ,NUMBER(8,1), DATE(7)等等"/>
<!--                    <el-select v-model="metaFieldDialog.data.fieldType" size="small" style="width: 160px">
                    </el-select>-->
                </el-form-item>
                <el-form-item label="指标名称" prop="fieldComment" required>
                    <el-input v-model="metaFieldDialog.data.fieldComment" size="small"/>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="metaFieldDialog.data.remarks" placeholder="备注" type="textarea"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitMetaField">确 定</el-button>
                <el-button @click="metaFieldDialog.show = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

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

export default {
    name: 'Field',
    data() {
        return {
            queryParam: {
                pageNum: 1,
                pageSize: 20,
                total: 0,
                fieldName: '',
                fieldType: '',
                fieldComment: ''
            },
            queryLoading: false,
            metaFieldList: [],
            metaFieldDialog: {
                title: '',
                show: false,
                data: {}
            }
        }
    },
    created() {
        this.queryMetaFieldList()
    },
    methods: {
        // 查询元字段信息
        queryMetaFieldList() {
            this.queryLoading = true
            DataField.queryMetaField({ ...this.queryParam }).then(res => {
                if (res.code === 200) {
                    this.metaFieldList = res.rows
                    this.queryParam.total = res.total
                }
            }).finally(_ => this.queryLoading = false)
        },
        // 清除分页再查询
        clearPageToSearch() {
            this.queryParam.total = 0
            this.queryParam.pageNum = 1
            this.queryMetaFieldList()
        },
        // 异常字段检测
        errFieldCheck(){
            this.queryParam.total = 0
            this.queryParam.pageNum = 1
            this.queryLoading = true
            DataField.queryMetaField({
                total: 0,
                pageNum: 1,
                errorType: 'length'
            }).then(res => {
                if (res.code === 200) {
                    this.metaFieldList = res.rows
                    this.queryParam.total = res.total
                }
            }).finally(_ => this.queryLoading = false)
        },
        // 打开添加弹框
        addMetaFieldDialog() {
            this.metaFieldDialog.title = '新增字段'
            this.metaFieldDialog.data = {}
            this.metaFieldDialog.show = true
        },
        // 打开编辑弹框
        editMetaFieldDialog(data) {
            this.metaFieldDialog.title = '编辑字段'
            this.metaFieldDialog.data = { ...data }
            this.metaFieldDialog.show = true
        },
        // 删除字段
        deleteMetaRule(data) {
            this.$confirm(`是否删除字段 ${data.fieldName} ?`, '删除',
                {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            DataField.deleteMetaField(data.id).then(res => {
                                done()
                                this.queryMetaFieldList()
                            })
                        } else {
                            done()
                        }
                    }
                }
            )
        },
        // 提交字段信息
        submitMetaField() {
            this.$refs.metaFieldForm.validate(validate => {
                if (validate) {
                    if (this.metaFieldDialog.title === '新增字段') {
                        DataField.addMetaField(this.metaFieldDialog.data).then(res => {
                            this.metaFieldDialog.show = false
                            this.queryMetaFieldList()
                        })
                    } else {
                        DataField.updateMetaField(this.metaFieldDialog.data).then(res => {
                            this.metaFieldDialog.show = false
                            this.queryMetaFieldList()
                        })
                    }
                }
            })
        }
    }
}
</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>
