<template>
	<view style="display: inline-block;" @click="()=>showDateVisible=true">
		<slot></slot>
		<u-popup mode="bottom" border-radius="20" :popup="false" v-model="showDateVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="()=>showDateVisible=false" :z-index="9999">
			<view class="column" style="height: 70vh;">
				<scroll-view scroll-y="true" class="col" style="width: 100%;height: 1px;">
					<date-select-range :display-list="displayList" @selected-range="changeHandle" v-if="selectType==1" :default-start-date="rangeValue[0]" :default-end-date="rangeValue[1]"></date-select-range>
					<date-select :display-list="displayList" @selected="changeHandle" v-else :default-date="value"></date-select>
				</scroll-view>
				<view @click="selected" class="text-center q-mt-md q-ml-md q-mr-md" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4;font-weight: bold;font-size: 32rpx;">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import DateSelectRange from '../sign/range.vue';
	import DateSelect from '../sign/sign.vue'
	export default{
		data(){
			return {
				showDateVisible:false,
				value:'',
				rangeValue:[],
				selectType:0
			}
		},
		props:{
			defaultValue:{
				type:String|Array,
				default:''
			},
			/**
			 * displayList，对象值{'20230202':'休息'}
			 */
			displayList:{
				type:Object,
				default:{}
			}
		},
		components:{
			DateSelectRange,
			DateSelect
		},
		created() {
			this.selectType = typeof this.defaultValue == 'string'?0:1
			if(this.selectType == 0) this.value = this.defaultValue
			else this.rangeValue = this.defaultValue
		},
		methods: {
			changeHandle(val){
				if(this.selectType == 0) this.value = val
				else this.rangeValue = val
			},
			selected(){
				this.$emit('change',this.selectType==0?this.value:this.rangeValue)
				this.showDateVisible = false
			}
		}
		
	}
</script>

<style>
</style>