<template>
	<view class="content">
		<view class="tab">
			<view v-for="(item, index) in tabList" :key="index" @click="isTab = item.value" class="tab_i"
				:class="[isTab===item.value?'heng':'heng1']">
				{{ item.label }}
			</view>
		</view>
		<view class="flex_box">
			<view class="neibox" @click="calendarShow=true">
				<view>{{riqi?riqi:'日期筛选'}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
			</view>
			<view class="neibox" @click="listShow=true">
				<view>{{statusName?statusName:'考核状态'}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
			</view>
			<view class="seatch_r" @click="getDataList">
				<u-icon name="search" size="22" color="#fff"></u-icon>
			</view>
		</view>
		<view class="jifen">
			<view class="jifen_left">
				{{isTab==0?"复购考核积分":"分红考核积分"}}
			</view>
			<view class="jifen_right">
				{{achieve}}
			</view>
		</view>
		<view class="thecontent" v-for='(item,index) in tableData' :key="index">
			<view class="line_box">
				<view class='line1'>交易日期</view>
				<view class='line2'>{{item.tradeTime}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>交易记录</view>
				<view class='line2'>{{item.tradeAchieveSign}}</view>
			</view>
			<view class="line_box">
				<view class='line1'>考核类型</view>
				<view class='line2'>{{item.changeTypeVal}}</view>
			</view>
			<view class="line_box" v-if="item.assessStatus!=null">
				<view class='line1'>考核状态</view>
				<view class='line3'>{{item.assessStatusVal}}</view>
			</view>
		</view>
		<u-calendar :minDate='minDate' :maxDate='maxDate' :show="calendarShow" monthNum='100'
			@close="calendarShow=false" maxRange='300' mode="range" @confirm="confirmCalendar"></u-calendar>
		<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="assessStatusList" @confirm="confirm"
			keyName='label'></u-picker>
	</view>
</template>

<script>
	import * as mar from "@/config/market.js"
	export default {
		data() {
			return {
				tabList: [{
					value: 0,
					label: "复购考核"
				},
        // {
				// 	value: 1,
				// 	label: "分红考核"
				// }
      ],
				isTab: 0,
				queryParams: {
					startDate: "",
					endDate: "",
					assessType: 0,
					assessStatus: ""
				},
				achieve: "",
				tableData: [],
				calendarShow: false,
				defaultDate: [],
				minDate: "",
				maxDate: "",
				riqi: "",
				assessStatusList: [],
				listShow: false,
				statusName: "",
				monthFirstday: "",
				monthLastday: "",

			}
		},
		watch: {
			isTab(n, o) {
				this.queryParams.assessType = n
				this.getDataList()
			},
		},
		onLoad() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (month <= 9) {
				month = '0' + month;
			}
			if (day <= 9) {
				day = '0' + day;
			}
			let minyear = year - 1;
			this.minDate = minyear + '-' + month + '-' + day;
			let maxyear = year + 1;
			this.maxDate = maxyear + '-' + month + '-' + day;
			this.defaultDate[0] = year + '-' + month + '-' + day;
			this.getOthers()
			this.getDataList()
			this.getStartTime();
			this.getEndTime();
			this.riqi = this.monthFirstday + '~' + this.monthLastday
		},
		methods: {
			getStartTime() {
				let date = new Date();
				let year = date.getFullYear(); // 得到当前年份
				let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1; // 得到当前月份（0-11月份，+1是当前月份）
				date.setDate(1); // 将当前时间的日期设置成第一天
				month = month >= 9 ? month : "0" + month; // 补零
				let day = date.getDate(); // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
				day = day >= 10 ? day : "0" + day; // 补零
				this.monthFirstday = year + "-" + month + "-" + day;
				this.queryParams.startDate = this.monthFirstday;
				console.log("🌈 this.monthFirstday", this.monthFirstday);
			},
			getEndTime() {
				let date = new Date();
				let year = date.getFullYear(); // 得到当前年份
				let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1; // 得到当前月份（0-11月份，+1是当前月份）
				month = month >= 9 ? month : "0" + month; // 补零
				let day = date.getDate(); // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
				day = day >= 10 ? day : "0" + day; // 补零
				this.monthLastday = year + "-" + month + "-" + day + " ";
				this.queryParams.endDate = this.monthLastday;
				console.log("🌈this.monthLastday", this.monthLastday);
			},
			confirm(e) {
				// console.log('🌈eeee',e)
				this.queryParams.assessStatus = e.value[0].value
				this.statusName = e.value[0].label
				this.listShow = false

			},
			confirmCalendar(e) {
				this.queryParams.startDate = e[0]; // 获取选择的起始日期
				this.queryParams.endDate = e[e.length - 1]; // 获取选择的结束日期
				this.riqi = e[0] + '~' + e[e.length - 1]
				this.calendarShow = false
			},
			getOthers() {
				mar.getAssessStatusList().then(res => {
					this.assessStatusList = [res.data];
				})
			},
			getDataList() {
				mar.getAssessList(this.queryParams).then(res => {
					this.tableData = res.rows
				})

				mar.getAssAchieve({
					assessType: this.isTab
				}).then((res) => {
					this.achieve = res.data;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding-bottom: 20rpx;

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 6rpx;
			background-color: #FFFFFF;

			.tab_i {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				white-space: nowrap;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 0;
				// background-color: pink;

			}

			.heng {
				border-bottom: 6rpx solid #FB3024;
				color: #FB3024;

			}

			.heng {
				color: #333333;
			}

		}

		.flex_box {
			background-color: #FFFFFF;
			padding: 30rpx 20rpx 30rpx 50rpx;
			align-items: center;
			justify-content: space-between;
			display: flex;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			.neibox {
				display: flex;
				align-items: center;
			}

			.seatch_r {
				background: #fb3024;
				border-radius: 50%;
				padding: 8rpx;
				margin-left: 24rpx;
			}
		}

		.jifen {
			margin-top: 25rpx;
			background-color: rgba(251, 48, 36, 0.15);
			padding: 45rpx 28rpx;

			color: #FB3024;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.jifen_left {
				font-size: 26rpx;
				font-weight: 400;
			}

			.jifen_right {
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.thecontent {
			background-color: #FFFFFF;
			margin-bottom: 21rpx;
			padding: 10rpx 23rpx 30rpx 23rpx;

			.line_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.line1 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}

				.line2 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				.line3 {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(251, 48, 36, 1);
				}
			}
		}
	}
</style>
