<template>
    <view class="easy-combobox" :style="`width:${comboboxWidth}`">
        <view class="easy-combobox-view" @tap="clickView">
            <view class="easy-combobox-view-text">{{text}}</view>
            <uni-icons type="down" size="12"></uni-icons>
        </view>
        <view :class="`easy-combobox-panel${isShowPanel?' easy-combobox-show':''}`">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import base from './base.extend.js';

    let options = [];
    let current = -1;

    export default {
        name: "easy-combobox",
        props: {
            selected: {
                type: Number,
                default: 0
            },
            width: {
                type: Number || String,
                default: '160'
            }
        },
        data() {
            return {
                comboboxWidth: '120upx',
                text: '',
                isShowPanel: false
            };
        },
        created() {
            options = [];
            current = this.selected;
            if (base.isNumber(this.width) || base.isNumberString(this.width)) {
                this.comboboxWidth = `${this.width}upx`;
            } else if (base.isNonEmptyString(this.width) && base.isNumber(parseFloat(this.width))) {
                this.comboboxWidth = this.width;
            }
        },
        mounted() {
            if (current < options.length && current >= 0) {
                options[current].select();
                this.change(current);
            }
        },
        methods: {
            addOption(option) {
                if (base.isObject(option)) {
                    options.push(option);
                    if (option.checked) {
                        this.change(option);
                    }
                }
            },

            /**
             * 选择
             * @param {number|object} option 选项，option 数组下标或者 option 组件本身
             */
            select(option) {
                this.change(option);
                this.isShowPanel = false;
                let opt = options[current].getOption();
                this.$emit('change', opt);
            },

            /**
             * 改变
             * @param {number|object} option 选项，option 数组下标或者 option 组件本身
             */
            change(option) {
                let i = 0;

                if (typeof option === 'number') {
                    current = option;
                } else if (typeof option === 'object') {
                    for (i = 0; i < options.length; i++) {
                        if (options[i] === option) {
                            current = i;
                            break;
                        }
                    }
                }
                for (i = 0; i < options.length; i++) {
                    if (current === i) {
                        options[current].select();
                        let opt = options[current].getOption();
                        this.text = opt.text;
                    } else {
                        options[i].unselect();
                    }
                }
            },

            clickView() {
                this.isShowPanel = !this.isShowPanel;
            },

            getOption() {
                return options[current];
            },

            getValue() {
                return options[current].value;
            },

            getText() {
                return options[current].text;
            }
        }
    }
</script>

<style lang="scss">
    .easy-combobox {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        height: 70upx;
        flex-shrink: 0;

        .easy-combobox-view {
            position: relative;
            box-sizing: border-box;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: space-between;
            align-items: center;
            border: 1upx solid #dfdfdf;
            border-radius: 10upx;
            padding: 10upx;
        }

        .easy-combobox-view-text {
            display: flex;
            font-size: 24upx;
            flex-grow: 1;
        }

        .easy-combobox-panel {
            display: none;
            position: absolute;
            box-sizing: border-box;
            left: 0;
            top: 70upx;
            z-index: 100;
            background-color: #ffffff;
            border: 1upx solid #dfdfdf;
            box-shadow: 0 0 20upx #999999;
            border-radius: 10upx;
        }

        .easy-combobox-show {
            display: block;
        }
    }
</style>