<template>
    <div class="gg-select" :style="{ width }">
        <div class="title-box" @click="fole" :style="{ height, border, padding, cursor: buttonDisabled ? 'not-allowed' : 'pointer', display }">
            <slot :row="row">
                <span>{{ name }}</span>

                <i :style="{ transform: `rotate(${show ? 180 : 0}deg)` }" class="icon el-icon-arrow-down el-icon--right"></i>
            </slot>
        </div>
        <div class="mask" v-if="isFold" @click="fole"></div>
        <div class="select" ref="content" :class="{ boxShadow: isFold }" :style="{ visibility: show ? '' : 'hidden', height: heights === 'auto' ? '' : heights + 10 + 'rem', width: selectWidth, left, right }">
            <div v-for="(v, i) in list" :key="i" @click="confirm(v)">
                <i class="iconfont mg_r10" :class="v.icon"></i>
                {{ v.name }}
            </div>
        </div>
    </div>
</template>

<script>
import { bus } from "../rem/bus";
export default {
    name: "qg-select",
    inject: {
        parent: {
            default: {
                disabled: false,
            },
        },
        elForm: {
            default: {
                disabled: false,
            },
        },
    },
    props: {
        isPop: {
            type: Boolean,
            default: false,
        },
        width: {
            type: String,
            default: "",
        },
        height: {
            type: String,
            default: "32rem",
        },
        selectWidth: {
            type: String,
            default: "",
        },
        right: {
            type: String,
            default: "",
        },
        left: {
            type: String,
            default: "",
        },
        border: {
            type: String,
            default: "solid 1rem #dddddd",
        },
        padding: {
            type: String,
            default: "0 10rem",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        display: {
            type: String,
            default: "flex",
        },
        value: {
            type: [String, Number],
            default: 0,
        },
        list: {
            type: Array,
            default: () => [],
        },
        range_key: {
            type: String,
            default: "name",
        },
        range_value: {
            type: String,
            default: "id",
        },
        immediate: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            name: "",
            num: 0,
            ovl: -1,
            oldHeight: 0,
            isFold: false,
            heights: "auto",
            row: {},
            show: false,
        };
    },
    mounted() {
        setTimeout(() => {
            this.oldHeight = this.$refs.content.offsetHeight;
            this.heights = 0;
        }, 500);
        let a = null;
        bus.$on("resize", () => {
            this.heights = "auto";
            clearTimeout(a);
            a = setTimeout(() => {
                this.oldHeight = this.$refs.content.offsetHeight;
                this.heights = 0;
                clearTimeout(a);
            }, 500);
        });

        // if (this.immediate) {
        //     let ov = this.list.findIndex(v => v.id == this.ovl)
        //     this.confirm({ id: ov > 0 ? ov : 0 })
        // } else {
        //     let index = this.list.findIndex(v => v.id == this.ovl)
        //     this.name = this.list[index > 0 ? index : 0][this.range_key]
        // }
    },
    destroyed() {
        bus.$off("resize");
    },
    watch: {
        value: {
            handler(n) {
                this.ovl = n;
                if (this.immediate) {
                    let ov = this.list.findIndex((v) => v.id == this.ovl);
                    this.confirm({ id: ov > 0 ? ov : 0 });
                } else {
                    let index = this.list.findIndex((v) => v.id == this.ovl);
                    this.name = this.list[index > 0 ? index : 0][this.range_key];
                    // this.name = (this.list[index] || {})[this.range_key] || ''
                }
            },
            immediate: true,
        },
        // list: {
        //     handler(n, oldN) {
        //         // if (n === oldN) return
        //         let a = setTimeout(() => {
        //             if (this.immediate) {
        //                 let ov = this.list.findIndex(v => v.id == this.ovl)
        //                 this.confirm({ id: ov > 0 ? ov : 0 })
        //             } else {
        //                 let index = this.list.findIndex(v => v.id == this.ovl)
        //                 this.name = this.list[index > 0 ? index : 0][this.range_key]
        //             }
        //             clearTimeout(a)
        //         }, 1000)
        //     },
        //     deep: true,
        //     immediate: true
        // }
    },
    computed: {
        buttonDisabled() {
            return this.disabled && this.parent.disabled && this.elForm.disabled;
            // return (this.parent ||{}).disabled
        },
    },
    methods: {
        fole() {
            if (this.buttonDisabled) return
            if (this.isPop) return this.$emit("click");
            this.isFold = !this.isFold;
            if (this.isFold) {
                this.show = true;
                this.heights = JSON.parse(JSON.stringify(this.oldHeight));
            } else {
                this.heights = 0;
                this.show = false;
            }
        },
        confirm(v) {
            let index = this.list.findIndex((y) => y.id == v.id);
            let label = this.list[index > 0 ? index : 0][this.range_key];
            let value = this.list[index > 0 ? index : 0][this.range_value];
            console.log(this.list, "this.list");
            this.name = label;
            this.row = {
                name: label,
                id: value,
            };
            this.$emit("input", value);
            this.$emit("change", value);
            this.fole();
        },
    },
};
</script>

<style scoped>
.icon {
    transition: all 0.2s linear 0s;
}
.boxShadow {
    box-shadow: 0rem 0rem 2rem 5rem rgba(200, 200, 200, 0.2);
}
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.gg-select {
    width: 100%;
    position: relative;
    display: flex;
    user-select: none;
}
.title-box {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4rem;
}
.select {
    position: absolute;
    top: 36rem;
    right: 0;
    left: 0;
    border-radius: 3rem;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s linear 0s;
    cursor: pointer;
}
.select > div {
    padding: 10rem;
    height: 36rem;
    display: flex;
    align-items: center;
}
.select > div:hover {
    background-color: #f5f5f5;
    color: #333;
}
</style>
