<template>
    <div class="lv-cascader" v-clickoutside="() => toggleDropDownVisible(false)">
        <div class="input-box" :style="{borderColor: dropDownVisible ? '#3e98ff' : ''}" @click="toggleDropDownVisible(!dropDownVisible)" style="width: 100%">
            <i class="icon" @click.stop="toggleDropDownVisible(!dropDownVisible)" :class="dropDownVisible ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i>
            <div class="tag-box" ref="boxaa">
            <template v-if="showCheck.length == options.length">
                <el-tag type="info" size="small">全部</el-tag>
            </template>
            <template v-else>
                <el-tag type="info" size="small" v-for="i in showCheck" :key="i.value">{{i.label}}</el-tag>
            </template>
        </div>
        </div>
        <!-- <div class="input-box">
            <el-input readonly size="small"
            :placeholder="showCheck.length ? '' : '请选择'"
            v-model.trim="inputValue"
            ref="input" @focus="handleFocus" @input="handleInput" @blur="handleSearch"
            type="text"
            :suffix-icon="dropDownVisible ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></el-input>
            <div class="tag-box" ref="box" v-if="showCheck.length">
                <template v-if="showCheck.length == options.length">
                    <el-tag type="info" size="small">全部</el-tag>
                </template>
                <template v-else>
                    <el-tag type="info" size="small" v-for="i in showCheck" :key="i.value">{{i.label}}</el-tag>
                </template>
            </div>
        </div> -->
        
        <transition name="el-zoom-in-top" @after-leave="handleDropdownLeave">
            <div v-show="dropDownVisible" class="lv-cascader__dropdown">
                <div class="thumb-width" style="min-height:50px;">
                    <el-empty :image="require('@/assets/images/empty.png')" v-if="!options.length" description="暂无数据~"></el-empty>
                    <div v-else>
                        <p class="thumb-item" style="padding:0"><el-checkbox @change="handleCheckAllChange" v-model="checkAll" :indeterminate="isAll">全部</el-checkbox></p>
                        <el-checkbox-group
                        v-model="selected"
                        @change="handleCheckedCitiesChange"
                        >
                        <p class="thumb-item" v-for="item in options" :key="item.value">
                            <el-checkbox :label="item.value">{{item.label}}</el-checkbox>
                        </p>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import { isDef } from 'element-ui/src/utils/shared';
import Clickoutside from 'element-ui/src/utils/clickoutside';
export default {
    model: {
        event: 'change',
        prop: 'value'
    },
    props: {
        value: '',
        options: Array,
    },
    directives: { Clickoutside },
    data() {
        return {
            inputValue: '',
            dropDownVisible: false,
            defaultCheck: [],
            showCheck: [],
            checkAll: true,
            selected: [],
            isAll: false,
            inputHeight: '30px'
        }
    },
    computed: {
        treeData() {
            return [{
                label: '全部',
                value: 'all',
                children: this.options
            }]
        },
        tagHeight() {
            if(this.$refs.boxaa) {
                const height = this.$refs.boxaa.offsetHeight;
                return height
            } else {
                return 30;
            }
        }
    },
    watch: {
        tagHeight(val, old) {
            if(this.$refs.input) {
                this.$refs.input.style.height = val + 'px'
            } 
        },
        options: {
            handler(v){
                if(v) {
                    const arr = this.options.map(item => item.value)
                    this.selected = arr
                    this.defaultCheck = ['all'].concat(arr)
                }
                this.showCheck = this.getShowCheck(this.selected)
            },
            deep: true,
            immediate: true
        },
        selected(v) {
            this.isAll = v.length > 0 && v.length < this.options.length;
        }
    },
    created() {
        const arr = this.options.map(item => item.value)
        this.selected = arr
        this.showCheck = this.getShowCheck(this.selected)
        this.resetInputHeight()
    },
    methods: {
         resetInputHeight() {
            this.$nextTick(() => {
                setTimeout(() => {
                    if(this.$refs.boxaa){
                    this.inputHeight = this.$refs.boxaa.offsetHeight
                    } else {
                        this.inputHeight = 30
                    }
                }, 300);
            })
         },
        handleCheckAllChange() {
            if(this.checkAll){
                this.selected = this.options.map(item => item.value)
            } else {
                this.selected = []
            }
            this.$forceUpdate()
            this.showCheck = this.getShowCheck(this.selected)
            this.$emit('treeChange',this.selected)
            this.resetInputHeight()
        },
        handleCheckedCitiesChange(d) {
            const checkedCount = d.length
            this.checkAll = this.options.length == checkedCount;
            // this.isAll = checkedCount > 0 && checkedCount < this.options.length;
            this.showCheck = this.getShowCheck(d)
            this.$emit('treeChange',this.selected)
            this.resetInputHeight()
        },
        closeTag() {
            if(this.selected.length == this.options.length){
                this.selected = [];
                this.checkAll = false
            } else {
                this.selected = this.selected.slice(1,this.selected.length)
            }
            this.showCheck = this.getShowCheck(this.selected)
            this.$emit('treeChange',this.selected)
        },
        handleDropdownLeave() {

        },
        handleFocus() {
            !this.dropDownVisible && this.toggleDropDownVisible(true);
        },
        handleInput(val, event) {
            this.handleSearch()
            !this.dropDownVisible && this.toggleDropDownVisible(true);
        },
        handleSearch() {
            this.$emit('change',this.inputValue);
        },
        toggleDropDownVisible(visible) {
            const { dropDownVisible } = this;
            const { input } = this.$refs;
            visible = isDef(visible) ? visible : !dropDownVisible;
            if (visible !== dropDownVisible) {
                this.dropDownVisible = visible;
            }
        },
        getShowCheck(arr) {
            let afterArr = []
            arr.forEach(element => {
                afterArr = afterArr.concat(this.options.filter(item => item.value == element))
            })
            return afterArr
        },
        checkChange() {
            const arr = this.$refs.tree.getCheckedKeys()
            this.showCheck = this.getShowCheck(arr)
            // this.$emit('treeChange',arr)
        }
    }
}
</script>
<style lang="less" scoped>
.lv-cascader {
    position: relative;
    height: auto;
    .el-input {
        height: auto;
        
    }
    .input-box {
        min-height: 30px;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        padding: 0 10px;
        // position: relative;
        // display: flex;
        // align-items: center;
        // z-index: 2;
        i {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
        }
    }
    input {
            flex: 1;
            opacity: 1;
            border: none;
            outline: none;
            background-color: transparent;
        }
.tag-box {
    // position: absolute;
    line-height: normal;
    white-space: normal;
    z-index: 1;
    // position: absolute;
    // top: 0;
    // left: 10px;
    // height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .el-tag {
        margin: 3px 5px 3px 0;
    }
}
.thumb-item {
    height: 26px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 15px;
}
}
.lv-cascader__dropdown {
    width: 100%;
    position: absolute;
    margin: 5px 0;
    font-size: 14px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    // top: 35px;
    bottom: -14px;
    transform: translateY(100%);
    left: 0;
    min-height: 100px;
    z-index: 999;
    padding: 10px;
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
    &::after {
        position: absolute;
        top: -4px;
        left: 120px;
        display: inline-block;
        content: '';
        width: 8px;
        height: 8px;
        transform: rotate(-45deg);
        background-color: #fff;
        border-top: 1px solid #e4e7ed;
        border-right: 1px solid #e4e7ed;
    }
}
</style>