<template>
	<view style="padding:36rpx;height: 80vh;padding-bottom: 0;" class="column">
		<view class="col column" style="width:100%;height: 1px;">
			<view class="cities-name text-center full-width">选择出发日期</view>
			<view class="q-mt-md q-mb-md full-width">
				<u-tabs :list="chosenTypes" :show-bar="false" :is-scroll="false" :current="dateRangeValue.type" :active-color='mainColor' @change="changeTypeHandler"></u-tabs>
			</view>
			<view class="col full-width" v-if="dateRangeValue.type==0">
				<view class="cities-name" style="font-size: 28rpx;">出发时间</view>
				<div class="row flex-grid flex-wrap q-mt-md">
					<view class="date-item col-f-b" v-for="(x,i) in fuzzyTypeList" @click="setFuzzyTypeHandle(x)" :key="i" :class="{'active':dateRangeValue.fuzzy.fuzzyType==x.Id}">{{x.Name}}</view>
				</div>
				<view class="cities-name" style="font-size: 28rpx;margin-top: 72rpx;">周几出发</view>
				<div class="row items-center q-mt-md">
					<view class="date-item col q-mr-sm" v-for="(x,i) in weeks" :key="i" @click="setWeekHandler(i)" :class="{'active':dateRangeValue.fuzzy.weeks.indexOf(i)!=-1}">{{x}}</view>
				</div>
				<view class="row items-center" style="margin-top: 72rpx;">
					<view class="col">
						<text class="cities-name" style="font-size: 28rpx;margin-top: 72rpx;">出行天数</text>
						<text class="q-ml-md cities-name" style="font-size: 28rpx;">({{ dateRangeValue.fuzzy.dayRange.join(' - ') }}) 天</text>
					</view>
					<view class="">
						<u-switch v-model="dateRangeValue.fuzzy.dayRangStatus" :active-color="mainColor" :size="30"></u-switch>
					</view>
				</view>
				<view class="q-mt-md" v-show="dateRangeValue.fuzzy.dayRangStatus">
					<llt-slider-range :model-value="dateRangeValue.fuzzy.dayRange" @change="handleDayRangChange" :blockSize="24" :active-color="mainColor" :min="1" :max="15" />
				</view>
			</view>
			<view class="col" style="height: 1px;" v-else>
				<date-sign :default-date="dateRangeValue.startDate" @selected="handleSelectedDate"></date-sign>
			</view>
		</view>
		<view class="text-center q-mt-md" @click="setValueHandler" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4">确认选择</view>
	</view>
</template>

<script>
	import DateSign from '../sign/sign.vue';
	export default {
		data(){
			return {
				dateRangeValue:{
					type:0,
					startDate:'',
					fuzzy:{
						fuzzyType:0,
						fuzzyTypeName:'',
						weeks:[],
						dayRangStatus:false,
						dayRange:[4,10]
					}
				},
				mainColor:'',
				chosenTypes:[
					{name:'模糊日期'},
					{name:'精确日期'}
				],
				fuzzyTypeList:[
					{Id:-1,Name:'未来一个月'},
					{Id:-2,Name:'未来三个月'}
				],
				weeks:['一','二','三','四','五','六','日']
			}
		},
		components:{DateSign},
		props:{
			value:{
				type:Object,
				default:null
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.fillMonthType()
			if(this.value){
				this.dateRangeValue = this.value
			}
			console.log(this.value)
		},
		watch:{
			value: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					if(this.value){
						this.dateRangeValue = this.value
					}else{
						this.dateRangeValue = {
							type:0,
							range:['',''],
							fuzzy:{
								fuzzyType:0,
								fuzzyTypeName:'',
								weeks:[],
								dayRangStatus:false,
								dayRange:[4,10]
							}
						}
					}
				},
			},
		},
		methods:{
			changeTypeHandler(index){
				this.dateRangeValue.type = index
			},
			fillMonthType(){
				let date = new Date()
				for (var i = 0; i < 4; i++) {
					date.setMonth(date.getMonth() + (i==0?0:1));
					const month = date.getMonth()+1
					this.fuzzyTypeList.push({
						Id:i+1,
						Name:`${month}月`
					})
				}
			},
			setWeekHandler(i){
				const t = this.dateRangeValue.fuzzy.weeks.indexOf(i)
				if(t==-1) this.dateRangeValue.fuzzy.weeks.push(i)
				else this.dateRangeValue.fuzzy.weeks.splice(t,1)
			},
			handleDayRangChange(val){
				this.dateRangeValue.fuzzy.dayRange = val
			},
			setValueHandler(){
				this.resolveDateFormatHandle()
				this.$emit('change',this.dateRangeValue)
			},
			setFuzzyTypeHandle(item){
				this.dateRangeValue.fuzzy.fuzzyType=item.Id
				this.dateRangeValue.fuzzy.fuzzyTypeName=item.Name
			},
			handleSelectedDate(val){
				this.dateRangeValue.startDate = val
			},
			resolveDateFormatHandle(){
				console.log(this.dateRangeValue.fuzzy)
				if(this.dateRangeValue.type==1){
					if(this.dateRangeValue.startDate==''){
						this.dateRangeValue.formatStartDate='任意时间出发'
					}else{
						this.dateRangeValue.formatStartDate=`${this.dateRangeValue.startDate} ${this.$utils.getWeekName(this.dateRangeValue.startDate)}`
					}
				}else{
					let val = ''
					if(this.dateRangeValue.fuzzy.fuzzyType!=0){
						val = this.dateRangeValue.fuzzy.fuzzyTypeName
					}
					if(this.dateRangeValue.fuzzy.weeks && this.dateRangeValue.fuzzy.weeks.length>0){
						const w = this.weeks.filter((x,i)=>this.dateRangeValue.fuzzy.weeks.indexOf(i)!=-1).map((x,i)=>{
							return `周${x}`
						})
						val += (val==''?'':' | ')+w.join(',')
					}
					if(this.dateRangeValue.fuzzy.dayRangStatus){
						val += (val==''?'':' | ')+this.dateRangeValue.fuzzy.dayRange.join('-')+'天'
					}
					this.dateRangeValue.formatStartDate = val==''?'任意时间出发':val
				}
			}
		}
	}
</script>

<style>
	.full-width{
		width: 100%;
	}
	.date-item{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #000;
		background-color: #f1f2f1;
		text-align: center;
		border-radius: 16rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: clip;
	}
	.date-item.active{
		font-size: 30rpx;
		/* font-weight: bold; */
		color: #f1f2f1;
		background-color: #000;
	}
</style>