<template>
	<view>
		<view class="head_filter row-justify-sb center p-lr30">
			<view class="filter_item r-100 filter-bg row-justify-c center" @click="startAnimation(1)">
				<text class="text-color-fff size-28 sys-weight-600 p-r10">{{newUserTypeName}}</text>
				<image class="white-arrow" :class="arrowItem == 1 && is_flag?'open':''"
					src="/static/img/statistics/white-arrow.png" mode="aspectFill"></image>
				<!-- 		<uni-icons :animation="animationData" class="dropdown-icon" :type="type" size="16"
					color="#fff"></uni-icons> -->
			</view>
			<view class="filter_item last_item r-100 filter-bg row-justify-c center" @click="startAnimation(2)">
				<text class="text-color-fff size-28 sys-weight-600 p-r10">{{dateName}}</text>
				<image class="white-arrow" :class="arrowItem == 2 && is_flag?'open':''"
					src="/static/img/statistics/white-arrow.png" mode="aspectFill"></image>
			</view>
			<view>
				<uni-datetime-picker v-model="daterange" type="date" @change="onSelectTime"
					@touchmove.stop.prevent="moveHandle">
					<view class="last_item r-100 filter-bg row-justify-c center">
						<image class="wh-36" src="/static/img/statistics/stat-calendar.png" mode="aspectFill"></image>
						<text class="text-color-fff size-28 sys-weight-600 m-l16">日期</text>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<uni-popup background-color="#fff" ref="popup" type="bottom" border-radius="10px" @change="onChangePopup"
			@touchmove.stop.prevent="moveHandle">
			<view v-if="selectType===1">
				<EnSelect :show-but="false" title="请选择统计类型" v-model="dateTypeObj.censusUserType"
					:local-data="userStatusList" ref="systemSelect" @onChange="setCensusUserType" @close="closePopup"></EnSelect>
			</view>
			<view v-else>
				<EnSelect :show-but="false" title="请选择统计周期" v-model="dateTypeObj.dateType" :local-data="dateData"
					ref="systemDate" @onChange="setDateType" @close="closePopup"></EnSelect>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import EnSelect from "@/components/en-utils/en-select/en-select.vue";
	import tools from "@/service/tools";

	export default {
		name: 'head_filter',
		components: {
			EnSelect
		},
		props: {
			userStatusList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				type: 'down',
				animationData: {},
				isRote: false,
				is_flag: false,
				arrowItem: 0,
				animation: null,
				newUserTypeName: '',
				dateName: '日数据',
				dateData: [{
					'id': 1,
					'name': '日数据'
				}, {
					'id': 2,
					'name': '周数据'
				}, {
					'id': 3,
					'name': '月数据'
				}, {
					'id': 4,
					'name': '年数据'
				}],

				dateTypeObj: {
					dateType: 1, //时间类型
					selectDate: '', //自定义的时候传数组，其它传开始日期
					money_type: 1,
					censusUserType: 0,
					product_id: 5,
				},
				selectType: 1,
				maxData: '',
				daterange: ''

			};
		},
		watch: {
			'userStatusList': function() {
				console.log(this.userStatusList)
				if (this.dateTypeObj.selectDate !== '') {
					this.setCensusUserType(0)
				}
			},
			'dateTypeObj': {
				deep: true,
				handler: function() {
					this.$emit('input', this.dateTypeObj)
				}
			}
		},
		mounted() {
			this.getDateStatus()
		},
		methods: {
			getDateStatus() {
				let myDate = new Date();
				let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let myToday = myDate.getDate(); //获取当前日(1-31)
				let time = myYear + '/' + (myMonth >= 10 ? myMonth : '0' + myMonth) + '/' + (myToday >= 10 ? myToday :
					'0' + myToday)
				let maxDataTime = new Date(this.maxData.replace(/-/g, "/")).getTime()
				let myDataTime = new Date(time).getTime()

				if (maxDataTime < myDataTime) {
					this.dateTypeObj.selectDate = this.maxData
				} else {
					this.dateTypeObj.selectDate = myYear + '/' + myMonth + '/' + myToday
				}
				if (this.dateTypeObj.censusUserType === 0) {
					this.setCensusUserType(0)
				}
				this.setTimeData(this.dateTypeObj.selectDate, 0)
			},
			setTimeData(date, num) {
				//时间初始化
				let ret = null;
				if (this.dateTypeObj.dateType === 1) {
					ret = tools.getStatisticsDate(date, num)
				} else if (this.dateTypeObj.dateType === 2) {
					ret = tools.getNextWeek(date, num)
				} else if (this.dateTypeObj.dateType === 3) {
					ret = tools.getNextMonth(date, num)
				} else if (this.dateTypeObj.dateType === 4) {
					ret = tools.getNextYear(date, num)
				}
				console.log(ret)
				if (ret) {
					// let maxDataTime = new Date(this.maxData.replace(/-/g, "/")).getTime()
					// let time = (ret[1].y + ''+'/') + (ret[1].m + '') + ('/'+ret[1].d + '')
					// let myDataTime = new Date(time).getTime()
					this.dateTypeObj.selectDate = ret[0]['y'] + '-' + ret[0]['m'] + '-' + ret[0]['d'];
					let timeData = [ret[0]['y'] + ' | ' + ret[0]['m'] + '.' + ret[0]['d']];
					if (ret[0]['y'] * 1 === ret[1]['y'] * 1) {
						timeData[1] = ret[1]['m'] + '.' + ret[1]['d']
					} else {
						timeData[1] = ret[1]['y'] + ' | ' + ret[1]['m'] + '.' + ret[1]['d']
					}
					this.$emit('setTimeDate', timeData)
				}
			},
			setCensusUserType(index) {
				console.log(index)
				if (this.userStatusList[index] !== undefined) {
					this.dateTypeObj.censusUserType = this.userStatusList[index].id
					this.newUserTypeName = this.userStatusList[index].name
					this.endPopup()
				}
			},
			setDateType(index) {
				this.dateTypeObj.dateType = this.dateData[index].id
				this.dateName = this.dateData[index].name
				this.getDateStatus()
				this.endPopup()
			},
			endPopup() {
				console.log(this.dateTypeObj.censusUserType);
				this.$emit('onTopSelect', this.dateTypeObj.censusUserType)
				this.$refs.popup.close('bottom')
			},
      closePopup(){
        this.$refs.popup.close('bottom')
      },
			startAnimation(type) {
				this.selectType = type
				this.arrowItem = type
				this.is_flag = true
				this.$refs.popup.open('bottom')
			},
			onChangePopup(e) {
				console.log(e.show === false);
				if (e.show === false) {
					this.is_flag = !this.is_flag
				}
			},
			onSelectTime(date) {
        this.setTimeData(date,0)
				// console.log(e);
				// const year = e.slice(0, 4)
				// const month = e.slice(-5).replace(/-/g, '.')
				// const day = e.slice(-5).replace(/-/g, '.')
				// console.log(year, month, day);
			},
			moveHandle() {
				return false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head_filter {
		height: 35px;
		line-height: 36px;
		text-align: center;

		.filter_item {
			height: 65rpx;
			line-height: 65rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.7);
		}

		.filter_item:first-child {
			width: 290rpx;
			height: 65rpx;
		}

		.last_item {
			width: 180rpx;
			height: 65rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.7);
		}
	}

	.filter-bg {
		background: rgba(0, 88, 14, 0.34);
	}

	.white-arrow {
		width: 24rpx;
		height: 12rpx;
		transition: transform 0.3s ease-in-out;
	}

	.open {
		transform: rotateZ(180deg);
	}
</style>