<template>
    <DialogBase
        :before-ok="beforeOk"
        :loading="loading"
        :styles="styles"
        @on-ok="onOk"
        ref="modal"
    >
        <Transfer
            :data="transferData"
            :filter-placeholder="filterPlaceHolder"
            :filterable="showFilter"
            :list-style="listStyle"
            :target-keys="targetKeys"
            :titles="title"
            @on-change="onChange"
            @on-selected-change="onSelectedChange"
            ref="transfer"
            style="text-align: center;"
        ></Transfer>
    </DialogBase>
</template>
<script>
import DataApi from '../../data/common-allocation'
import DialogBase from './modal-pane'
export default {
    name: 'CommonAllocation',
    data() {
        return {
            transferData: [],
            targetKeys: [],
            multiSelectable: true,
            showFilter: true,
            title: [],
            loading: true,
            filterPlaceHolder: '',
            styles: {
                width: '760px',
                height: '500px',
                top: '30px'
            },
            listStyle: {
                height: '400px',
                width: '260px'
            },
            key: '',
            label: '',
            caption: '分配'
        }
    },

    components: {
        DialogBase
    },

    props: {
        conf_guid: {
            type: String,
            required: true
        },
        rowData: Object
    },

    watch: {
        targetKeys: {
            handler(val) {
                if (val.length === 1 && !this.multiSelectable) {
                    this.transferData.forEach(item => {
                        if (val[0] !== item.key) {
                            item.disabled = true
                        }
                    })
                } else {
                    this.transferData.forEach(item => {
                        item.disabled = false
                    })
                }
            },
            immediate: true
        },

        multiSelectable: {
            handler(val) {
                if (!val) {
                    this.$nextTick(() => {
                        let nodeList = this.$refs.transfer.$el.querySelectorAll(
                            '.ivu-transfer-list-header .ivu-checkbox-wrapper'
                        )
                        nodeList.forEach(node => {
                            node.style.display = 'none'
                        })
                    })
                }
            },
            immediate: true
        }
    },

    mounted() {
        // this.$refs.transfer.leftCheckedKeys = ['3']
        this.loadConf()
    },

    methods: {
        beforeOk() {
            return false
        },

        onChange(newTargetKeys) {
            this.targetKeys = newTargetKeys
        },

        onSelectedChange(sourceSelectedKeys, targetSelectedKeys) {
            if (!this.multiSelectable) {
                let leftCheckedKeys = this.$refs.transfer.leftCheckedKeys
                let key = leftCheckedKeys.pop()
                if (key !== undefined)
                    this.$refs.transfer.leftCheckedKeys = [key]
                else this.$refs.transfer.leftCheckedKeys = []
            }
        },

        loadConf() {
            let conf_guid = this.conf_guid
            let data_guid = this.rowData.guid
            let params = {
                conf_guid,
                data_guid
            }
            DataApi.loadConf(params, this.rowData).then(res => {
                let data = res.conf
                this.caption = data.caption
                this.multiSelectable = data.multiSelectable
                this.filterPlaceHolder = data.filterPlaceHolder
                this.showFilter = data.showFilter
                this.title = data.titles.split(',')
                this.key = data.key
                this.label = data.label
                if (this.key) {
                    this.transferData = res.data.map(item => {
                        let obj = Object.assign({}, item)
                        obj.key = obj[this.key].toString()
                        obj.label = obj[this.label]
                        return obj
                    })
                } else this.transferData = res.data
                this.targetKeys = res.selected
            })
        },

        onOk() {
            let conf_guid = this.conf_guid
            let data = null
            if (this.key) {
                data = this.transferData.filter(item => {
                    return this.targetKeys.includes(item.key)
                })
            } else data = this.targetKeys

            let data_guid = this.rowData.guid
            let params = {
                conf_guid,
                data_guid
            }
            let json = {
                selectData: data,
                rowData: this.rowData
            }
            DataApi.saveData(params, json)
                .then(res => {
                    this.$Message.success('保存成功')
                    this.handleLoading()
                    this.$refs.modal.remove()
                    this.onOkCb()
                })
                .catch(() => {
                    this.handleLoading()
                })
        },

        handleLoading() {
            this.loading = false
            this.$nextTick(() => {
                this.loading = true
            })
        }
    }
}
</script>
<style lang="less" scoped>
/deep/.ivu-transfer-list {
    height: 300px;
    text-align: left;
}
// 过长时换行
/deep/.ivu-transfer-list-content-item {
    white-space: normal!important;
    display: flex;
    align-items: flex-start;
}
</style>
