<template>
    <ap-container>
        <ap-container>
            <template v-if="!showPage">
                <ap-main margin="1111">
                    <div>
                        <el-input v-model="secretKey" placeholder="请输入授权秘钥！" show-password style="width: 200px"></el-input>
                        <el-button type="primary" @click="checkPageAuth">确定</el-button>
                    </div>
                </ap-main>
            </template>
            <template v-if="showPage">
                <ap-aside width="50%" margin="1111">
                    <ap-table ref="tDevDbUserRef" :options.sync="tDevDbUserOpt"></ap-table>
                </ap-aside>
                <ap-split-panel></ap-split-panel>
                <ap-main width="50%" margin="1110">
                    <ap-table ref="tDevDbUserSourceRef" :options.sync="tDevDbUserSourceOpt"></ap-table>
                </ap-main>
            </template>
        </ap-container>
    </ap-container>
</template>

<script>
export default {
    name: 'TDevDbUser',
    data() {
        let tDevDbUserCols = [
            {
                prop: 'fdUserName',
                label: '用户名',
                type: 'input',
                width: '200px'
            },
        ];
        let tDevDbUserOpt = {
            title: "数据源用户",
            columns: tDevDbUserCols,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apd/db/TDevDbUser/getTDevDbUserGridList",
            saveUrl: "/apd/db/TDevDbUser/saveTDevDbUserGridData",
            deleteUrl: "/apd/db/TDevDbUser/deleteTDevDbUserGridData",
            toolbarBtn: ["add", "edit", "del", "refresh", "save"],
            initData: true, // 默认false
            rowClickEvent: (row, column, event) => {
                this.selectRowId = row.fdId;
                this.selectUserName = row.fdUserName;
                this.tDevDbUserSourceOpt.title = `【${row.fdUserName}】数据源列表`;
                // 点击行刷新右侧表
                this.$refs.tDevDbUserSourceRef.refresh();
            },
            params: {}
        };
        let tDevDbUserSourceCols = [
            {
                prop: 'fdSourceId',
                label: '数据源',
                type: 'select',
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "sourceList",
                width: '250px'
            },
        ];
        let tDevDbUserSourceOpt = {
            title: "数据源列表",
            columns: tDevDbUserSourceCols,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apd/db/TDevDbUserSource/getTDevDbUserSourceGridList",
            saveUrl: "/apd/db/TDevDbUserSource/saveTDevDbUserSourceGridData",
            deleteUrl: "/apd/db/TDevDbUserSource/deleteTDevDbUserSourceGridData",
            toolbarBtn: ["add", "edit", "del", "refresh", "save"],
            initData: false, // 默认false
            addDefaultObj: () => {
                return {
                    fdDbUserId: this.selectRowId
                }
            },
            params: () => {
                return {
                    dbUserId: this.selectRowId
                }
            }
        };
        return {
            secretKey: '',
            showPage: false,
            selectRowId: '', // 左侧表点击行
            selectUserName: '',
            tDevDbUserOpt: tDevDbUserOpt,
            tDevDbUserSourceOpt: tDevDbUserSourceOpt,
        }
    },
    methods: {
        checkPageAuth() {
            this.$request({
                url: '/apd/db/TDevDbAuth/checkPageAuth',
                method: 'post',
                data: {
                    secretKey: this.secretKey
                }
            }).then(response => {
                if (response.data) {
                    this.showPage = true;
                } else {
                    this.$message.error("授权秘钥错误！")
                }
            })
        }
    }
}
</script>

<style scoped>
</style>
