<template>
    <ap-container>
        <ap-main margin="1111">
            <el-form
                ref="configFormRef"
                label-position="left"
                label-width="200px"
                :model="configForm"
                :inline-message="true">
                <el-form-item label="数据库" prop="fdSourceId">
                    <el-select v-model="configForm.fdSourceId" placeholder="请选择数据库" filterable>
                        <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="后端访问地址(请求代码生成)" prop="fdJavaHref">
                    <el-select v-model="configForm.fdJavaHref" class="item-width">
                        <template v-for="item in configHistoryList">
                            <el-option v-if="item.fdType == 1" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
                        </template>
                    </el-select>
                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(1)" />
                </el-form-item>
                <el-form-item label="后端项目路径(生成文件)" prop="fdJavaPath">
                    <el-select v-model="configForm.fdJavaPath" class="item-width">
                        <template v-for="item in configHistoryList">
                            <el-option v-if="item.fdType == 2" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
                        </template>
                    </el-select>
                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(2)" />
                </el-form-item>
                <el-form-item label="前端访问地址(预览)" prop="fdVueHref">
                    <el-select v-model="configForm.fdVueHref" class="item-width">
                        <template v-for="item in configHistoryList">
                            <el-option v-if="item.fdType == 3" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
                        </template>
                    </el-select>
                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(3)" />
                </el-form-item>
                <el-form-item label="前端项目路径(生成文件)" prop="fdVuePath">
                    <el-select v-model="configForm.fdVuePath" class="item-width">
                        <template v-for="item in configHistoryList">
                            <el-option v-if="item.fdType == 4" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
                        </template>
                    </el-select>
                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(4)" />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="saveConfigForm">保 存</el-button>
        </ap-main>

        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="dialogCloseEvent"
            width="50%">
            <div style="color: red;font-weight: bold;margin-bottom: 5px" v-html="msg">
            </div>
            <div style="height: 300px;width: 100%">
                <ap-table ref="tDevUserConfigHistoryRef" :options.sync="tDevUserConfigHistoryOpt"></ap-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>

export default {
    name: 'DevMyConfig',
    created() {
        this.initDbSource();
        this.initConfig();
        this.initConfigHistory();
    },
    data() {
        let columns = [
            {
                prop: 'fdValue',
                label: '值',
                type: 'input'
            },
        ];
        let tableOpt = {
            title: "用户配置信息",
            columns: columns,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apd/TDevUserConfigHistory/getTDevUserConfigHistoryGridList",
            saveUrl: "/apd/TDevUserConfigHistory/saveTDevUserConfigHistoryGridData",
            deleteUrl: "/apd/TDevUserConfigHistory/deleteTDevUserConfigHistoryGridData",
            toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save"],
            addDefaultObj: () => {
                return { fdType: this.editType}
            },
            params: () => {
                return {
                    fdType: this.editType
                }
            }
        };
        return {
            dbSourceList: [],
            configHistoryList: [],
            configForm: {},
            editType: "",
            dialogVisible: false,
            msg: "",
            dialogTitle: "配置",
            tDevUserConfigHistoryOpt: tableOpt,
        }
    },
    methods: {
        initDbSource() {
            this.$request({
                url: '/apd/db/TDevDbAuth/getDbSourceList',
                method: 'post'
            }).then(response => {
                this.dbSourceList = response.data;
            })
        },
        initConfig() {
            this.$request({
                url: '/apd/config/TDevUserConfig/getTDevUserConfig',
                method: 'post',
                data: {}
            }).then(response => {
                this.configForm = response.data;
            })
        },
        initConfigHistory() {
            this.$request({
                url: '/apd/TDevUserConfigHistory/getTDevUserConfigHistoryList',
                method: 'post',
                data: {}
            }).then(response => {
                this.configHistoryList = response.data;
            })
        },
        showHisTable(type) {
            this.dialogVisible = true;
            this.editType = type;
            switch (type) {
                case 1:
                    this.msg = "配置说明： http://本地ip:端口/项目名   →   http://172.22.0.123:8191/pm";
                    this.dialogTitle = "后端访问地址(请求代码生成)";
                    break;
                case 2:
                    this.msg = '配置说明： 后端项目本地根路径   →   E:\\xxx\\xxx\\pm';
                    this.dialogTitle = "后端项目路径(生成文件)";
                    break;
                case 3:
                    this.msg = '配置说明： http://本地ip:端口/#/   →   http://172.22.0.123:9527/#/';
                    this.dialogTitle = "前端访问地址(预览)";
                    break;
                case 4:
                    this.msg = '配置说明： 前端项目本地根路径   →   E:\\xxx\\xxx\\ap';
                    this.dialogTitle = "前端项目路径(生成文件)";
                    break;
            }
            this.$nextTick(() => {
                this.$refs.tDevUserConfigHistoryRef.refresh();
            })
        },
        dialogCloseEvent() {
            this.initConfigHistory()
        },
        saveConfigForm() {
            let param = this.configForm;
            this.$request({
                url: '/apd/config/TDevUserConfig/saveTDevUserConfig',
                method: 'post',
                data: param
            }).then(response => {
                // 刷新页面
                this.$alert('保存成功！请刷新页面！', {
                    confirmButtonText: '确定',
                    callback: action => {
                        location.reload();
                    }
                });
            })
        },
    }
}
</script>

<style scoped>
.item-width {
    width: 300px;
}

.item-msg {
    color: #9e9e9e;
    margin-left: 10px;
}
.edit-icon {
    font-size: 19px;
    margin-left: 10px;
    color: #1682e6;
}
</style>
