
<template>
    <view>
       <view class="timeTitle">
       	<view class="" v-if="initDate" :style="{color:initDate =='请选择'?'gray':'',fontSize:initDate =='请选择'?'31rpx':''}">
       		<text :style="{fontSize:chooseTxt}">{{initDate}}</text>
       		<text  class="iconfont icon-youjiantou iconStyle" ></text>
       	</view>
          <view class="emptyTxt" v-else>
          	<text :style="{fontSize:placeholderTxt}">请选择</text>
          	<text  class="iconfont icon-youjiantou iconStyle"></text>
          </view>
       </view>
        <uni-popup ref="timePopup" type="bottom" :maskClick="false">
            <view class="timeBox">
                <view class="titleBox">
                    <view @click="cancle">
                        取消
                    </view>
                    <view style="color:#20279b;" @click="confirm">
                        确定
                    </view>
                </view>
                <picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
                    <picker-view-column>
                        <view class="item" v-for="(item,index) in dataList" :key="index">
                            <view class="myItem" :class="{ 'selected': currentValue === index }">
                                {{item.name}}
                            </view>
                        </view>
                    </picker-view-column>
                    
                </picker-view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
    import dataHandling from "@/util/dataHandling";
    import dayjs from 'dayjs';
    export default {
        name:'CommonSelect',
        props: {
            timeData: {
                type: Object
            },
            showValue: {
                type: Number,
                default: 0  // 添加默认值
            },
            visible: {
                type: Boolean,
                default: false
            },
            dataList: {
                type: Array,
                 default: () => ([])
            },
			placeholderTxt:{
				type:String,
				default: '28rpx'
			},
			chooseTxt:{
				type:String,
				default: '28rpx'
			},
        },
        data: function () {
            return {
                title: 'picker-view',
                indicatorStyle: `height: 90rpx;`,
                initDate:``,
                currentValue:this.showValue || 0 // 初始化时使用props的值
            }
        },
        watch: {
            visible: {
                deep: true,
                handler(newVal) {
                    if(newVal) {
                        this.$refs.timePopup.open()
                        // 打开时确保value数组正确
                        this.value = [this.currentValue]
                    }
                }
            },
            showValue: {
                immediate: true, // 添加immediate确保初始化时也执行
                handler(newVal) {
                    if(newVal !== undefined && newVal !== null&&newVal!==-1) {
                        this.currentValue = newVal
                        this.value = [newVal] // 同时更新value数组
                        // 更新显示的文本
                        if(this.dataList && this.dataList.length > 0) {
                            this.initDate = this.dataList[newVal].name
                        }
                    }
                }
            },
            dataList: {
                immediate: true,
                handler(newVal) {
                    if(newVal && newVal.length > 0 && this.currentValue !== undefined&&this.currentValue!==-1) {
                        this.initDate = newVal[this.currentValue].name
                    }
                }
            }
        },
        created() {
            // 初始化value数组
            this.value = [this.currentValue]
        },
        methods: {
           bindChange: dataHandling.debounce(function (e) {
                   const val = e.detail.value;
                   this.currentValue = val[0];
               }, 50),
            cancle(){
				if( !this.initDate ){
					this.currentValue = 0
				}
                this.$emit('close',false)
                this.$refs.timePopup.close()
            },
            confirm(){
                if(this.dataList && this.dataList.length > 0) {
                    this.initDate = this.dataList[this.currentValue].name
                }
                this.$refs.timePopup.close()
                this.$emit('confirm', this.currentValue)
            }
        }
    }
</script>



<style lang="scss" scoped>
    ::v-deep .uni-popup .uni-popup__wrapper{
        margin: 0 !important;
    }
	// ::v-deep .uni-picker-view-indicator {
	//     background-color: rgba(32, 39, 155, 0.1);
	//     height: 50px;
	//     border-top: 1px solid #20279b;
	//     border-bottom: 1px solid #20279b;
	// }
    .timeTitle{
        font-size: 35rpx;
		.emptyTxt{
			color: gray;
			font-size: 31rpx;
			display: flex;
			align-items: center;
		}
    }
    .timeBox{
        width: 100%;
        background-color: #fff;
        border-radius: 10rpx 10rpx 0 0;
        .titleBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 35rpx;
            padding: 20rpx 30rpx;
        }
        .picker-view {
            width: 100%;
            height: 600rpx;
            margin-top: 20rpx;
        }
        .item {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .myItem {
                padding: 10rpx;
                border-radius: 10rpx;
                color: #000;
                transition: transform 0.2s ease;
                &.selected {
                    transform: scale(1.05);
                    color: #20279b;
                    font-weight: 500;
                }
            }
        }
    }
</style>