<template>
    <div class="tree-select-content">
        <!-- <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" /> -->
        <div class="tree-select-class">
            <div class="select-class-left">
                <div class="class-left-header">可放开定向</div>
                <div class="class-left-content">
                    <template>
                        <a-checkbox-group v-model="checkedValue" @change="handleCheckGroup">
                            <a-row>
                                <a-col :span="24" v-for="item in changeCheckData" :key="item.value">
                                    <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
                                </a-col>
                            </a-row>
                        </a-checkbox-group>
                    </template>
                    <div class="example">
                        <span v-if="!changeCheckData.length">暂无数据</span>
                    </div>
                </div>
            </div>
            <div class="select-class-right">
                <div class="class-left-header">
                    已选 （{{ applyTypeOption.length ? applyTypeOption.length : 0}}）
                    <span class="clear-all-class"><a @click="handleClearAll">清空</a></span>
                </div>
                <div v-if="applyTypeOption.length" class="class-left-content">
                    <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.value">
                        <p class="left-content-p">
                            <a-tooltip placement="left">
                                <template slot="title">
                                    <span>{{ item.label }}</span>
                                </template>
                                {{ item.label }}
                            </a-tooltip>
                        </p>
                        <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
                    </div>
                </div>
                <div v-else class="no-data-class">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapGetters} from 'vuex';

export default {
    name: 'tree-select',
    props: {
        defaultlist: {
            type: Array,
            default: () => []
        },
        editdata: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            checkedValue: [],
            checkedKeys: [],
            treeData: [],
            updateTreeData: [],
            applyTypeOption: [],
            changeCheckData: []
        };
    },
    watch: {
        editdata(newVal) {
            if (newVal.length) {
                this.checkedValue = [...newVal];
                const rightSelectList = [];
                this.updateTreeData.forEach(item => {
                    if (newVal.includes(item.value)) {
                        rightSelectList.push(item);
                    }
                });
                this.applyTypeOption = rightSelectList;
            }
        },
        defaultlist(newVal) {
            if (newVal.length) {
                this.changeCheckData = this.defaultlist;
                this.updateTreeData = this.defaultlist;
            }
            else {
                this.changeCheckData = [];
                this.updateTreeData = [];
            }
        }
    },
    mounted() {
        this.changeCheckData = this.defaultlist;
        this.updateTreeData = this.defaultlist;
        if (this.editdata.length) {
            this.checkedValue = [...this.editdata];
            const rightSelectList = [];
            this.updateTreeData.forEach(item => {
                if (this.editdata.includes(item.value)) {
                    rightSelectList.push(item);
                }
            });
            this.applyTypeOption = rightSelectList;
        }
    },
    methods: {
        ...mapGetters(['userInfo']),
        handleCheckGroup(checkedValues) {
            const rightSelectList = [];
            this.checkedValue = checkedValues;
            this.updateTreeData.forEach(item => {
                if (checkedValues.includes(item.value)) {
                    rightSelectList.push(item);
                }
            });
            this.applyTypeOption = rightSelectList;
            this.$emit('select-finally-result', this.applyTypeOption);
        },
        handleClearAll() {
            this.checkedValue = [];
            this.applyTypeOption = [];
            this.$emit('select-finally-result', this.applyTypeOption);
        },
        handleDelTree(list) {
            const defaultData = this.applyTypeOption;
            this.applyTypeOption = defaultData.filter(item => item.value !== list.value);
            this.checkedValue = this.applyTypeOption.map(item => item.value);
            this.$emit('select-finally-result', this.applyTypeOption);
        },
        onChange(e) {
            const value = e.target.value;
            this.changeCheckData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
        },
        getNewTreeData(data, value) {
            const checkList = [];
            data.forEach(item => {
                if (item.label.indexOf(value) !== -1) {
                    checkList.push(item);
                }
            });
            return checkList;
        },
    }
};
</script>
<style lang="less" scoped>
    @import 'tree-select';
</style>