<template>
    <div class="common-table-alloc">
        <div class="common-table-alloc__table-con">
            <h3 class="common-table-alloc__left-header">{{titles[0]}}</h3>
            <div>
                <FilterPane
                    :options="options"
                    @on-filter="filterLeft"
                    ref="filterLeft"
                />
            </div>
            <div class="common-table-alloc__table">
                <v-table
                    :columns="column"
                    :height="heightLeft"
                    :paging-index="(pageIndexLeft-1)*pageSizeLeft"
                    :row-height="32"
                    :select-all="selectLeft"
                    :select-change="selectLeft"
                    :table-data="leftItems"
                    :is-horizontal-resize="true"
                    :width="432"
                    style="width:100%"
                    class="table"
                ></v-table>
                <v-pagination
                    :layout="['total', 'prev', 'next', 'sizer', 'jumper']"
                    :page-size="pageSizeLeft"
                    :total="totalLeft"
                    @page-change="pageLeftChange"
                    @page-size-change="pageSizeLeftChange"
                    class="pagination"
                    v-if="pagerLeft"
                ></v-pagination>
            </div>
        </div>
        <div class="common-table-alloc__drop">
            <Button
                :disabled="readonly || leftSelection.length === 0"
                @click="dropRight"
                icon="ios-arrow-forward"
                style="margin-bottom: 10px;"
                type="primary"
            ></Button>
            <Button
                :disabled="readonly || rightSelection.length === 0"
                @click="dropLeft"
                icon="ios-arrow-back"
                type="primary"
            ></Button>
        </div>
        <div class="common-table-alloc__table-con">
            <h3 class="common-table-alloc__right-header">{{titles[1]}}</h3>
            <div>
                <FilterPane
                    :options="options"
                    @on-filter="filterRight"
                    ref="filterRight"
                />
            </div>
            <div class="common-table-alloc__table">
                <v-table
                    :columns="column"
                    :height="heightRight"
                    :paging-index="(pageIndexRight-1)*pageSizeRight"
                    :row-height="32"
                    :select-all="selectRight"
                    :select-change="selectRight"
                    :table-data="rightItems"
                    :is-horizontal-resize="true"
                    :width="432"
                    style="width:100%"
                    class="table"
                ></v-table>
                <v-pagination
                    :layout="['total', 'prev', 'next', 'sizer', 'jumper']"
                    :page-size="pageSizeRight"
                    :total="totalRight"
                    @page-change="pageRightChange"
                    @page-size-change="pageSizeRightChange"
                    class="pagination"
                    v-if="pagerRight"
                ></v-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import FilterPane from './filter-pane'
import DataApi from '../../data/common-table-transfer'

/*选择框列*/
const SELECT_COLUMN = {
    titleCellClassName: 'title',
    field: '__selection',
    width: 32,
    columnAlign: 'center',
    type: 'selection',
    isFrozen: true,
    isResize: false
}

