<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; font-size: 30rpx">
			<view style="display: flex; align-items: center">
				<u-image width="100rpx" height="100rpx" :src="shopinfo.avatar" shape="circle"></u-image>
				<view style="width: 20rpx"></view>
				<view>
					<view>{{ shopinfo.nickname }}</view>
					<view style="height: 10rpx"></view>
					<view>{{ shopinfo.account }}</view>
				</view>
			</view>
			<u-divider></u-divider>
			<view style="display: flex; justify-content: space-between">
				<view>
					<view>推广人数：{{ shopinfo.childCount || 0 }}</view>
					<view>订单金额：{{ shopinfo.numberCount || 0 }}</view>
					<view>订单数量：{{ shopinfo.orderCount || 0 }}</view>
				</view>
				<view style="width: 20rpx"></view>
				<view>
					<view>手机号：{{ shopinfo.phone || '-' }}</view>
					<view style="height: 10rpx"></view>
					<view>等级：{{ shopinfo.levelRatio }}</view>
				</view>
			</view>
			<view style="height: 16rpx"></view>
			<view style="display: flex; align-items: center; justify-content: space-between">
				<view>注册时间：{{ shopinfo.createTime }}</view>
				<view>
					<u-button @click="show = true" type="primary" size="small" color="#f33c2b" :plain="true" text="修改等级"></u-button>
				</view>
			</view>
		</view>
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; font-size: 30rpx">
			<view style="display: flex; align-items: center">
				<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType === 1 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(1)">
					本周
				</view>
				<view style="width: 30rpx"></view>
				<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType == 2 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(2)">上周</view>
				<view style="width: 30rpx"></view>
				<view>
					<uni-datetime-picker v-model="single" type="daterange" @change="maskClick">
						<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType === '' ? 'xkl_cur' : 'xkl_no'">
							<text v-if="search.startTime">{{ search.startTime }} - {{ search.endTime }}</text>
							<text v-else>自定义时间</text>
						</view>
					</uni-datetime-picker>
				</view>
				<!-- <view
					@click="screen.showcalendar = true"
					style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx"
					:class="search.week === '' ? 'xkl_cur' : 'xkl_no'"
				>
					<text v-if="search.startTime">{{ search.startTime }} - {{ search.endTime }}</text>
					<text v-else>自定义时间</text>
				</view> -->
			</view>
			<view style="margin-top: 30rpx; display: flex; align-items: center">
				<view
					v-for="(item, index) in getDateRanges()"
					:key="index"
					style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx; margin-right: 30rpx"
					:class="search.week === item.name ? 'xkl_cur' : 'xkl_no'"
					@click="checkTime(item)"
				>
					{{ item.name }}
				</view>
			</view>

			<u-divider></u-divider>
			<view style="height: 20rpx"></view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
		<view style="height: 100rpx"></view>
	</view>
</template>

<script>
import { shareUserInfo, shareUserInfoStats, editLevel, levelRatioList } from '@/api/user.js';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			show: false,
			screen: {
				showcalendar: false
			},
			shopinfo: {
				nickname: '',
				username: '',
				money: '',
				mobile: '',
				vip: '',
				device_num: '',
				id: ''
			},
			team_device_num: 0,
			chartData: {},
			opts: {
				padding: [15, 10, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
					showTitle: false
				},
				yAxis: {
					disabled: true,
					gridType: 'dash',
					dashLength: 2
				},
				extra: {
					line: {
						type: 'curve',
						width: 2,
						activeType: 'none'
					}
				}
			},
			search: {
				uid: '',
				start_time: '',
				end_time: '',
				weekType: 1
			},
			dateTime: currentDate,
			single: '',
			team: {},
			columns: []
		};
	},
	onLoad(option) {
		console.log(option.id, 'option.id');

		if (option && option.id) {
			this.search.uid = option.id;
		}

		levelRatioList().then((res) => {
			console.log(res.data);
			this.columns = [res.data];
		});
	},
	onReady() {
		this.getServerData();
	},
	async onPullDownRefresh() {
		this.search.weekType = 1;
		this.getServerData();
		uni.stopPullDownRefresh();
	},
	methods: {
		confirm(e) {
			editLevel({
				uid: this.search.uid,
				levelRatio: e.value[0].level
			}).then((res) => {
				this.show = false
				shareUserInfo({ uid: this.search.uid }).then((res) => {
					uni.showToast({
						title:'修改成功',
						icon:"none"
					})
					this.shopinfo = res.data;
				});
			});
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		},
		bindDateChange(e) {
			this.dateTime = e.detail.value;
		},
		getDateRanges() {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth(); // 月份从 0 开始，所以当前月份是 month + 1

			// 定义日期范围
			const ranges = {
				firstRange: {
					name: '1号-10号',
					start: new Date(year, month, 1), // 1号
					end: new Date(year, month, 10) // 10号
				},
				secondRange: {
					name: '11号-20号',
					start: new Date(year, month, 11), // 11号
					end: new Date(year, month, 20) // 20号
				},
				thirdRange: {
					name: '21号-月底',
					start: new Date(year, month, 21) // 21号
				}
			};

			// 计算当前月份的最后一天
			const lastDayOfMonth = new Date(year, month + 1, 0);
			ranges.thirdRange.end = lastDayOfMonth; // 月底

			// 格式化日期为 yyyy-mm-dd
			function formatDate(date) {
				const yyyy = date.getFullYear();
				const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 1 开始
				const dd = String(date.getDate()).padStart(2, '0');
				return `${yyyy}-${mm}-${dd}`;
			}

			return [
				{
					name: ranges.firstRange.name,
					start: formatDate(ranges.firstRange.start),
					end: formatDate(ranges.firstRange.end)
				},
				{
					name: ranges.secondRange.name,
					start: formatDate(ranges.secondRange.start),
					end: formatDate(ranges.secondRange.end)
				},
				{
					name: ranges.thirdRange.name,
					start: formatDate(ranges.thirdRange.start),
					end: formatDate(ranges.thirdRange.end)
				}
			];
		},
		checkTime(e) {
			this.search.startTime = e.start;
			this.search.endTime = e.end;
			this.screen.showcalendar = false;
			this.search.weekType = '';
			this.getServerData();
		},
		checkweek(week) {
			this.search.weekType = week;
			this.search.startTime = '';
			this.search.endTime = '';
			this.getServerData();
		},
		maskClick(e) {
			this.search.startTime = e[0];
			this.search.endTime = e[e.length - 1];
			this.search.weekType = '';
			this.getServerData();
		},
		getServerData() {
			shareUserInfo({ uid: this.search.uid }).then((res) => {
				this.shopinfo = res.data;
			});
			shareUserInfoStats(this.search).then((res) => {
				this.team = res.data;
				let _list = [
					{
						name: '订单数量',
						data: res.data.stats7.map((item) => {
							return item.num;
						})
					},
					{
						name: '订单金额',
						data: res.data.stats7.map((item) => {
							return item.payPrice;
						})
					},
				];
				this.chartData.categories = res.data.dayStr;
				this.chartData.series = _list;
				// this.chartData.console.log(res);
			});
		}
	}
};
</script>

<style lang="scss">
.xkl_cur {
	border: 1px solid #f33c2b;
	color: #f33c2b;
}

.xkl_no {
	border: 1px solid #999999;
	color: #999999;
}
</style>
