<template>
    <BaseModal
        :loading="false"
        :styles="styles"
        :title="title"
        :fullscreen="false"
        @on-ok="onOk"
        class-name="modal-table"
        ref="modal"
    >
        <FilterPane
            :f="f"
            @on-filter="onFilter"
            v-if="showFilter"
        ></FilterPane>
        <div style="width: 100%;">
            <VTable
                ref="table"
                :column-cell-class-name="columnCellClass"
                :columns="tableColumns"
                :height="250"
                :is-horizontal-resize="true"
                :is-loading="isLoading"
                :is-vertical-resize="true"
                :paging-index="(pageIndex-1)*pageSize"
                :row-click="select"
                :select-all="selectChange"
                :select-change="selectChange"
                :show-horizontal-border="true"
                :table-data="data"
                :vertical-resize-offset="48"
                row-click-color="#edf7ff"
                row-hover-color="#eee"
                style="width:100%"
                title-bg-color="#f8f8f9"
            ></VTable>
        </div>
        <div class="modal-page">
            <v-pagination
                :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
                :page-size="pageSize"
                :pageSizeOption="[5, 10, 20, 30, 50]"
                :total="total"
                @page-change="pageChange"
                @page-size-change="pageSizeChange"
            ></v-pagination>
        </div>
        <!-- <Table border highlight-row ref="selection" @on-current-change="select" :columns="columns" :data="data"></Table> -->
    </BaseModal>
</template>
<script>
import FilterPane from './filter-pane'
import BaseModal from '../base-modal'
import Data from '@/data/grid-sql'
import VTable from '../../v-table/v-table/index'
import VPagination from '../../v-table/v-pagination/index'
export default {
    name: 'ModalTable',
    components: {
        FilterPane,
        VTable,
        VPagination,
        BaseModal
    },
    data() {
        return {
            selectedRows: '',
            selectedMulRows: '',
            pageSize: 5,
            pageIndex: 1,
            total: 0,
            filterDatas: [],
            data: [],
            tableColumns: [],
            isLoading: true,
            f: []
        }
    },

    props: {
        title: {
            type: String
        },

        styles: {
            type: Object,
            default() {
                return {
                    width: '600px',
                    height: '400px',
                    top: '20px'
                }
            }
        },

        guid: {
            type: String
        },

        // 非必须，若无guid加载此column
        columns: {
            type: Array
        },

        showFilter: {
            type: Boolean,
            default: false
        },

        keyCode: {
            type: String
        },

        value: {
            type: String | Number
        },

        selectType: {
            type: String,
            default: 'single'
        },

        filterValue: String,
        filterCode: String,
        noColumn: String
    },

    mounted() {
        this.loadData()
    },

    methods: {
        //设置选中效果
        columnCellClass(rowIndex, columnName, rowData) {
            if (
                !this.selectedRows &&
                rowData[this.keyCode] === this.value &&
                this.selectType === 'single'
            ) {
                return 'column-cell-check'
            }
        },

        onOk() {
            if (this.selectType === 'single') this.onOkCb(this.selectedRows)
            else this.onOkCb(this.selectedMulRows)
        },

        select(val, row) {
            this.selectedRows = row
        },

        async onFilter(key, val, index) {
            this.isLoading = true
            let _where = this.getWhere(key, val, index)
            _where = [_where]
            await this.queryData(_where)
            this.isLoading = false
        },

        async pageChange(pageIndex) {
            this.isLoading = true
            this.pageIndex = pageIndex
            await this.queryData()
            this.isLoading = false
        },

        async pageSizeChange(pageSize) {
            this.isLoading = true
            this.pageIndex = 1
            this.pageSize = pageSize
            await this.queryData()
            this.isLoading = false
        },

        // checkbox触发函数
        selectChange(selection, rowData) {
            this.selectedMulRows = selection
        },

        getWhere(key, value, index) {
            let obj = {
                code: key,
                op: this.f[index].operator,
                type: this.f[index].type,
                value
            }
            return obj
        },

        queryData(where) {
            let _where = where || []
            if (this.filterCode) {
                let filter = {
                    op: 'equal',
                    type: 'String',
                    code: this.filterCode,
                    value: this.filterValue
                }
                _where.push(filter)
            }
            let params = {
                guid: this.guid,
                with_total: true,
                page_index: this.pageIndex,
                page_size: this.pageSize,
                _where: JSON.stringify(_where)
            }
            return new Promise((resolve, reject) => {
                Data.queryData('/data-service', params)
                    .then(res => {
                        this.data = res.data
                        this.total = res.total
                        resolve()
                    })
                    .catch(err => {
                        console.log(err)
                    })
            })
        },

        handleColumns (columns) {
            let tableColumns = []
            tableColumns = columns.map(item => {
                return {
                    title: item.caption,
                    field: item.code,
                    titleAlign: 'center',
                    columnAlign: item.align ? item.align.toLowerCase() : 'center',
                    width: item.width || 100,
                    isResize: true
                }
            })

            // 删除不需展示的column
            if (this.noColumn) {
                let noColumns = this.noColumn.split(',')
                tableColumns = tableColumns.filter(item => {
                    let isTrue = true
                    for (let i in noColumns) {
                        if (item.field === noColumns[i]) {
                            isTrue = false
                            break
                        }
                    }
                    return isTrue
                })
            }
            
            if (this.selectType === 'mutiple') {
                tableColumns.unshift({width: 60, titleAlign: 'center',columnAlign:'center',type: 'selection'})
            }
            return tableColumns
        },

        queryConfig () {
            return new Promise((resolve, reject) => {
                Data.queryConfig('/data-service', this.guid).then(res => {
                    this.tableColumns = this.handleColumns(res.columns)
                    this.f = res.filters
                    resolve(res)
                }).catch(err => {
                    console.log(err)
                })
            })
        },

        async loadData () {
            if (!this.guid) {
                this.tableColumns = this.columns
            } else {
                await this.queryConfig()
            }
            await this.queryData()
            this.isLoading = false
        }
    }
}
</script>
<style lang="less">
.modal-page {
    margin-top: 10px;
}

.column-cell-check {
    background: #edf7ff;
}

.modal-table .v-table-body-cell span {
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: normal;
    overflow-y: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    &::-webkit-scrollbar {
        width: 0 !important;
    }
}
</style>
