<template>
    <div class="directional-logic-content">
        <div v-if="multitype === 'all'" class="tree-select-class">
            <div class="select-class-left">
                <a-tabs v-model="selectPackageTabs" @change="handleTabsChange">
                    <a-tab-pane key="1" tab="定向池">
                        <a-input-search class="input-search" v-model="directInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'all', 'direct')" />
                        <a-table
                            :columns="columns"
                            :data-source="tableDataAllDirect"
                            :row-selection="rowSelectionAllDirect"
                            :scroll="{y: 200}"
                            :pagination="false"
                        >
                            <span slot="acountRelax" slot-scope="text, record">
                                {{ record.name }}({{ record.key }})
                            </span>
                        </a-table>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="排除池">
                        <a-input-search class="input-search" v-model="excludeInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'all', 'exclude')" />
                        <a-table
                            :columns="columns"
                            :data-source="tableDataAllExclude"
                            :row-selection="rowSelectionAllExclude"
                            :scroll="{y: 200}"
                            :pagination="false"
                        >
                            <span slot="acountRelax" slot-scope="text, record">
                                {{ record.name }}(record.key)
                            </span>
                        </a-table>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <div class="select-class-right">
                <div class="class-left-header">
                    已选<span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
                </div>
                <div class="class-left-content">
                    <a-tabs v-model="selectAllRightTabs" @change="handleSelectAllTabs">
                        <a-tab-pane key="3">
                            <span slot="tab">
                                定向（{{ tableSelectDirectIds.length || 0 }}）
                            </span>
                            <div v-if="tableSelectDirectData.length" class="class-left-content">
                                <div class="apply-right-tree" v-for="item in tableSelectDirectData" :key="item.key">
                                    <p class="left-content-p">
                                        <a-tooltip placement="left">
                                            <template slot="title">
                                                <span>{{ item.name }}</span>
                                            </template>
                                            {{ item.name }}
                                        </a-tooltip>
                                    </p>
                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'direct')" />
                                </div>
                            </div>
                            <div v-else class="no-data-class">暂无数据</div>
                        </a-tab-pane>
                        <a-tab-pane key="4">
                            <span slot="tab">
                                排除（{{ tableSelectExcludeIds.length || 0 }}）
                            </span>
                            <div v-if="tableSelectExcludeData.length" class="class-left-content">
                                <div class="apply-right-tree" v-for="item in tableSelectExcludeData" :key="item.key">
                                    <p class="left-content-p">
                                        <a-tooltip placement="left">
                                            <template slot="title">
                                                <span>{{ item.name }}</span>
                                            </template>
                                            {{ item.name }}
                                        </a-tooltip>
                                    </p>
                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'exclude')" />
                                </div>
                            </div>
                            <div v-else class="no-data-class">暂无数据</div>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </div>
        </div>
        <div v-else>
            <a-input-search class="input-search" v-model="aloneInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'alone')" />
            <div class="tree-select-class">
                <div class="select-class-left">
                    <a-table
                        :columns="columns"
                        :data-source="tableDataAlone"
                        :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
                        :scroll="{y: 300}"
                        :pagination="false"
                    >
                        <span slot="acountRelax" slot-scope="text, record">
                            {{ record.name }}(record.key)
                        </span>
                    </a-table>
                </div>
                <div class="select-class-right">
                    <div class="class-left-header">
                        已选（{{ packtype === 'directional' ? '定向' : '排除'}}）
                        <span class="clear-all-tab"><a @click="handleDelAloneAll('alone')">清空</a></span>
                    </div>
                    <div v-if="selectRightData.length" class="class-left-content">
                        <div class="apply-right-tree" v-for="item in selectRightData" :key="item.key">
                            <p class="left-content-p">
                                <a-tooltip placement="left">
                                    <template slot="title">
                                        <span>{{ item.name }}</span>
                                    </template>
                                    {{ item.name }}
                                </a-tooltip>
                            </p>
                            <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'alone')" />
                        </div>
                    </div>
                    <div v-else class="no-data-class">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'directional-logic',
    props: {
        packtype: {
            type: String,
            default: ''
        },
        multitype: {
            type: String,
            default: ''
        },
        valueids: {
            type: String,
            default: ''
        },
        defaultlist: {
            type: Array,
            default: () => {
                return [];
            }
        },
        updatelistinclude: {
            type: Array,
            default: () => {
                return [];
            }
        },
        updatelistexclude: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            aloneInput: '',
            directInput: '',
            excludeInput: '',
            selectPackageTabs: '1',
            selectAllRightTabs: '3',
            selectRightData: [],
            tableSelectIds: [],
            columns: [
                {
                    title: '人群包',
                    dataIndex: 'name',
                    key: 'name',
                    ellipsis: true,
                    scopedSlots: {customRender: 'acountRelax'}
                },
                {
                    title: '属性',
                    dataIndex: 'tag',
                    key: 'tag',
                    width: '30%',
                    ellipsis: true
                },
                {
                    title: '创建时间',
                    dataIndex: 'create_time',
                    width: '30%',
                    key: 'create_time',
                    ellipsis: true
                }
            ],
            tableDataAllDirect: [
                {
                    key: 1,
                    name: '求大城市能促进快下班',
                    age: '系统推荐',
                    address: '2020-12-12'
                },
                {
                    key: 2,
                    name: '好处费对该回复啊花开待夏',
                    age: '系统推荐',
                    address: '2020-12-12'
                }
            ], // 全选-定向数据
            updateTableAllDirect: [
                {
                    key: 1,
                    name: '求大城市能促进快下班',
                    age: '系统推荐',
                    address: '2020-12-12'
                },
                {
                    key: 2,
                    name: '好处费对该回复啊花开待夏',
                    age: '系统推荐',
                    address: '2020-12-12'
                }
            ], // 全选-定向数据-copy
            tableSelectDirectIds: [], // 全选-定向-table选中ID
            tableSelectDirectData: [], // 全选-定向-右侧选中数据
            tableDataAllExclude: [
                {
                    key: 1,
                    name: '差不多不是',
                    age: '系统推荐',
                    address: '2020-12-12'
                },
                {
                    key: 2,
                    name: '很高的一位杰克逊的本质',
                    age: '系统推荐',
                    address: '2020-12-12'
                }
            ], // 全选-排除数据
            updateTableAllExclude: [
                {
                    key: 1,
                    name: '差不多不是',
                    age: '系统推荐',
                    address: '2020-12-12'
                },
                {
                    key: 2,
                    name: '很高的一位杰克逊的本质',
                    age: '系统推荐',
                    address: '2020-12-12'
                }
            ], // 全选-排除数据-copy
            tableSelectExcludeIds: [], // 全选-排除-table选中ID
            tableSelectExcludeData: [], // 全选-排除-右侧选中数据
            tableDataAlone: [],
            updateTreeDataAlone: []
        };
    },
    computed: {
        rowSelectionAllDirect() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    this.tableSelectDirectIds = selectedRows && selectedRows.map(item => item.key);
                    this.tableSelectDirectData = selectedRows;
                    this.$emit('selection-direct-event', this.tableSelectDirectIds);
                },
                selectedRowKeys: this.tableSelectDirectIds,
                getCheckboxProps: record => ({
                    props: {
                        disabled: this.tableSelectExcludeIds.includes(record.key),
                        name: record.name,
                        defaultChecked: this.tableSelectDirectIds.includes(record.key)
                    }
                })
            };
        },
        rowSelectionAllExclude() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    this.tableSelectExcludeIds = selectedRows && selectedRows.map(item => item.key);
                    this.tableSelectExcludeData = selectedRows;
                    this.$emit('selection-exclude-event', this.tableSelectExcludeIds);
                },
                selectedRowKeys: this.tableSelectExcludeIds,
                getCheckboxProps: record => ({
                    props: {
                        disabled: this.tableSelectDirectIds.includes(record.key),
                        name: record.name,
                        defaultChecked: this.tableSelectExcludeIds.includes(record.key)
                    }
                })
            };
        }
    },
    watch: {
        // updatelistinclude(newVal) {
        //     if (newVal) {
        //         console.log(newVal, '---00---000----000');
        //         this.tableSelectDirectIds = newVal;
        //     }
        // },
        // updatelistexclude(newVal) {
        //     if (newVal) {
        //         this.tableSelectExcludeIds = newVal;
        //     }
        // },
        defaultlist(newVal) {
            if (newVal) {
                this.tableDataAllDirect = newVal;
                this.updateTableAllDirect = newVal;
                this.tableDataAllExclude = newVal;
                this.updateTableAllExclude = newVal;
                this.tableDataAlone = newVal;
                this.updateTreeDataAlone = newVal;
            }
        },
        packtype(newVal, oldVal) {
            if (newVal === 'directional') {
                this.tableSelectIds = [];
                this.selectRightData = [];
                this.tableSelectDirectIds = [];
                this.tableSelectDirectData = [];
                this.tableSelectExcludeIds = [];
                this.tableSelectExcludeData = [];
            }
            else if (newVal === 'exclude') {
                this.tableSelectIds = [];
                this.selectRightData = [];
                this.tableSelectDirectIds = [];
                this.tableSelectDirectData = [];
                this.tableSelectExcludeIds = [];
                this.tableSelectExcludeData = [];
            }
            else if (newVal === 'twoway') {
                this.tableSelectIds = [];
                this.selectRightData = [];
            }
        }
    },
    mounted() {
        this.tableDataAllDirect = this.defaultlist;
        this.updateTableAllDirect = this.defaultlist;
        this.tableDataAllExclude = this.defaultlist;
        this.updateTableAllExclude = this.defaultlist;
        this.tableDataAlone = this.defaultlist;
        this.updateTreeDataAlone = this.defaultlist;

        if (this.valueids === '3') {
            if (this.updatelistinclude.length && this.updatelistexclude.length) {
                this.tableSelectDirectIds = [...this.updatelistinclude];
                this.tableSelectExcludeIds = [...this.updatelistexclude];
                this.updateTableAllDirect.forEach(item => {
                    this.updatelistinclude.forEach(val => {
                        if (item.key === val) {
                            this.tableSelectDirectData.push(item);
                        }
                    });
                });
                this.updateTableAllExclude.forEach(item => {
                    this.updatelistexclude.forEach(val => {
                        if (item.key === val) {
                            this.tableSelectExcludeData.push(item);
                        }
                    });
                });
            }
            else if (this.updatelistexclude.length && !this.updatelistinclude.length) {
                this.tableSelectExcludeIds = [...this.updatelistexclude];
                this.selectPackageTabs = '2';
                this.selectAllRightTabs = '4';
                this.updateTableAllExclude.forEach(item => {
                    this.updatelistexclude.forEach(val => {
                        if (item.key === val) {
                            this.tableSelectExcludeData.push(item);
                        }
                    });
                });
            }
            else if (!this.updatelistexclude.length && this.updatelistinclude.length) {
                this.tableSelectDirectIds = [...this.updatelistinclude];
                this.selectPackageTabs = '1';
                this.selectAllRightTabs = '3';
                this.updateTableAllDirect.forEach(item => {
                    this.updatelistinclude.forEach(val => {
                        if (item.key === val) {
                            this.tableSelectDirectData.push(item);
                        }
                    });
                });
            }
        }
        else if (this.valueids === '1') {
            this.tableSelectIds = [...this.updatelistinclude];
            this.updateTableAllDirect.forEach(item => {
                this.updatelistinclude.forEach(val => {
                    if (item.key === val) {
                        this.selectRightData.push(item);
                    }
                });
            });
        }
        else if (this.valueids === '2') {
            this.tableSelectIds = [...this.updatelistexclude];
            this.updateTableAllDirect.forEach(item => {
                this.updatelistexclude.forEach(val => {
                    if (item.key === val) {
                        this.selectRightData.push(item);
                    }
                });
            });
        }
    },
    methods: {
        handleSelectAllTabs(e) {
            if (e === '3') {
                this.selectPackageTabs = '1';
            }
            else if (e === '4') {
                this.selectPackageTabs = '2';
            }
        },
        handleTabsChange(e) {
            if (e === '1') {
                this.selectAllRightTabs = '3';
            }
            else if (e === '2') {
                this.selectAllRightTabs = '4';
            }
            this.tableDataAllDirect = [];
            this.tableDataAllExclude = [];
            this.directInput = '';
            this.excludeInput = '';
            this.$nextTick(() => {
                this.tableDataAllDirect = this.updateTableAllDirect;
                this.tableDataAllExclude = this.updateTableAllExclude;
            });
        },
        handleSearchPack(e, type, style) {
            const value = e.target.value;
            if (type === 'alone') {
                let defaultList = [];
                this.updateTreeDataAlone.forEach(item => {
                    if (item.name && item.name.indexOf(value) !== -1) {
                        defaultList.push(item);
                    }
                });
                this.tableDataAlone = defaultList;
            }
            else if (type === 'all') {
                if (style === 'direct') {
                    let defaultListOne = [];
                    this.updateTableAllDirect.forEach(item => {
                        if (item.name && item.name.indexOf(value) !== -1) {
                            defaultListOne.push(item);
                        }
                    });
                    this.tableDataAllDirect = defaultListOne;
                }
                else if (style === 'exclude') {
                    let defaultListTwo = [];
                    this.updateTableAllExclude.forEach(item => {
                        if (item.name && item.name.indexOf(value) !== -1) {
                            defaultListTwo.push(item);
                        }
                    });
                    this.tableDataAllExclude = defaultListTwo;
                }
            }
        },
        handleRowSelection(selectedRowKeys, selectedRows) {
            this.tableSelectIds = selectedRowKeys;
            this.selectRightData = selectedRows;
            this.$emit('selection-alone-event', selectedRowKeys);
        },
        handleDelTree(list, type, style) {
            if (type === 'alone') {
                let formData = this.selectRightData;
                this.selectRightData = formData.filter(item => list.key !== item.key);
                this.tableSelectIds = this.selectRightData.map(item => item.key);
                this.$emit('clear-table-alone', this.tableSelectIds);
            }
            else if (type === 'all') {
                if (style === 'direct') {
                    let directData = this.tableSelectDirectData;
                    this.tableSelectDirectData = directData.filter(item => list.key !== item.key);
                    this.tableSelectDirectIds = this.tableSelectDirectData.map(item => item.key);
                    this.$emit('clear-table-direct', this.tableSelectDirectIds);
                }
                else if (style === 'exclude') {
                    let excludeData = this.tableSelectExcludeData;
                    this.tableSelectExcludeData = excludeData.filter(item => list.key !== item.key);
                    this.tableSelectExcludeIds = this.tableSelectExcludeData.map(item => item.key);
                    this.$emit('clear-table-exclude', this.tableSelectExcludeIds);
                }
            }
        },
        handleDelAloneAll(type) {
            if (type === 'alone') {
                this.selectRightData = [];
                this.tableSelectIds = [];
                this.$emit('clearlist');
            }
            else if (type === 'all') {
                this.tableSelectDirectIds = [];
                this.tableSelectDirectData = [];
                this.tableSelectExcludeIds = [];
                this.tableSelectExcludeData = [];
                this.tableDataAllDirect = [];
                this.tableDataAllExclude = [];
                this.directInput = '';
                this.excludeInput = '';
                this.$nextTick(() => {
                    this.tableDataAllDirect = this.updateTableAllDirect;
                    this.tableDataAllExclude = this.updateTableAllExclude;
                });
                this.$emit('clearlist');
            }
        }
    }
}
</script>
<style lang="less" scoped>
    @import 'directional-logic';
</style>