<template>
	<view class="dateC">
		<view class="yearMonthC flex">
			<view class="btn" @click="clickPreMonth()">
				<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
			</view>
			<view class="yearMonth flex1">
				<picker mode="date" fields="month" @change="monthChange">
					<view style="display: flex; align-items: center; justify-content: center;">
						<image style="width: 26rpx; height: 26rpx; margin-right: 10rpx;"
							src="/pagesStock/static/icon/all-icon-2.png" mode="widthFix"></image>
						<view style="color: #2B2B2B; font-size: 32rpx; font-weight: bold;">{{selectDateStr}}</view>
					</view>
				</picker>
			</view>
			<view class="btn" @click="clickNextMonth()">
				<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
			</view>
		</view>
		<view style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 17rpx; margin: 20rpx 0;">
			<view
				style="display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #292621; font-weight: 500;"
				v-for="(item,index) in weekList" :key="index">{{item}}</view>
		</view>
		<view class="monthDateList" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 17rpx;">
			<view class="item" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index"
				@click="clickSelectDate(item)">
				<block v-if="item.date==selectDateStr">
					<view
						:class="'date select '+(item.avg_change_pct?(getRateUpOrDown(item.avg_change_pct)?'down':'up'):'')">
						{{item.day}}
						<view v-if="index % 7 == 0 || index % 7 == 6" style="color: #999999; font-size: 18rpx;">休市
						</view>
						<view v-else style="text-align: center;">
							<view style="font-size: 18rpx;">66家</view>
							<view style="font-size: 16rpx;">商业航天</view>
						</view>
					</view>
				</block>
				<block v-else>
					<block v-if="!item.isCurrentMonth">
						<!-- <view class="date notCurrentMonth">{{item.day}}</view> -->
					</block>
					<block v-else>
						<view
							:class="'date '+(item.avg_change_pct?(getRateUpOrDown(item.avg_change_pct)?'down':'up'):'')">

							<view :style="{color: (index % 7 == 0 || index % 7 == 6 ? '#999999' : '#2A2A2A')}">
								{{item.day}}
							</view>
							<view v-if="index % 7 == 0 || index % 7 == 6" style="color: #999999; font-size: 18rpx;">休市
							</view>
							<view v-else style="text-align: center;">
								<view style="font-size: 18rpx;">66家</view>
								<view style="font-size: 16rpx;">商业航天</view>
							</view>

						</view>
					</block>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "LCCalendar",
		data() {
			return {
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				monthDateList: [],
				selectMonthIndex: 0, //选中月份下标
				selectMonth: '', //选中年月
				selectDateStr: '', //选中日期
				startDateStr: '', //开始日期
				endDateStr: '', //结束日期
			};
		},
		created() {
			let currentDate = new Date();
			// 获取当前年份
			let currentYear = currentDate.getFullYear();
			let currentMonth = currentDate.getMonth() + 1;
			let currentDay = currentDate.getDate();
			this.selectMonthIndex = 20 * 12 + currentMonth - 1
			this.selectMonth = currentYear + '年' + currentMonth + '月'
			//开始日期默认为当前月份第一天
			this.startDateStr = currentYear + '-' + (currentMonth > 9 ? currentMonth : ('0' + currentMonth)) + '-' + '01'
			//结束日期默认为当前日期
			this.endDateStr = this.selectDateStr = currentYear + '-' + (currentMonth > 9 ? currentMonth : ('0' +
				currentMonth)) + '-' + (currentDay > 9 ? currentDay : ('0' + currentDay))
			// this.getYesterdayDateData() 
			this.generateMonthDateListData()


			console.log(JSON.stringify(this.monthDateList[0]));
		},
		methods: {
			/**
			 * 获取当前时间前一天的数据
			 */
			getYesterdayDateData() {
				let currentDate = new Date();
				let selectDate = new Date(currentDate)
				selectDate.setDate(selectDate.getDate() - 1)
				let selectYear = selectDate.getFullYear();
				let selectMonth = selectDate.getMonth() + 1;
				let selectDay = selectDate.getDate();
				this.selectDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' + (
					selectDay > 9 ? selectDay : ('0' + selectDay))
			},
			/**
			 * 生成日期数组
			 */
			generateMonthDateListData() {
				let currentDate = new Date();
				// 获取当前年份
				let currentYear = currentDate.getFullYear();
				let currentMonth = currentDate.getMonth() + 1;
				let currentDay = currentDate.getDate();
				let monthDateList = []
				for (var i = currentYear - 20; i < currentYear + 20; i++) {
					for (var j = 0; j < 12; j++) {
						let date = new Date(i, j + 1, 0)
						let firstDayOfMonth = new Date(i, j + 1, 0);
						firstDayOfMonth.setDate(1);
						//获取当前月天数
						let currentMonthDay = date.getDate()
						let firstDayWeek = firstDayOfMonth.getDay() + 1
						let daysOfMonth = []
						for (var k = 1; k <= currentMonthDay; k++) {
							let newDate = new Date(i, j + 1, 0)
							newDate.setDate(k); // 设置日期为当前月的相应日期
							let newMonth = newDate.getMonth() + 1
							let newDay = newDate.getDate()
							let time = newDate.getTime()
							let date = i + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
								newDay : ('0' + newDay))
							daysOfMonth.push({
								date: date,
								year: i,
								month: newMonth,
								day: newDay,
								isToday: (i == currentYear && newMonth == currentMonth && newDay == currentDay) ?
									true : false,
								isCurrentMonth: true,
								isLastDay: newDay == currentMonthDay ? true : false,
								timestamp: time
							});
						}
						for (var k = 0; k < firstDayWeek - 1; k++) {
							//获取上月天数 
							let year = i
							let month = j
							if (j < 1) {
								year = i - 1
								month = 12
							}
							let lastMonthDay = new Date(year, month, 0).getDate()
							//获取上月日期
							let newDate = new Date(year, month - 1, lastMonthDay - k)
							let newMonth = newDate.getMonth() + 1
							let newDay = newDate.getDate()
							let time = newDate.getTime()
							let date = year + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
								newDay : ('0' + newDay))
							daysOfMonth.unshift({
								date: date,
								year: year,
								month: newMonth,
								day: newDay,
								isToday: false,
								isCurrentMonth: false,
								isLastDay: false,
								timestamp: time
							});
						}
						// 下一个月的第一天
						let nextMonthFirstDay = new Date(i, j + 1, 1);
						// 然后减去一天就是当前月的最后一天
						let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
						let lastDayWeek = lastDayOfMonth.getDay() + 1; // 返回0（星期天）到6（星期六）之
						for (var k = 1; k < 8 - lastDayWeek; k++) {
							let year = i
							let month = j
							if (month > 11) {
								month = 0
								year++
							}
							//获取下月日期
							let newDate = new Date(year, month + 1, k)
							let newMonth = newDate.getMonth() + 1
							let newDay = newDate.getDate()
							let time = newDate.getTime()
							let date = year + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
								newDay : ('0' + newDay))
							daysOfMonth.push({
								date: date,
								year: year,
								month: newMonth,
								day: newDay,
								isToday: false,
								isCurrentMonth: false,
								isLastDay: false,
								timestamp: time
							});
						}
						monthDateList.push(daysOfMonth)
					}
				}
				this.monthDateList = monthDateList
			},
			/**
			 * 点击上个月
			 */
			clickPreMonth() {
				if (this.selectMonthIndex > 0) {
					this.selectMonthIndex--
					let monthList = this.monthDateList[this.selectMonthIndex]
					let year = ''
					let month = ''
					for (let item of monthList) {
						if (item.isCurrentMonth) {
							year = item.year
							month = item.month
							break
						}
					}
					let lastDay = ''
					for (let item of monthList) {
						if (item.isLastDay) {
							lastDay = item.day
							break
						}
					}
					this.selectMonth = year + '年' + month + '月'
					this.startDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + '01'
					this.endDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + lastDay

					console.log('点击上个月');
				}
			},
			/**
			 * 点击下个月
			 */
			clickNextMonth() {
				if (this.selectMonthIndex < this.monthDateList.length - 1) {
					this.selectMonthIndex++
					let monthList = this.monthDateList[this.selectMonthIndex]
					let year = ''
					let month = ''
					for (let item of monthList) {
						if (item.isCurrentMonth) {
							year = item.year
							month = item.month
							break
						}
					}
					let lastDay = ''
					for (let item of monthList) {
						if (item.isLastDay) {
							lastDay = item.day
							break
						}
					}
					this.selectMonth = year + '年' + month + '月'
					this.startDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + '01'
					this.endDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + lastDay
					console.log('点击下个月');
				}
			},
			monthChange(e) {
				let currentDate = new Date();
				//当前年份
				let currentYear = currentDate.getFullYear()
				//选中年月
				let yearMonth = e.detail.value
				let selectYear = parseInt(yearMonth.split('-')[0])
				let selectMonth = parseInt(yearMonth.split('-')[1])
				this.selectMonthIndex = (selectYear - (currentYear - 20)) * 12 + selectMonth - 1
				this.selectMonth = selectYear + '年' + selectMonth + '月'
				this.startDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' + '01'
				let lastDayOfMonth = new Date(selectYear, selectMonth, 0);
				this.endDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' +
					lastDayOfMonth.getDate()
				console.log('月份变更');
			},
			/**
			 * 点击选择开始日期和结束日期
			 * @param {Object} item
			 */
			clickSelectDate(item) {
				if (!item.isCurrentMonth) return
				if (this.selectDateStr != item.date) {
					this.selectDateStr = item.date
					this.chgStockData = item
					console.log('点击某天');
				}
			}
		}
	}
