<template>
    <div>
        <el-button v-if="buttonShow" class="mt5" size="mini" style="color:#1890ff" icon="el-icon-edit-outline" circle
            @click="visibleOpen">
        </el-button>
        <el-dialog title="表格显示设置" :visible.sync="open" width="40%" :close-on-click-modal="false" :show-close="false"
            append-to-body center @close="close">
            <div style="text-align: center">
                <el-transfer style="text-align: left; display: inline-block" :data="transferData"
                    :right-default-checked="rightDefaultChecked" v-model="transferValue" :titles="transferTitle"
                    :props="props" v-loading="transferLoading" @change="change" @right-check-change="rightCheckChange">
                    <template slot="left-footer">
                        <div></div>
                    </template>
                    <template slot="right-footer">
                        <el-button style="margin-left:20px" type="primary" size="mini" icon="el-icon-top"
                            :disabled="updisabled" @click="up">
                        </el-button>
                        <el-button type="primary" size="mini" icon="el-icon-bottom" :disabled="downdisabled"
                            @click="down"></el-button>
                    </template>
                </el-transfer>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getHeaderOrder, saveTableHeader } from "@/api/system/user.js";

export default {
    props: {
        tableName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            transferData: [],//穿梭框数据
            transferValue: [],//已选择数据key
            rightDefaultChecked: [],//右侧复选框选中
            transferTitle: ['未显示列', '已显示列'],
            props: { key: 'id', label: 'columnChineseName' },
            open: false,
            loading: false,
            updisabled: true,
            downdisabled: true,
            buttonShow: true,
            transferLoading: false
        }
    },
    created() {
        if (this.$store.getters.tableHeader) {
            this.buttonShow = true
        } else {
            this.buttonShow = false
        }
    },
    watch: {
        open(val, oldVal) {
            if (val) {
                this.transferData = this.$store.getters.tableHeader[this.tableName]
                this.transferLoading = true
                // 获取用户显示表头
                getHeaderOrder(`tableName=${this.tableName}`).then(res => {
                    this.transferLoading = false
                    if (res.code == 200) {
                        this.transferValue = res.data
                    } else {
                        this.msgwarning(res.msg)
                    }
                }).catch(err => {
                    this.transferLoading = false
                    console.log(err)
                })
            }
        }
    },
    methods: {
        // 确定
        submit() {
            this.loading = true
            let obj = this.$store.getters.tableHeader
            // 保存设置
            saveTableHeader({ tableName: this.tableName, idList: this.transferValue }).then(res => {
                if (res.code === 200) {
                    obj[this.tableName] = res.data
                    this.$store.dispatch('SavetableHeader', obj)
                    this.msgSuccess('操作成功')
                    this.close(1)
                } else {
                    this.msgWarning(res.msg)
                }
                this.$nextTick(() => {
                    this.loading = false
                })
            }).catch(err => {
                this.loading = false
                console.log(err)
            })
        },
        //dialog开启
        visibleOpen() {
            this.open = true
        },
        // transferChange
        change(val) {
            let arr = []
            let status0 = []
            this.transferValue = val
            this.transferData.forEach((item, i) => {
                if (!this.transferValue.includes(item.id)) {
                    status0.push(item)
                } else {
                    this.transferValue.forEach((vals, index) => {
                        if (vals == item.id) {
                            arr.push(item)
                        }
                    })
                }
            })
            this.transferData = arr.concat(status0)
            this.rightDefaultChecked = []
            this.updisabled = true
            this.downdisabled = true
        },
        //右侧选中，上下移动按钮状态设置
        rightCheckChange(val) {
            this.rightDefaultChecked = val
            if (val.length == 1) {
                if (this.transferValue.length > 1) {
                    this.transferValue.forEach((item, index) => {
                        if (item === val[0]) {
                            if (index === 0) {
                                this.updisabled = true
                                this.downdisabled = false
                            } else if (index === this.transferValue.length - 1) {
                                this.updisabled = false
                                this.downdisabled = true
                            } else {
                                this.updisabled = false
                                this.downdisabled = false
                            }
                        }
                    })
                }
            } else {
                this.updisabled = true
                this.downdisabled = true
            }
        },
        //当前数据整理
        tableHeadersSort() {
            let arr = []
            let status0 = []
            this.transferData.forEach((item, i) => {
                if (!this.transferValue.includes(item.id)) {
                    status0.push(item)
                } else {
                    this.transferValue.forEach((val, index) => {
                        if (val == item.id) {
                            arr[index] = item
                        }
                    })
                }
            })
            arr = arr.concat(status0)
            this.transferData = arr
        },
        //右侧单条数据上移
        up() {
            if (!this.updisabled) {
                let str = ''
                this.transferValue.forEach((item, index) => {
                    if (item == this.rightDefaultChecked[0]) {
                        str = item
                        this.transferValue[index] = this.transferValue[index - 1]
                        this.transferValue[index - 1] = str
                        return
                    }
                })
                this.tableHeadersSort()
                this.rightCheckChange([str])
            }
        },
        //右侧单条数据下移
        down() {
            if (!this.downdisabled) {
                let str = ''
                let int = 1
                this.transferValue.forEach((item, index) => {
                    if (item == this.rightDefaultChecked[0] && int === 1) {
                        str = item
                        this.transferValue[index] = this.transferValue[index + 1]
                        this.transferValue[index + 1] = str
                        int++
                        return
                    }
                })
                this.tableHeadersSort()
                this.rightCheckChange([str])
            }
        },
        //dialog关闭
        close(val) {
            this.rightDefaultChecked = []
            this.updisabled = true
            this.downdisabled = true
            this.open = false
            this.$emit('close', val)
        }
    }
}
</script>

<style lang="scss">
.el-transfer-panel__body.is-with-footer {
    padding-bottom: 0px;
    margin-bottom: 40px
}

.el-transfer {
    .el-transfer-panel {
        width: 220px;

        .el-transfer-panel__list {
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .el-transfer-panel__list::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .el-transfer-panel__list::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }
    }

    .el-transfer__buttons {
        .el-button {
            display: block;
            padding: 9px 15px;
            font-size: 12px;
            border-radius: 3px;
        }

        .el-button+.el-button {
            margin-left: 0px
        }
    }

}
</style>