<template>
    <ap-container>
        <ap-main margin="1111" class="flex-justify-start">
            <div class="flex-col" style="height: 100%;width: 1000px;">
                <div class="flex-justify-start">
                    <div style="width: 60px;"></div>
                    <div class="flex-justify-start flex-1">
                        <div style="width: 230px">
                            <span style="font-weight: bold;">来源库：</span>
                            <el-select v-model="sourceId" placeholder="来源数据库" filterable style="width: 120px">
                                <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
                            </el-select>
                        </div>
                        <div class="flex-1 flex-justify-start">
                            <div>
                                <span style="font-weight: bold;">目标库：</span><br>
                                <span style="font-size: 12px;" class="ap-color-gray">要操作的库</span>
                            </div>
                            <el-select v-model="targetId" placeholder="目标数据库" filterable style="width: 120px" @change="targetChange">
                                <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="flex-1 flex-col" style="overflow-y: scroll;border: 1px solid #cccccc;">
                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
                        <div class="flex-center operate-type ap-bg-green">创<br/>建<br/>表</div>
                        <div class="flex-1">
                            <template v-for="item in addList">
                                <div class="flex-justify-start flex-1  row">
                                    <div class="operate">
                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
                                    </div>
                                    <div class="source-ctn"> {{ item.tableName }}</div>
                                    <div class="flex-1 ap-color-green new-table" @click="showTableCol(item.tableName)">
                                        <i class="el-icon-circle-plus-outline"/>
                                        <span class="table-name">{{ item.tableName }}</span>
                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
                                    </div>
                                </div>
                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
                                    <div class="operate"></div>
                                    <div class="source-ctn"></div>
                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
                                        <div class="row-cell-col">
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfo"></div>
                                    </div>
                                </div>

                            </template>
                        </div>
                    </div>
                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
                        <div class="flex-center operate-type ap-bg-red">删<br/>除<br/>表</div>
                        <div class="flex-1">
                            <template v-for="item in delList">
                                <div class="flex-justify-start flex-1  row">
                                    <div class="operate">
                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
                                    </div>
                                    <div class="source-ctn"></div>
                                    <div class="flex-1 ap-color-red new-table" @click="showTableCol(item.tableName)">
                                        <i class="el-icon-trash-o"/>
                                        <span class="table-name">{{ item.tableName }}</span>
                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
                                    </div>
                                </div>
                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
                                    <div class="operate"></div>
                                    <div class="source-ctn"></div>
                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
                                        <div class="row-cell-col">
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfo"></div>
                                    </div>
                                </div>

                            </template>
                        </div>
                    </div>
                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
                        <div class="flex-center operate-type ap-bg-blue">更<br/>新<br/>表</div>
                        <div class="flex-1">
                            <template v-for="item in updateList">
                                <div class="flex-justify-start row">
                                    <div class="operate">
                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
                                    </div>
                                    <div class="source-ctn">{{ item.tableName }}</div>
                                    <div class="flex-1 ap-color-blue new-table" @click="showTableCol(item.tableName)">
                                        <i class="el-icon-transfer"/>
                                        <span class="table-name">{{ item.tableName }} </span>
                                        <span v-html="showTableComment(item)"></span>
                                    </div>
                                </div>
                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumnsUpdate" class="flex-justify-start row-col">
                                    <div class="operate"></div>
                                    <div class="source-ctn"></div>
                                    <!-- 0相同 1添加 2修改 3删除-->
                                    <div v-if="col.compareType==0" class="flex-1 flex-justify-start row-cell ap-color-gray">
                                        <div class="row-cell-col">
                                            <i class="el-icon-denghao"/>
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfoCompare"></div>
                                    </div>
                                    <div v-if="col.compareType==1" class="flex-1 flex-justify-start row-cell ap-color-green">
                                        <div class="row-cell-col">
                                            <i class="el-icon-plus"/>
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfoCompare"></div>
                                    </div>
                                    <div v-if="col.compareType==2" :title="col.compareStr" class="flex-1 flex-justify-start row-cell ap-color-gray">
                                        <div class="row-cell-col ap-color-blue">
                                            <i class="el-icon-edit-outline"/>
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfoCompare"></div>
                                    </div>
                                    <div v-if="col.compareType==3" class="flex-1 flex-justify-start row-cell ap-color-red">
                                        <div class="row-cell-col">
                                            <i class="el-icon-close"/>
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfo"></div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="flex-justify-start flex-1 ctn">
                        <div class="flex-center operate-type ap-bg-gray">相<br/>同<br/>表</div>
                        <div class="flex-1">
                            <template v-for="item in sameList">
                                <div class="flex-justify-start flex-1  row">
                                    <div class="operate">
                                    </div>
                                    <div class="source-ctn ap-color-gray"> {{ item.tableName }}</div>
                                    <div class="flex-1 ap-color-gray new-table" @click="showTableCol(item.tableName)">
                                        <i class="el-icon-denghao"/> {{ item.tableName }}
                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
                                    </div>
                                </div>
                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
                                    <div class="operate"></div>
                                    <div class="source-ctn"></div>
                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
                                        <div class="row-cell-col">
                                            {{ col.columnName }}
                                        </div>
                                        <div v-html="col.colInfo"></div>
                                    </div>
                                </div>

                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-col" style="padding: 0 5px">
                <div>
                    <ap-button type="primary" :click="doCompare" icon="el-icon-exchange">结构比对</ap-button>
                </div>
                <div style="margin-top: 10px">
                    <ap-button type="primary" :click="getSql" icon="el-icon-tickets">生成脚本</ap-button>
                </div>
                <div style="margin-top: 10px">
                    <ap-button type="primary" :click="doTableUpdate" icon="el-icon-upload">脚本部署</ap-button>
                </div>
            </div>
            <div class="flex-1 flex-col" style="height: 100%">
                <div style="height: 38px" class="flex-justify-start">
                    <span style="font-weight: bold;">{{ targetName }}</span><span v-html="msg"></span>
                </div>
                <div class="flex-1 sql-str" style="height: 100%;width: 100%">
                    <el-input v-model="sqlStr" type="textarea" rows=4 style="height: 100%;width: 100%"></el-input>
                </div>
            </div>
        </ap-main>
    </ap-container>
