<template>
    <view style="width:100%">
        <view>
            <text v-if="selLabel">{{selLabel}}</text>
            <text v-else>{{placeholder}}</text>
            <uni-popup ref="popupSearchSelect" type="bottom" style="z-index: 9999;">
                <view style="background-color: #FFFFFF; height: 30vh;">
                    <view class="popup-top-box">
                        <view class="color-gray text-lg" @click.stop="close()">取消</view>
                        <view class="search-box">
                            <input type="text" v-model="searchKeyword" style="padding:0 10rpx;font-size: 20rpx;"
                                :placeholder="searchPlaceholder" @input="doSearch"/>
							<icon type="search" size="18"></icon>
                            <!-- <view class="color-blue" @click="doSearch">查询</view> -->
                        </view>
                        <view class="text-lg" @click.stop="save()">完成</view>
                    </view>
                    <picker-view :value="selIdx" @change="change" class="picker-view" style="z-index: 9999;">
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in dataOptions" :key="index">
                                {{item.label}}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    export default {
        name: "zwSearchSelect",
        props: {
            data: {
                type: [Array, Object],
                default: null
            },
            placeholder: {
                type: String,
                default: "请选择"
            },
            value: {
                type: [Array, Object, Number, String],
                default: null
            },
            valKey: {
                type: String,
                default: "id"
            },
            labelKey: {
                type: String,
                default: "name"
            },
            searchKey: {
                type: String,
                default: "name"
            },
            searchPlaceholder: {
                type: String,
                default: "请输入关键词"
            },
        },
        data() {
            return {
                selIdx: [0],
                selValue: null,
                selLabel: "",
                searchKeyword: "",
                dataOptions: [],
				allData: []
            };
        },
        created() {
           this.init()
        },
        methods: {
			init(){
				if(this.allData.length===0){
					let tempData = [];
					this.data.forEach(item => {
					    tempData.push({
					        val: item[this.valKey],
					        label: item[this.labelKey],
					    })
					})
					this.allData = tempData;
				}
				this.dataOptions = this.allData
				let index = this.dataOptions.findIndex(item => item.val == this.value)
				if (index > -1) {
				    this.selIdx[0] = index;
				}
			},
			open(){
				this.searchKeyword = ''
				this.init()
				this.$refs.popupSearchSelect.open()
			},
			close(){
				this.$refs.popupSearchSelect.close()
			},
            change(e) {
                this.selIdx = e.detail.value;
            },
            save(e) {
				console.log(this.selIdx.length)
                let index = this.selIdx[0];
                this.selValue = this.dataOptions[index].val;
                this.selLabel = this.dataOptions[index].label;
                this.$emit('input', this.selValue)
                this.$emit("change",{index:this.selIdx,data:this.dataOptions[index]})
                this.$refs.popupSearchSelect.close()
            },
            doSearch() {
                this.dataOptions = this.allData.filter(item => {
                    if (!this.searchKeyword) {
                        return true
                    }else{
						if(item[this.searchKey].indexOf(this.searchKeyword.toUpperCase()) > -1){
							return true
						}else{
							return false
						}
					}
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .color-blue {
        color: #1e78fd;
		width: 80rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
    }
    .color-gray {
        color: #666666;
    }
    .text-lg {
        font-size: 24rpx;
    }

    .popup-top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        border-bottom:1px solid #CCCCCC;
    }
    .search-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
		padding-right: 10rpx;
        width: 320rpx; 
		height: 50rpx; 
		border:1px solid #999999;
		border-radius: 18px;
		font-size: 20rpx;
    }
    .picker-view {
        width: 750rpx;
        height: 300rpx;
		padding-top: 5rpx;
        .item {
			font-size: 24rpx;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    }
</style>
