<template>
    <el-dialog :title="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: ["title", "columnStr", "data", "type", "rulePath"],
    data() {
        return {
            show: false,
            currentPage: 1,
			pageSizes: [5, 10, 20, 30, 40, 50, 100],
			pageSize: 5
        }
    },
    computed: {
        tableColumn() {
            if (this.type === "extkey") {
                return this.dealExtKeyTableColumn()
            } else if (this.type === "bankno") {
                return this.dealBanknoTableColumn()
            }
            return []
        },
        tableData() {
            if (this.type === "extkey") {
                return this.dealExtKeyTableData()
            } else if (this.type === "bankno") {
                return this.dealBanknoTableData()
            }
            return []
        }
    },
    methods: {
        dealExtKeyTableColumn() {
            const columnArr = []
            const lines = this.columnStr.split("\r\n")
            // 1 7:1 QuoteBranch codeQuote 150 50\r\n
            const etyReg = /Quote(\w*\s?\w*)Quote/
            const obj = {}
            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                if (etyReg.test(line)) {
                    const gs = line.match(etyReg)
                    const columnName = gs[1]
                    const newLine = line.replace(gs[0], "_")
                    const colPropArr = newLine.split(" ")
                    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.data.length; i++) {
                const d = this.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
        },
        dealBanknoTableColumn() {
            const columnArr = []
            const lines = this.columnStr.split("\r\n")
            // 0 1 \"联行行号\"120\r\n
            const etyReg = /\"([^\"]*)\"/
            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                if (etyReg.test(line)) {
                    const gs = line.match(etyReg)
                    const columnName = gs[1]
                    const newLine = line.replace(gs[0], "_ ")
                    const colPropArr = newLine.split(" ")
                    columnArr.push({
                        idx: colPropArr[0],
                        prop: columnName,
                        label: columnName,
                        // width: colPropArr[3],
                        width: "auto",
                    })
                }
            }
            return columnArr
        },
        dealBanknoTableData() {
            const arr = []
            for (let i = 0; i < this.data.length; i++) {
                const d = this.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']] = items[column['idx']]
                }
                it['IDX'] = i
                arr.push(it)
            }
            return arr
        },
        currentChange(currentPage) {
			this.currentPage = currentPage;
		},
        selectEty(row, column, event) {
            // const str = this.data[row.IDX]
            // let v = "";
            // if (this.type === 'extkey') {
            //     v = str.split("\t")[4].trim()
            // } else if (this.type === 'bankno') {
            //     v = str.split("\t")[0].trim()
            // }
            const v = row[this.tableColumn[0].prop].split("\n")[0]
            this.$emit("select-ety", v, this.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>