</template>

<script>

export default {
    name: 'DevDbSync',
    data() {
        return {
            sourceId: "",
            targetId: "",
            targetName: "",
            dbSourceList: [],
            addList: [],
            delList: [],
            sameList: [],
            updateList: [],
            checkedTable: [],
            currentTable: "",
            msg: "",
            sqlStr: "",

        }
    },
    watch: {},
    created() {
        this.initDbSource()
    },
    methods: {
        initDbSource() {
            this.$request({
                url: '/apd/db/TDevDbAuth/getDbSourceList',
                method: 'post'
            }).then(response => {
                this.dbSourceList = response.data;
            })
        },
        getCompareFlag() {
            return hasSource && hasTarget;
        },
        hasTable(list, tableName) {
            if (list == null) {
                return false;
            }
            for (let i = 0; i < list.length; i++) {
                if (list[i].tableName == tableName) {
                    return true;
                }
            }
            return false;
        },
        getTableByName(list, name) {
            for (let i = 0; i < list.length; i++) {
                if (list[i].tableName == name) {
                    return list[i];
                }
            }
            return null;
        },
        showTableComment(item) {
            let oldTableComment = item.oldTableComment;
            let tableComment = item.tableComment;
            if (tableComment == oldTableComment) {
                return `<span class="ap-color-gray dev-table-comment"> ${tableComment}</span>`
            }
            if (oldTableComment == null || oldTableComment == "") {
                return `<span class="ap-color-green dev-table-comment"> ${tableComment}</span>`
            }
            return `<span class="ap-color-blue dev-table-comment"> ${tableComment}</span>`
        },
        targetChange(val) {
            let list = this.dbSourceList;
            for (let i = 0; i < list.length; i++) {
                if (val == list[i].fdId) {
                    this.targetName = list[i].fdName + "：";
                    return;
                }
            }
            this.targetName = "";
        },
        showTableCol(table) {
            if (this.currentTable == table) {
                this.currentTable = "";
                return;
            }
            this.currentTable = table;
        },
        getSql() {
            return new Promise((resolve) => {
                let tables = this.checkedTable;
                if (tables == null || tables.length < 1) {
                    this.$message.error("请先选择需要同步的表");
                    resolve()
                    return;
                }

                let addCount = 0;
                let delCount = 0;
                let updateCount = 0;
                for (let i = 0; i < tables.length; i++) {
                    let item = tables[i];
                    if (this.hasTable(this.addList, item)) {
                        addCount++;
                        continue;
                    }
                    if (this.hasTable(this.delList, item)) {
                        delCount++;
                        continue;
                    }
                    if (this.hasTable(this.updateList, item)) {
                        updateCount++;
                        continue;
                    }
                }
                let msg = "";
                if (addCount > 0) {
                    msg += "<span class='ap-color-green' style='font-weight: bold;margin-right: 15px'>创建 " + addCount + " 个</span>";
                }
                if (delCount > 0) {
                    msg += "<span class='ap-color-red' style='font-weight: bold;margin-right: 15px'>删除 " + delCount + " 个</span>";
                }
                if (updateCount > 0) {
                    msg += "<span class='ap-color-blue' style='font-weight: bold;margin-right: 15px'>更新 " + updateCount + " 个</span>";
                }
                this.msg = msg;

                this.$request({
                    url: '/apd/db/DevDbTable/getSyncSql',
                    method: 'post',
                    data: {
                        sourceId: this.sourceId,
                        targetId: this.targetId,
                        tables: JSON.stringify(this.checkedTable)
                    }
                }).then(response => {
                    this.sqlStr = response.data;
                }).finally(() => {
                    resolve()
                });

            });

        },
        doCompare() {
            return new Promise((resolve) => {
                if (this.sourceId == null || this.sourceId == '' || this.targetId == null || this.targetId == '') {
                    this.$message.error("请先选择数据源");
                    resolve()
                    return;
                }
                this.$request({
                    url: '/apd/db/DevDbTable/getTableCompareList',
                    method: 'post',
                    data: {
                        sourceId: this.sourceId,
                        targetId: this.targetId
                    }
                }).then(response => {
                    let res = response.data;
                    this.addList = res.addList;
                    this.delList = res.delList;
                    this.sameList = res.sameList;
                    this.updateList = res.updateList;
                }).finally(() => {
                    resolve()
                });
            });
        },
        doTableUpdate() {
            return new Promise((resolve) => {
                let sqlStr = this.sqlStr;
                if (sqlStr == null || sqlStr == "") {
                    this.$message.error("SQL脚本为空，请先【生成脚本】");
                    resolve()
                    return;
                }

                this.$confirm(`确定要同步表架构?`, '提示', {
                    confirmButtonText: '确定同步',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request({
                        url: '/apd/db/DevDbTable/updateTableStruct',
                        method: 'post',
                        data: {
                            targetId: this.targetId,
                            sqlStr: sqlStr
                        }
                    }).then(response => {
                        this.$message.success(`同步成功！`);
                        this.sqlStr = "";
                        this.checkedTable = [];
                        this.doCompare();
                        this.msg = "";
                        this.currentTable = "";
                    }).finally(() => {
                        resolve()
                    });
                }).finally(() => {
                    resolve()
                });
            });
        }

    }
}
</script>

<style scoped>
.board {
    border: 1px solid #cccccc;
}

.ctn {
    align-items: stretch;
    border-right: 1px solid #cccccc;
}

.row {
    padding: 3px;
    align-items: stretch;
}

.row-col {
    font-size: 12px;
    padding: 1px 0;
}

.row-cell {
    margin-left: 30px;
    border-bottom: 1px solid #f3f3f3;
}

.row-cell-col {
    width: 150px;
}

.col {
    margin-left: 20px;
}

.source-ctn {
    width: 230px;
    overflow: hidden;
}

.table-name {
    font-weight: bold;
    margin-left: 5px;
}

.operate-type {
    width: 30px;
    font-size: 13px;
    padding: 3px;
}

.operate {
    width: 25px;
}

.operate /deep/ .el-checkbox__label {
    display: none;
}

.new-table:hover {
    cursor: pointer;
}

.sql-str /deep/ .el-textarea__inner {
    width: 100%;
    height: 100%;
}
</style>
<style>
.left-7 {
    margin-left: 7px;
}

.dev-table-comment {
    font-size: 13px;
    margin-left: 10px;
}
</style>
