<template>
    <div>
        <el-dialog
            title="选择关联查询"
            width="900px"
            top="5vh"
            :visible.sync="dialogShow"
            @close="closeDialog"
            destroy-on-close
        >
            <el-row :gutter="20">
                <el-col :span="16">
                    <ht-table
                        @load="loadData"
                        :data="data"
                        :selectable="false"
                        :pageResult="pageResult"
                        quick-search-props="name,alias"
                        :defaultSorter="[
                            {property: 'CREATE_TIME_', direction: 'DESC'},
                        ]"
                        :show-export="false"
                        :show-custom-column="false"
                        ref="htTable"
                        highlight-current-row
                        @row-click="rowClick"
                    >
                        <template>
                            <ht-table-column
                                label="名称"
                                prop="name"
                                :sortable="true"
                                :show-overflow-tooltip="true"
                            >
                                <template v-slot="{row}">
                                    <el-link
                                        @click="preview(row)"
                                        type="primary"
                                        title="预览"
                                        >{{ row.name }}</el-link
                                    >
                                </template>
                            </ht-table-column>
                            <ht-table-column
                                prop="alias"
                                label="别名"
                                :sortable="true"
                            />
                            <ht-table-column
                                prop="dsType"
                                label="数据来源"
                                width="110"
                                :filters="[
                                    {text: '数据源', value: 'dataSource'},
                                    {text: 'REST接口', value: 'restful'},
                                ]"
                            >
                                <template v-slot="{row}">
                                    <el-tag
                                        type="info"
                                        v-if="row.dsType == 'dataSource'"
                                        >数据源</el-tag
                                    >
                                    <el-tag
                                        type="success"
                                        v-if="row.dsType == 'restful'"
                                        >REST接口</el-tag
                                    >
                                </template>
                            </ht-table-column>
                        </template>
                    </ht-table>
                </el-col>
                <el-col :span="8">
                    <div class="fields-title">
                        选择字段
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="请先选择关联查询，获得其可选的显示值和实际值字段"
                            placement="top-start"
                        >
                            <i class="el-icon-info" style="color: #f56c6c"></i>
                        </el-tooltip>
                    </div>
                    <el-form :model="form" style="margin-top: 26px">
                        <el-form-item label="显示值">
                            <el-select
                                v-model="relationFields.label"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in resultfield"
                                    :key="item.field"
                                    :label="item.field"
                                    :value="item.field"
                                >
                                    <span style="float: left">{{
                                        item.field
                                    }}</span>
                                    <span
                                        style="
                                            float: right;
                                            color: #8492a6;
                                            font-size: 13px;
                                        "
                                        >{{ item.comment }}</span
                                    >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="实际值">
                            <el-select
                                v-model="relationFields.value"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in resultfield"
                                    :key="item.field"
                                    :label="item.field"
                                    :value="item.field"
                                >
                                    <span
                                        style="float: left; font-size: 14px"
                                        >{{ item.field }}</span
                                    >
                                    <span
                                        style="
                                            float: right;
                                            color: #8492a6;
                                            font-size: 13px;
                                        "
                                        >{{ item.comment }}</span
                                    >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </span>
        </el-dialog>
        <customQueryShow ref="customQueryShow"></customQueryShow>
    </div>
</template>

<script>
import portal from '@/api/portal'
import req from '@/request.js'
const customQueryShow = () =>
    import('@/components/ImportExportData/CustomQueryShow.vue')
export default {
    name: 'selectRelative',
    components: {customQueryShow},
    data() {
        return {
            dialogShow: false,
            tableHeight: 300,
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            data: [],
            defaultQuerys: [
                {
                    property: 'flag_',
                    value: 1,
                },
            ],
            querySearch: [
                {
                    label: '名称',
                    prop: 'name_',
                },
                {
                    label: '编码',
                    prop: 'code_',
                },
            ],
            selectRow: {},
            form: {},
            SettingDialogShow: false,
            resultfield: [],
            relationFields: {
                value: '',
                label: '',
            },
        }
    },
    mounted() {
        this.calcTableHeight()
        this.$root.$on('resize', () => {
            this.calcTableHeight(500)
        })
    },
    methods: {
        preview(row) {
            if (!row || !row.alias) {
                this.$message.error(`所要预览的关联查询为空或其别名不存在`)
                return
            }
            const title = `${row.name} - 关联查询预览`
            this.$refs.customQueryShow.showDialog(row.alias, title) //显示自定义对话框列表预览弹框
        },
        rowClick(row) {
            this.currentRow = row
            if (row.resultfield) {
                this.resultfield = JSON.parse(row.resultfield)
            }
        },
        // 加载关联查询
        loadData(param, cb) {
            req.post(window.context.form + '/form/customQuery/v1/list', param)
                .then((response) => {
                    this.data = response.data.rows
                    this.pageResult = {
                        page: response.data.page,
                        pageSize: response.data.pageSize,
                        total: response.data.total,
                    }
                })
                .finally(() => cb())
        },
        handleOk() {
            if (
                (this.relationFields.value && this.relationFields.label) ||
                (!this.relationFields.value && !this.relationFields.label)
            ) {
                this.$emit('change', this.currentRow, this.relationFields)
            } else {
                this.$message.warning('请选择关联查询和字段')
                return
            }
            this.closeDialog()
        },
        openDialog() {
            this.dialogShow = true
        },
        closeDialog() {
            this.relationFields = {
                value: '',
                label: '',
            }
            this.resultfield = []
            this.currentRow = {}
            this.data = []
            this.dialogShow = false
        },
        // 动态计算表格的高度，自适应当前容器
        calcTableHeight(delay) {
            setTimeout(() => {
                this.tableHeight =
                    document.documentElement.clientHeight * 0.9 - 200
            }, delay || 0)
        },
    },
}
</script>

<style>
.fields-title {
    font-size: 16px;
    font-weight: bold;
}
</style>