<template>
	<view>
		<view class="timeSelectContent">
			<picker mode="date" :value="queryDate" :end="maxDate" :fields="fields" @change="bindDateChange">
				<view class="uni-input">{{queryDate}}</view>
			</picker>
			<i v-if="icon" class="iconfont icon-youjiantou"></i>
		</view>
	</view>
</template>

<script>
	import {fmdata} from '@/util/currentDate.js'
	export default {
		props:{
			fields:{
				type: String,
			},
			icon: {
				type: Boolean
			}
		},
		name: "time-picker",
		data() {
			return {
				queryDate: fmdata(new Date(),'M'),
				// queryDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				maxDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
			};
		},
		mounted() {
			if(this.fields == "month"){
				// this.queryDate = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
				this.queryDate = fmdata(new Date(),'M');
			}else if (this.fields == "year") {
				// this.queryDate = `${new Date().getFullYear()}`
				this.queryDate = fmdata(new Date(),'Y');
			}else {
				return false
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.$emit('change', e.detail.value)
				this.queryDate = e.detail.value
			},
		}
	}
</script>

<style scoped>
	.timeSelectContent{
		display: flex;
		align-items: center;
		
	}
.uni-input{
	color: #666666;
}
.icon-youjiantou{
	color: #666666;
}
</style>
