<style lang='scss' scoped>
.headerSelect{
	width: 100%;
	&-header{
		display: flex;
		border-bottom: 1px solid #dcdcdc;
		background-color: #fff;
		&-picker{
			border-left: 1px solid #dcdcdc;
		}
		&-date,&-picker{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}
	}
}
</style>
<template>
	<view class="headerSelect">
		<view class="headerSelect-header">
			<!-- <u-dropdown>
				<u-dropdown-item v-model="dateType" :title="dateType==1?'日':'月'" :options="options2" @change="bindDropdownSwitchFn"></u-dropdown-item>
			</u-dropdown> -->
			<view class="headerSelect-header-date flex1" @click="dateSelectShow = true">
				<text>{{dateType==1?"日":"月"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
			<picker class="headerSelect-header-picker flex1" mode="date" :value="getDateValCmp" :fields="dateType==1?'day':'month'" @change="bindDateChange">
			    <text class="uni-input">{{getDateValCmp}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</picker>
		</view>
		<u-select v-model="dateSelectShow" :list="options2" @confirm="onDateConfirmFn"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dateSelectShow:false,
				dateType: 2,
				options2: [
					{
						label: '日',
						value: 1,
					},
					{
						label: '月',
						value: 2,
					},
				],
				dateVal:""
			}
		},
		props:{
			// 默认日期
			defaultDate:{
				type:String,
				require:true
			}
		},
		watch:{
			// defaultDate(newVal){
			// 	this.dateVal = newVal;
			// }
		},
		created() {
			// this.dateVal = this.$u.timeFormat(this.defaultDate, this.dateType==1?'yyyy-mm-dd':'yyyy-mm');
			// this.dateVal = this.defaultDate;
		},
		computed:{
			getDateValCmp: {
				get() {
					return this.defaultDate;
				},
				set(val) {
					this.defaultDate = val
				}
			}
		},
		methods: {
			// 日期切换
			bindDateChange(e){
				// this.dateVal = e.detail.value;
				// this.defaultDate = e.detail.value;
				this.$emit("onDateChangeFn",e.detail.value);
			},
			// 日月切换
			onDateConfirmFn(arr){
				this.dateType = arr[0].value;
				this.$emit("onDateTypeChangeFn", arr[0].value);
			},
		}
	}
</script>
