<template>
    <view class="feitui-select" @click.stop="trigger"><!-- :style="[feituiSelectSize]" -->
        <!-- <input type="text" v-model="value" :placeholder="placeholder" placeholder-class="placeholder" disabled clearable> -->
		<view :class="'feitui-select-value dflex' + (value?'':' placeholder')">{{value?value:selecValue}}</view>
        <view class="feitui-select-suffix" :style="{border: '1px solid rgba（0,0,0,0)'}" :class="[showSuffix]">
            <view class="feitui-select-down-tag"><image src="../bico.png"></image></view>
        </view>
        <view class="feitui-select-options" v-if="showOptions"
            :style="{'min-width': boundingClientRect.width + 'px', top: optionsGroupTop, margin: optionsGroupMargin}">
            <view class="feitui-select-options-item" v-for="(item,index) in options" :key="item.value"
                @click.stop="select(item,index)" :class="{active: item.active}">
                <text>{{item.title}}</text>
				<image src="../gou.png" class="gou" v-if="item.active"></image>
            </view>
        </view>
    </view>
</template>
<script>
    const COMPONENT_NAME = 'feitui-select'
    const MAX_OPTIONS_HEIGHT = 137 // 修改务必也修改feitui-select-options的css部分
    const OPTIONS_ITEM_HEIGHT = 33 // 修改务必也修改feitui-select-options-item的css部分
    const OPTIONS_MARGIN = 10
    const OPTIONS_PADDING = 6 * 2 + 2 // + 2是border
    const OPTIONS_OTHER_HEIGHT = OPTIONS_MARGIN + OPTIONS_PADDING
    const STORAGE_KEY = '_feituiWindowHeight'
    const SIZE = {
        'medium': {
            width: '240px',
            height: '40px'
        },
        'small': {
            width: '200px',
            height: '30px'
        },
        'mini': {
            width: '160px',
            height: '30px'
        }
    }

    export default {
        name: COMPONENT_NAME,
        props: {
            windowHeight: {
                type: [Number, String],
                default: 0
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            value: {
                type: String,
                default: '双皮奶'
            },
            size: {
                type: String,
                default: 'medium'
            },
			isMultiple: {
				type: Boolean,
				default: false
			},
            options: {
                type: Array,
                default () {
                    return [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }]
                }
            }
        },
        data() {
            return {
                showOptions: false,
                boundingClientRect: {},
                currentSelect: {},
                optionsGroupTop: 'auto',
                optionsGroupMargin: '',
				currentIndex: -1,
				currentArr: []
            }
        },
        computed: {
            showSuffix() {
                return this.showOptions ? 'showOptions' : 'no-showOptions'
            },
            feituiSelectSize() {
                let size = this.size.toLowerCase()
                if (size in SIZE) {
                    return {
                        width: SIZE[size].width,
                        height: SIZE[size].height
                    }
                } else {
                    return {}
                }
            }
        },
        mounted() {
            const elQuery = uni.createSelectorQuery().in(this)
            elQuery.select('.feitui-select').boundingClientRect(data => {
                this.boundingClientRect = data
            }).exec();
            try {
                if (!this.windowHeight) {
                    const storageHeight = uni.getStorageSync(STORAGE_KEY)
                    if (storageHeight) {
                        this.feituiWindowHeight = storageHeight
                        return
                    }
                    const res = uni.getSystemInfoSync();
                    this.feituiWindowHeight = res.windowHeight
                    uni.setStorageSync(STORAGE_KEY, this.feituiWindowHeight)
                }
            } catch (e) {
                // error
            }
        },
        methods: {
            trigger(e) {
                const view = uni.createSelectorQuery().in(this)
                view.select('.feitui-select').fields({
                    rect: true
                }, data => {
                    let {
                        top,
                        bottom
                    } = data
                    const thresholdHeight = Math.min(MAX_OPTIONS_HEIGHT + OPTIONS_MARGIN, (this.options.length *
                            OPTIONS_ITEM_HEIGHT) +
                        OPTIONS_OTHER_HEIGHT)
                    bottom = Number(this.windowHeight || this.feituiWindowHeight) - (top + this
                        .boundingClientRect
                        .height) // 距离底部的距离等于视口的高度减上top加select组件的高度
                    // judge direction
                    if (bottom < thresholdHeight) {
                        this.optionsGroupDirection = 'up'
                        this.optionsGroupTop = -thresholdHeight - 12 + 'px'
                        this.optionsGroupMargin = '0'
                    } else {
                        this.optionsGroupDirection = 'down'
                        this.optionsGroupTop = 'auto'
                        this.optionsGroupMargin = '10px 0 0 0'
                    }
                    // if (this.scrollTop < )
                    this.showOptions = !this.showOptions
                }).exec();
            },
            select(options,index) {
                // this.showOptions = false
				if(this.isMultiple){
					if(options.active){
						options.active = false
						this.currentArr.map((it,index)=>{
							if(it == options.title){
								this.currentArr.splice(index,1)
							}
						})
					}else{
						options.active = true
						this.currentArr.push(options.title)
					}
					this.currentSelect = this.currentArr.join('、');
					this.$emit('selectOne', this.currentSelect)
				}else{
					this.showOptions = false
					this.currentSelect = options;
					this.$emit('selectOne', options)
				}
            },
            hideOptions() {
                this.showOptions = false
            }
        }
    }
</script>
<style scoped>
    .feitui-select {
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        /* font-size: 28rpx; */
        color: #606266;
        outline: none;
        box-sizing: content-box;
        min-height: 32px;
		width: 200px;
    }
	.feitui-select-value{font-size: 12px;color: #666;line-height: 20px;padding: 0 12px;min-height: 32px;cursor: pointer;}
    .feitui-select input {
        padding: 0 18rpx;
        padding-right: 60rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 100% !important;
        min-height: 100% !important;
		font-size: 12px;
		line-height: 32px;
    }
	.placeholder{color: #909399;}

    .feitui-select .feitui-select-suffix {
        position: absolute;
        box-sizing: border-box;
        height: 100%;
        right: 5px;
        top: 0;
        display: flex;
        align-items: center;
        transform: rotate(180deg);
        transition: all .3s;
        transform-origin: center;
    }

    .feitui-select .showOptions {
        transform: rotate(0) !important;
    }

    .feitui-select .no-showOptions {
        transform: rotate(180deg) !important;
    }

    .feitui-select .feitui-select-options {
        position: absolute;
        padding: 6px 0;
        margin-top: 10px;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        box-sizing: border-box;
        transform-origin: center top;
        z-index: 2238;
        overflow-y: auto;
        max-height: 374rpx;
    }

    .feitui-select .feitui-select-options-item {
        padding: 0 70rpx 0 20rpx;
        position: relative;
        white-space: nowrap;
        font-size: 14px;
        color: #606266;
        height: 33px;
        line-height: 33px;
        box-sizing: border-box;
		cursor: pointer;
    }
	.feitui-select .feitui-select-options-item:hover{background-color: #F5F7FA}

    .feitui-select .active {
        /* background-color: #F5F7FA */
    }
	.feitui-select-down-tag image{width: 10px;height: 6px;}
	.gou{width: 30rpx;height: 30rpx;position: absolute;top: 50%;transform: translateY(-50%);right: 20rpx;}
</style>
