<template>
    <el-dialog
        :title="title"
        width="1000px"
        top="5vh"
        :visible.sync="dialogShow"
        @close="closeDialog"
    >
        <el-row :gutter="10">
            <el-col :span="12">
                <div class="head-content no-margin">字段列表</div>
                <el-table
                    ref="allFieldsTable"
                    :data="data"
                    border
                    stripe
                    v-loading="loading"
                    :height="tableHeight"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="40">
                    </el-table-column>
                    <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="50"
                    ></el-table-column>
                    <el-table-column
                        label="字段名称"
                        align="center"
                        prop="fieldName"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        label="字段注释"
                        align="center"
                        prop="fieldComments"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        label="字段类型"
                        align="center"
                        prop="dataType"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <div class="head-content no-margin">已选字段</div>
                <el-table
                    :data="selectData"
                    border
                    stripe
                    :height="tableHeight"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="50"
                    ></el-table-column>
                    <el-table-column
                        label="字段名称"
                        align="center"
                        prop="fieldName"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        label="字段注释"
                        align="center"
                        prop="fieldComments"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="60">
                        <template slot-scope="scope">
                            <el-button
                                circle
                                type="danger"
                                icon="el-icon-delete"
                                @click="handleDelFields(scope.row)"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </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>
</template>

<script>
import portal from '@/api/portal'
export default {
    name: 'AddFields',
    props: {
        // 页面组件别名
        bizCode: {
            type: String,
            default: '',
            required: true,
        },
        type: {
            type: String,
            default: 'import',
            required: true,
        },
        originAPIOptions: {
            type: Object,
            default: () => {},
            required: true,
        },
        dataBaseOptions: {
            type: Object,
            default: () => {},
            required: true,
        },
    },
    data() {
        return {
            dialogShow: false,
            tableHeight: 300,
            currentPage: 1,
            total: 0,
            multipleSelection: [],
            data: [],
            selectFields: [],
            selectData: [],
            data1: [],
            data2: [],
            loading: false
        }
    },
    mounted() {
        this.calcTableHeight()
        this.$root.$on('resize', () => {
            this.calcTableHeight(500)
        })
    },
    computed: {
        title() {
            if (this.type == 'import') {
                return '导入模板添加字段'
            } else {
                return '导出模板添加字段'
            }
        },
    },
    methods: {
        // tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)
        handleCurrentChange(current) {
            console.log(current, 'current')
            this.data = this[`data${current}`]
            this.$nextTick(() => {
                this.$refs.allFieldsTable.clearSelection()
                this.data.forEach((element) => {
                    if (this.selectFields.includes(element.fieldName)) {
                        console.log(element)
                        console.log(this.$refs)
                        this.$nextTick(() => {
                            this.$refs.allFieldsTable.toggleRowSelection(
                                element,
                                true
                            )
                        })
                    }
                })
            })
        },
        loadData() {
            this.loading = true
            if (this.type == 'import') {
                let data = {
                    dataBaseId: this.dataBaseOptions.dataBaseId,
                    tableName: this.dataBaseOptions.tableName,
                    tableSchema: this.dataBaseOptions.tableSchema,
                }
                let params = this.qs.stringify(data)
                portal.getAllImportFields(params).then((res) => {
                    res.forEach((item) => {
                        item.fieldName = item.columnName
                        item.fieldComments = item.columnComment
                    })
                    this.data = res
                    console.log(res)
                }).finally(()=>{
                    this.loading = false
                })
            } else if (this.type == 'export') {
                let params = {
                    originAPIOptions: this.originAPIOptions,
                    bizCode: this.bizCode,
                }
                console.log(params, 'params')
                portal.getAllExportFields(params).then((res) => {
                    let index = res.indexOf(']')
                    let resData = JSON.parse(res.slice(0, index + 2)).fields
                    if (Array.isArray(resData)) {
                        resData.forEach((item) => {
                            item.fieldName = item.fieldName
                            item.fieldComments = item.fieldDesc
                        })
                        this.data = resData
                    }
                }).finally(()=>{
                    this.loading = false
                })
            }
        },
        openDialog() {
            this.dialogShow = true
            this.loadData()
        },
        closeDialog() {
            this.dialogShow = false
            this.data = []
            this.selectFields = []
            this.selectData = []
        },
        handleOk() {
            this.$emit('addFiedls', this.selectData)
            this.closeDialog()
        },
        handleSelectionChange(selection) {
            selection.forEach((element) => {
                if (!this.selectFields.includes(element.fieldName)) {
                    this.selectFields.push(element.fieldName)
                    this.selectData.push(element)
                }
            })
        },
        handleDelFields(row) {
            this.selectData = this.selectData.filter(
                (item) => item.fieldName !== row.fieldName
            )
            this.selectFields = this.selectFields.filter(
                (item) => item !== row.fieldName
            )
        },
        // 动态计算表格的高度，自适应当前容器
        calcTableHeight(delay) {
            // let gap = this.type == 'import' ? 206 : 236
            let gap = 200
            setTimeout(() => {
                this.tableHeight =
                    document.documentElement.clientHeight * 0.9 - gap
            }, delay || 0)
        },
    },
}
</script>

<style lang='scss' scoped>
>>> .el-dialog__body {
    padding-top: 0px;
}
.sort-icon {
    font-size: 16px;
    vertical-align: middle;
}
.dt-button-group {
    margin-bottom: 20px;
}
.head-content {
    margin-bottom: 15px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0;
}
</style>