<template>
    <el-dialog :title="promptData.title" :visible.sync="show"
                custom-class="grid-ety"
                :highlight-current-row="true"
                width="60%"
                :before-close="beforeClose">
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                border
                @row-dblclick="selectEty">
            <el-table-column v-for="(item,idx) in tableColumn" :key="idx" 
                :property="item.prop" 
                :label="item.label" 
                :width="item.width">
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next, total, jumper"
            :total="tableData.length"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            >
        </el-pagination>
    </el-dialog>
</template>

<script>
export default {
    props: {
        promptData: {
            required: true,
            type: Object,
            default: () => {
                return {
                    title: '',
                    columnStr: '',
                    data: [],
                    rulePath: ''
                }
            }
        }
    },
    data() {
        return {
            show: false,
            currentPage: 1,
			pageSizes: [5, 10, 20, 30, 40, 50, 100],
			pageSize: 5
        }
    },
    computed: {
        tableColumn() {
            return this.dealExtKeyTableColumn()
        },
        tableData() {
            return this.dealExtKeyTableData()
        }
    },
    methods: {
        dealExtKeyTableColumn() {
            const columnArr = []
            const lines = this.promptData.columnStr.split("\r\n")
            const etyReg = /\"([^\"]*)\"/
            const obj = {}
            for (let i = 0; i < lines.length; i++) {
                let line = lines[i];
                line = line.replace(/Quote/g, "\"");
                if (etyReg.test(line)) {
                    const gs = line.match(etyReg)
                    const columnName = gs[1]
                    const newLine = line.replace(gs[0], " _ ")
                    const colPropArr = newLine.split(/\s+/)
                    const positionArr = colPropArr[1].split(":")
                    if (!obj[positionArr[0]]) {
                        obj[positionArr[0]] = []
                    }
                    obj[positionArr[0]].push({
                        idx: colPropArr[0],
                        prop: columnName,
                        width: colPropArr[3]
                    })
                }
            }
            for (const k in obj) {
                if (Object.hasOwnProperty.call(obj, k)) {
                    const o = obj[k];
                    const tableColumn = o.map(item => item.prop).join("\n")
                    columnArr.push({
                        prop: tableColumn,
                        label: tableColumn,
                        // width: o[0].width,
                        width: "auto",
                        index: k,
                        children: o
                    })
                }
            }
            return columnArr.sort((a,b) => {
                return parseInt(a.index) - parseInt(b.index)
            })
        },
        dealExtKeyTableData() {
            const arr = []
            for (let i = 0; i < this.promptData.data.length; i++) {
                const d = this.promptData.data[i];
                const items = d.split("\t")
                const it = {}
                for (let j = 0; j < this.tableColumn.length; j++) {
                    const column = this.tableColumn[j];
                    it[column['prop']] = column.children.map(c => items[c['idx']] || " ").join("\n")
                }
                it['IDX'] = i
                arr.push(it)
            }
            return arr
        },
        currentChange(currentPage) {
			this.currentPage = currentPage;
		},
        selectEty(row, column, event) {
            // 默认第一列
            const v = row[this.tableColumn[0].prop].split("\n")[0]
            this.$emit("select-ety", v, this.promptData.rulePath)
            this.show = false;
            this.currentPage = 1;
        },
        beforeClose(done) {
            this.show = false;
            this.currentPage = 1;
            done()
        }
    }
}
</script>

<style>
.grid-ety .el-table .cell{
    white-space: pre-wrap;
}
</style>