export default {
    name: 'CommonTableAllocation',
    components: {
        FilterPane
    },
    data() {
        return {
            // 弹窗保存loading
            loading: true,
            modalSwitch: true,
            // 左边选中项
            leftSelection: [],
            // 右边选中项
            rightSelection: [],
            leftData: [],
            rightData: [],
            leftLoading: true,
            rightLoading: true,
            column: [],
            pagerLeft: false,
            pagerRight: false,
            titles: ['未选项', '已选项'],
            // 筛选框过滤条件
            options: [],
            pageIndexLeft: 1,
            pageSizeLeft: 10,
            totalLeft: 0,
            pageIndexRight: 1,
            pageSizeRight: 10,
            totalRight: 0,

            leftFilter: {},
            rightFilter: {}
        }
    },

    props: {
        conf_guid: {
            type: String
        },

        rowData: Object,

        /**
         * 是否只读
         */
        readonly: {
            type: Boolean,
            default: false
        },

        /**
         * 是否自动初始化
         */
        autoInit: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        this.queryConfig(() => {
            if (this.autoInit) {
                this.reload()
            }
        })
    },

    computed: {
        heightLeft() {
            if (this.pagerLeft) {
                return 230
            } else {
                return 264
            }
        },
        heightRight() {
            if (this.pagerRight) {
                return 230
            } else {
                return 264
            }
        },
        leftItems() {
            if (this.pagerLeft) {
                return this.leftData
            } else {
                if (this.leftFilter.field && this.leftFilter.value) {
                    return this.leftData.filter(item => {
                        return (
                            item[this.leftFilter.field].indexOf(
                                this.leftFilter.value
                            ) !== -1
                        )
                    })
                } else {
                    return this.leftData
                }
            }
        },

        rightItems() {
            if (this.pagerLeft) {
                return this.rightData
            } else {
                if (this.rightFilter.field && this.rightFilter.value) {
                    return this.rightData.filter(item => {
                        return (
                            item[this.rightFilter.field].indexOf(
                                this.rightFilter.value
                            ) !== -1
                        )
                    })
                } else {
                    return this.rightData
                }
            }
        }
    },

    methods: {
        queryConfig(cb) {
            DataApi.queryConfig(this.conf_guid).then(res => {
                let column = res.columns.map(item => {
                    this.options.push({
                        guid: item.code,
                        name: item.title
                    })

                    let c = {
                        title: item.title,
                        width: item.width,
                        field: item.code,
                        titleCellClassName: 'title',
                        columnAlign: item.align,
                        isResize: true
                    }

                    return c
                })
                if (this.readonly) {
                    this.column = column
                } else {
                    this.column = [SELECT_COLUMN].concat(column)
                }

                this.titles = res.titles.split(',')
                this.pagerLeft = res.pagerLeft
                this.pagerRight = res.pagerRight

                if (!this.pagerLeft) {
                    this.pageSizeLeft = 99999
                }

                if (!this.pagerRight) {
                    this.pageSizeRight = 99999
                }

                cb()
            })
        },

        queryUnSelectData(pageIndex = 1, filter = {}) {
            let modelUnSelect = {
                confGuid: this.conf_guid,
                rowData: this.rowData,
                type: 'unSelected',
                pager: {
                    pageIndex,
                    pageSize: this.pageSizeLeft
                },
                filter
            }

            DataApi.queryData(modelUnSelect).then(res => {
                this.leftData = res.data
                this.totalLeft = res.total
                this.leftSelection = []
            })
        },

        querySelectData(pageIndex = 1, filter = {}) {
            let modelSelect = {
                confGuid: this.conf_guid,
                rowData: this.rowData,
                type: 'selected',
                pager: {
                    pageIndex,
                    pageSize: this.pageSizeRight
                },
                filter
            }

            DataApi.queryData(modelSelect).then(res => {
                this.rightData = res.data
                this.totalRight = res.total
                this.rightSelection = []
            })
        },

        filterLeft(field, value) {
            this.leftFilter = {
                field,
                value
            }

            if (this.pagerLeft) {
                this.pageIndexLeft = 1
                this.queryUnSelectData(1, this.leftFilter)
            } else {
                this.leftSelection = []
            }
        },

        filterRight(field, value) {
            this.rightFilter = {
                field,
                value
            }
            if (this.pagerLeft) {
                this.pageIndexRight = 1
                this.querySelectData(1, this.rightFilter)
            } else {
                this.rightSelection = []
            }
        },

        saveSelect(type) {
            let data = []
            if (type === 'selected') {
                data = this.leftSelection.map(item => {
                    return item.guid
                })
            } else {
                data = this.rightSelection.map(item => {
                    return item.guid
                })
            }
            let model = {
                confGuid: this.conf_guid,
                rowData: this.rowData,
                type,
                data
            }
            console.log(model)
            return DataApi.saveSelect(model)
        },

        async dropRight() {
            if (!this.leftSelection.length) {
                this.$Message.error('请先选中数据')
                return
            }

            if (this.pagerLeft) {
                await this.saveSelect('selected')
                this.leftSelection = []
                this.$refs.filterRight.clearValue()
                this.querySelectData()
                this.queryUnSelectData()
            } else {
                let tmpLeft = []
                let tmpRight = []
                this.leftData.forEach(item => {
                    let index = this.leftSelection.findIndex(i => {
                        return i.guid === item.guid
                    })

                    if (~index) {
                        tmpRight.push(item)
                    } else {
                        tmpLeft.push(item)
                    }
                })

                this.leftSelection = []
                this.leftData = tmpLeft
                this.rightData.splice(0, 0, ...tmpRight)
            }
        },

        async dropLeft() {
            if (!this.rightSelection.length) {
                this.$Message.error('请先选中数据')
                return
            }

            if (this.pagerLeft) {
                await this.saveSelect('unSelected')
                this.rightSelection = []
                this.$refs.filterLeft.clearValue()
                this.querySelectData()
                this.queryUnSelectData()
            } else {
                let tmpLeft = []
                let tmpRight = []

                this.rightData.forEach(item => {
                    let index = this.rightSelection.findIndex(i => {
                        return i.guid === item.guid
                    })

                    if (~index) {
                        tmpLeft.push(item)
                    } else {
                        tmpRight.push(item)
                    }
                })

                this.rightSelection = []
                this.rightData = tmpRight
                this.leftData.splice(0, 0, ...tmpLeft)
            }
        },

        // 选中左边数据
        selectLeft(selection) {
            this.leftSelection = selection
        },

        selectRight(selection) {
            this.rightSelection = selection
        },

        pageLeftChange(pageIndex) {
            this.queryUnSelectData(pageIndex)
        },

        pageSizeLeftChange(pageSize) {
            this.pageSizeLeft = pageSize
            this.queryUnSelectData()
        },

        pageRightChange(pageIndex) {
            this.querySelectData(pageIndex)
        },

        pageSizeRightChange(pageSize) {
            this.pageSizeRight = pageSize
            this.querySelectData()
        },

        /**
         * 获取选择的所有Guid
         */
        getSelectedGuids() {
            return this.rightData.map(item => {
                return item.guid
            })
        },

        /**
         * 查询选择所有的未选数据
         */
        queryAndSelectAll() {
            let modelUnSelect = {
                confGuid: this.conf_guid,
                rowData: this.rowData,
                type: 'unSelected',
                pager: {
                    pageIndex: 1,
                    pageSize: this.pageSizeLeft
                },
                filter: {}
            }

            DataApi.queryData(modelUnSelect).then(res => {
                this.leftData = []
                this.leftSelection = []

                this.rightData = res.data
                this.rightSelection = []
            })
        },

        /**
         * 重新加载
         */
        reload() {
            this.queryUnSelectData()
            this.querySelectData()
        }
    }
}
</script>
<style lang="less">
.common-table-alloc {
    display: flex;
    justify-content: center;

    &__left-header {
        height: 18px;
        line-height: 18px;
        margin-bottom: 8px;
        border-left: 4px solid red;
        padding-left: 8px;
    }

    &__right-header {
        height: 18px;
        line-height: 18px;
        margin-bottom: 8px;
        padding-left: 8px;
        border-left: 4px solid #3a84f7;
    }

    &__drop {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        align-items: center;
        justify-content: center;
    }

    &__table-con {
    }

    &__table {
        width: 432px;
        margin: 5px 0;
        height: 264px;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .table {
            flex: 1;
            width: 100%;
        }

        .pagination {
            margin-top: 4px;
            height: 34px;
        }
    }

    .title {
        text-align: center;
        background-color: #eee;
    }
}
</style>
