<template>
    <div id="CustomSelect" ref="selectPanel" class="ps-r">
        <div class="full-width ps-r" @click.stop="handleSelectFoucus">
            <el-input ref="input" readonly autocomplete :suffix-icon="ismouse ? 'el-icon-circle-close' : 'el-icon-arrow-down'" :placeholder="isNoPlaceholder ? '': '请选择'" :class="['select-box', isFocus ? 'el-select__caret': 'is-reverse']" />
            <div v-if="checkData.length" class="tags-panel ps-a border-box">
                <el-tag
                    type="info"
                    size="mini"
                    closable
                    @close="handleCloseTag"
                >
                    <span>{{ checkData[0].name }}</span>
                </el-tag>
                <el-tag
                    v-if="checkData.length - 1"
                    type="info"
                    size="mini"
                >
                    <span>{{ `+${checkData.length - 1}` }}</span>
                </el-tag>
            </div>
        </div>
        <div v-show="isFocus" class="main ps-a bgc-fff mt10 plr20 border-box ptb10 active">
            <el-input v-model="inputValue" clearable placeholder="请输入" class="search-box" size="small" />
            <br>
            <el-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            <el-tree
                ref="tree"
                :data="treeData"
                show-checkbox
                node-key="id"
                default-expand-all
                :props="defaultProps"
                :filter-node-method="filterNode"
                @check-change="handleCheckChange"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'CustomSelect',
    props: {
        prop: {
            default: '',
            type: String
        },
        option: {
            default: () => [],
            type: Array
        },
        isNoPlaceholder: {
            default: false,
            type: Boolean
        },
        isReset: {
            default: false,
            type: Boolean
        }
    },
    data() {
        return {
            inputValue: '',
            isFocus: false,
            ismouse: false,
            defaultProps: {
                children: 'children',
                label: 'name',
                id: 'id'
            },
            treeData: [],
            checkData: [],
            searchData: [],
            isCheckAll: false,
            isIndeterminate: false
        };
    },
    watch: {
        inputValue(val) {
            this.$refs.tree.filter(val);
            this.searchData = this.treeData.filter(item => item.name.indexOf(val) !== -1);
        },
        checkData(val) {
            const currentCheckData = this.searchData.filter(item => val.includes(item));
            this.isIndeterminate = currentCheckData.length > 0 && currentCheckData.length < this.searchData.length;
            this.isCheckAll = currentCheckData.length === this.searchData.length;
        },
        searchData(val) {
            const currentCheckData = val.filter(item => this.checkData.includes(item));
            this.isIndeterminate = currentCheckData.length > 0 && currentCheckData.length < val.length;
            this.isCheckAll = val.length === currentCheckData.length;
        },
        option(val) {
            this.treeData = val.map(({ batchName, batchNo, id }) => ({
                name: batchName,
                batchNo: batchNo,
                id: id
            }));
            this.searchData = this.treeData;
        },
        isReset(val) {
            if (val) {
                this.$refs.tree.setCheckedNodes([]);
            }
        }
    },
    mounted() {
        this.treeData = this.option.map(({ batchName, batchNo, id }) => ({
            name: batchName,
            batchNo: batchNo,
            id: id
        }));
        this.searchData = this.treeData;
        this.$nextTick(() => {
            document.addEventListener('click', (e) => {
                this.closeSelect(e);
            }, true);
        });
        this.$refs.input.$el.addEventListener('mouseenter', () => {
            if (this.checkData.length) {
                this.ismouse = true;
            }
        });
        this.$refs.input.$el.addEventListener('mouseleave', () => {
            if (this.ismouse) {
                this.ismouse = false;
            }
        });
        this.$refs.input.$el.lastElementChild.onclick = () => {
            if (this.ismouse) {
                this.$refs.tree.setCheckedNodes([]);
            }
        };
    },
    beforeDestroy() {
        document.removeEventListener('click', (e) => {
            this.closeSelect(e);
        }, true);
    },
    methods: {
        resetCustomSelect() {
            console.log('------------sss11');
        },
        initData() {
            this.treeData = this.option.map(({ batchName, batchNo, id }) => ({
                name: batchName,
                batchNo: batchNo,
                id: id
            }));
        },
        handleCheckChange() {
            const checkedKeys = this.$refs.tree.getCheckedKeys();
            this.checkData = this.treeData.filter(item => checkedKeys.includes(item.id));
            this.$emit('formItemChange', { prop: this.prop, val: this.checkData });
        },
        handleCheckAllChange(val) {
            const checkNodes = this.$refs.tree.getCheckedNodes();
            if (val) {
                const target = Array.from(new Set([...checkNodes, ...this.searchData]));
                this.$refs.tree.setCheckedNodes(target);
            } else {
                const traget = checkNodes.filter(item => !this.searchData.includes(item));
                this.$refs.tree.setCheckedNodes(traget);
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleCloseTag() {
            this.checkData.splice(0, 1);
            this.$refs.tree.setCheckedNodes(this.checkData);
        },
        handleSelectFoucus() {
            this.isFocus = !this.isFocus;
        },
        closeSelect(e) {
            if (this.$refs.selectPanel && !this.$refs.selectPanel.contains(e.target)) {
                if (this.isFocus) {
                    this.isFocus = false;
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
#CustomSelect {
  .main {
    top: 32px;
    left: 0;
    min-width: 200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: solid 1px #e4e7ed;
    border-radius: 4px;
    z-index: 2005;
    max-height: 278px;
    overflow-y: auto;
  }
  .tags-panel {
    right: 32px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
  }
  .select-box :hover {
    cursor: pointer;
  }
  .active {
    transition: transform .3s;
  }
}
</style>
