<template>
    <ap-container>
        <ap-aside margin="1111" style="width: 450px">
            <div class="layout-aside-header">
                <div class="layout-aside-header-title">{{ headerName }}</div>
            </div>
            <div>
                <el-input v-model="filterText" placeholder="关键字过滤"/>
            </div>
            <div v-loading="loadingTreeFlag" class="layout-aside-content">
                <el-tree
                    ref="typeTree"
                    class="filter-tree"
                    node-key="tableName"
                    :data="typeTreeList"
                    :props="defaultProps"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    :indent="1"
                    show-checkbox
                    default-expand-all
                    :check-on-click-node="true"
                    :expand-on-click-node="false"
                    @check-change="checkChangeEvent"
                >
                    <div slot-scope="{ node, data }" style="width: 100%">
                        <div class="dev-tree-node-left ap-ellipse">
                            {{ data.tableName }}
                        </div>
                        <div style="font-size: 12px;">{{ data.tableComment }}</div>
                    </div>
                </el-tree>
            </div>
        </ap-aside>
        <ap-main margin="1110">
            <div class="item-ctn">
                <div class="title-span">
                    <div>
                        <i class="el-icon-title-flag"/>
                        后台请求路径：
                        <span class="api-code">{{ userConfig.fdJavaHref }}</span>
                    </div>
                    <div style="padding: 13px 0 0 20px;">
                        文件生成位置：
                        <span class="api-code">
                            {{ userConfig.fdJavaPath }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="item-ctn">
                <div class="title-span">
                    <i class="el-icon-title-flag"/>
                    已选择：
                </div>
                <div>
                    <span v-if="selectedTables.length <1" style="color: red;font-size: 14px;">请选择需要生成的表</span>
                    <template v-for="t in selectedTables">
                        <el-tag style="margin: 5px;width: 30%;">{{ t.tableComment }}：{{ t.tableSchema }}.{{
                                t.tableName
                            }}
                        </el-tag>
                    </template>
                </div>
            </div>

            <div style="border-bottom: 1px solid #e9ecf1;margin-bottom: 20px;">
                <div class="title-span">
                    <i class="el-icon-title-flag"/>
                    生成内容：
                </div>
                <div class="create-item">
                    <div class="create-item-span">entity：</div>
                    <el-switch v-model="createEntity" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">entityFD：</div>
                    <el-switch v-model="createEntityFD" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">entityTF：</div>
                    <el-switch v-model="createEntityTF" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">controller：</div>
                    <el-switch v-model="createController" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">service：</div>
                    <el-switch v-model="createService" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">dao：</div>
                    <el-switch v-model="createDao" :active-value="1" :inactive-value="0"/>
                </div>
                <div class="create-item">
                    <div class="create-item-span">xml：</div>
                    <el-switch v-model="createXml" :active-value="1" :inactive-value="0"/>
                </div>
            </div>
            <div style="text-align: center;">
                <el-button
                    type="primary"
                    icon="el-icon-magic-stick"
                    circle
                    style="padding: 30px;font-size: 60px;"
                    @click="generateCode"
                />
            </div>
            <div class="msg" v-html="backgroundMsg"/>
        </ap-main>

    </ap-container>
</template>

<script>
import {convertToTreeData} from 'ap-util/util/DataUtil'
import {getUserConfig} from './../dev/DevUtil'
import BackgroundBase from './BackgroundBase'
export default {
    name: 'BackgroundPanel',
    extends: BackgroundBase,
    data() {
        return {
            // ----- 左侧树 -----
            headerName: '表',
            loadingTreeFlag: false,
            filterText: '',
            typeTreeList: [],
            defaultProps: {
                children: 'children',
                label: 'tableName'
            },
        }
    },
    watch: {
        filterText(val) {
            this.$refs.typeTree.filter(val)
        }
    },
    created() {
        this.loadTreeData();
    },
    methods: {
        // 左侧树：列头
        setHeaderName() {
            if (this.typeTreeList.length > 1) {
                this.headerName = "[" + this.typeTreeList[0].tableSchema + "] - 表";
            }
        },
        // 左侧树：加载数据
        loadTreeData() {
            this.loadingTreeFlag = true
            this.$request({
                url: '/apd/db/DevDbTable/getTableList',
                method: 'post',
                data: {
                    sourceId: this.userConfig.fdSourceId
                }
            }).then(response => {
                this.typeTreeList = convertToTreeData(response.data, {
                    idKey: "tableName",
                    parentKey: "parentId",
                    childrenKey: "children",
                });
                this.setHeaderName();
            }).finally(() => {
                this.loadingTreeFlag = false
            })
        },
        // 左侧树：初始化数据
        initTreeData() {
            // 重置当前选择节点
            this.$refs.typeTree.setCurrentKey()
            this.loadTreeData()
        },
        // 左侧树：过滤节点
        filterNode(value, data) {
            if (!value) return true
            if (data.tableName.indexOf(value) !== -1) {
                return true
            }
            if (data.tableComment != null && data.tableComment.indexOf(value) !== -1) {
                return true
            }
            return false
        },
        // 选择事件
        checkChangeEvent(data, node, comp) {
            const parentNodes = this.$refs.typeTree.getHalfCheckedNodes()
            const selectNodes = this.$refs.typeTree.getCheckedNodes(false)
            const tables = parentNodes.concat(selectNodes)

            const newList = []
            for (let i = 0; i < tables.length; i++) {
                newList.push(tables[i])
            }
            this.selectedTables = newList
        },
        // 左侧树：转换成tree要求的数据格式
        handelTreeData(data) {
            const newList = []
            for (let i = 0; i < data.length; i++) {
                const fdParentId = data[i].fdParentId
                // 根节点
                if (!fdParentId) {
                    newList.push(data[i])
                } else {
                    // 子节点
                    for (let j = 0; j < data.length; j++) {
                        // 查找父节点
                        if (data[j].fdId == fdParentId) {
                            if (!data[j].children) {
                                data[j].children = []
                            }
                            data[j].children.push(data[i])
                        }
                    }
                }
            }
            return newList
        },
    }
}
</script>

<style scoped>
.item-ctn {
    border-bottom: 1px solid #e9ecf1;
    margin-bottom: 5px;
    padding-bottom: 10px;
}

.title-span {
    font-weight: bold;
    color: #4f4f4f;
}

.create-item {
    padding: 5px;
}

.create-item-span {
    width: 90px;
    float: left;
}

.msg {
    color: #1890ff;
}

.dev-tree-node-left {
    font-size: 15px;
    width: 60%;
    float: left;
}
</style>