</script>

<style lang="less">
	.dateC {
		background-color: white;
		box-shadow: 0 5rpx 10rpx 0 rgba(127, 127, 127, 0.1);
		box-sizing: border-box;

		.yearMonthC {
			// background-color: #F7F7F7;
			height: 70rpx;
			border-radius: 35rpx;

			.btn {
				padding: 0 32rpx;

				.icon {
					width: 13rpx;
					height: auto;
				}

			}

			.yearMonth {
				font-size: 32rpx;
				font-weight: 500;
				color: #070707;
				text-align: center;
			}
		}

		.weekList {
			.item {
				line-height: 72rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #A7A7A7;
				text-align: center;
			}
		}

		.monthDateList {
			.item {

				.date {
					background-color: #f8f8f8;
					padding: 10rpx 0;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: #2A2A2A;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					height: 100%;

					.chg {
						font-size: 18rpx;
					}

					.chg.up {
						color: #EC3440;
					}

					.chg.down {
						color: #38A169;
					}
				}

				.date.up {
					background-color: #FFD6D9;
				}

				.date.down {
					background-color: #CEF1DE;
				}

				.date.select.up {
					background-color: #EC3440;
					color: white;

					.chg {
						color: white;
					}
				}

				.date.select.down {
					background-color: #38A169;
					color: white;

					.chg {
						color: white;
					}
				}

				.date.notCurrentMonth {
					background-color: #FCFCFC;
					color: #999;
				}
			}
		}
	}
</style>