<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-refresh" plain size="small" type="primary"
                               @click.stop="syncFieldType(scope.row)"
                    ></el-button>
                    <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>
        <el-dialog :close-on-click-modal="false" title="字段同步" :visible.sync="diffDialog.show"
                   append-to-body width="80%" @open="diffDialogOpen"
        >
            <el-table v-loading="diffDialog.loading" :data="diffDialog.data" border stripe>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div style="width: 100%;margin-left: 32px">
                            <div style="margin: 8px">
                                <span style="margin-right: 8px">修改字段SQL(同步执行的SQL): </span>
                                <span>{{scope.row.mergeSql}}</span>
                            </div>
                            <div style="margin: 8px">
                                <span>针对特殊的例如NUMBER类型的无法直接修改精度的字段,可以参考如下办法: </span>
                                <div style="margin-left: 32px">
                                    <div>-- 修改原字段名</div>
                                    <div>ALTER TABLE {{scope.row.tableName}} RENAME COLUMN {{scope.row.columnName}} TO {{scope.row.columnName + '_BACKUP'}};</div>
                                    <div>-- 添加一个和原字段同名的字段</div>
                                    <div>ALTER TABLE {{scope.row.tableName}} ADD {{scope.row.columnName}} {{scope.row.metaType}};</div>
                                    <div>-- 将原来的数据更新到新的字段中,这时需要注意数据类型转换,此语句仅供参考</div>
                                    <div>UPDATE {{scope.row.tableName}} SET {{scope.row.columnName}} = CAST({{scope.row.columnName + '_BACKUP'}} AS {{scope.row.metaType}});</div>
                                    <div>-- 删除原来的备份字段,注意确认一下数据是否正常</div>
                                    <div>ALTER TABLE {{scope.row.tableName}} DROP COLUMN {{scope.row.columnName + '_BACKUP'}};</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" align="center" label="数据源名称" prop="datasourceId" width="110"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="表名" prop="tableName" min-width="210"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="字段名" prop="columnName" min-width="210"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="元数据类型" prop="metaType" width="130"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="字段来类型" prop="columnType" width="130"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="字段长度" prop="columnLength" width="75"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="字段精度" prop="columnPrecision" width="75"/>
                <el-table-column :show-overflow-tooltip="true" align="center" label="精度系数" prop="columnScale" width="75"/>
                <el-table-column align="center" label="操作" show-overflow-tooltip width="75">
                    <template slot-scope="scope">
                        <el-button plain size="small" type="primary" @click.stop="executeSql(scope.row)"
                        >同步</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </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: {}
            },
            diffDialog: {
                show: false,
                data: [],
                row:{},
                loading: false,
            }
        }
    },
    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
        },
        // 同步字段类型弹框
        syncFieldType(row){
            this.diffDialog = {
                data: [],
                loading: false,
                row:{...row},
                show: true
            }
        },
        diffDialogOpen(){
          this.diffDialog.loading = true
            DataField.fieldDbDiff(this.diffDialog.row).then(res=>{
                if (res.code === 200){
                    this.diffDialog.data = res.data
                }
            }).finally(_=>{
                this.diffDialog.loading = false
            })
        },
        executeSql(row){
            DataField.executeSql({...row}).then(res=>{
                if (res.code === 200){
                    this.$message.success("执行成功")
                }
            }).finally(_=>{
                this.diffDialogOpen()
            })
        },
        // 删除字段
        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>
