<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 class="u-flex u-flex-y-center">
				<u--image width="100rpx" height="100rpx" :src="shopinfo.avatar_url" shape="circle">
				</u--image>
				<view style="width: 20rpx;"></view>
				<view>
					<view>{{shopinfo.nickname}}</view>
					<view style="height: 10rpx;"></view>
					<view>{{shopinfo.username}}</view>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="u-flex u-flex-between">
				<view>
					<view>手机号：{{shopinfo.mobile}}</view>
					<view style="height: 10rpx;"></view>
					<view>等级：v{{shopinfo.vip}}</view>
				</view>
				<view style="width: 20rpx;"></view>
				<view>
					<view>余额：￥{{shopinfo.money}}</view>
					<view style="height: 10rpx;"></view>
					<view>自购：{{shopinfo.device_num}}</view>
				</view>
			</view>
			<view style="height: 16rpx;"></view>
			<view>注册时间：{{shopinfo.created_at}}</view>
		</view>

		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;font-size: 30rpx;">
			<view class="u-flex u-flex-y-center">
				<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
					:class="search.week === 0 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(0)">本周</view>
				<view style="width: 30rpx;"></view>
				<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
					:class="search.week == 1 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(1)">上周</view>
				<view style="width: 30rpx;"></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.start_date">{{search.start_date}} - {{search.end_date}}</text>
					<text v-else>自定义时间</text>
				</view>
			</view>
			<u-divider></u-divider>
			<view>{{shopinfo.nickname}}团队销量 {{team_device_num}} </view>
			<view style="height: 20rpx;"></view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<u-calendar :show="screen.showcalendar" minDate="2024-03-01" mode="range" @confirm="confirmcalendar"
			@close="screen.showcalendar = false" :showTitle="false" :defaultDate="null"></u-calendar>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				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: {
					team_shop_id: '',
					start_time: '',
					end_time: '',
					week: 0
				}
			}
		},
		onLoad(option) {
			self = this;
			if (option && option.team_shop_id) {
				self.search.team_shop_id = option.team_shop_id;
			}
		},
		onReady() {
			self.getServerData();
		},
		async onPullDownRefresh() {
			self.search.week = 0;
			self.getServerData();
			uni.stopPullDownRefresh();
		},
		methods: {
			confirmcalendar(e) {
				self.search.start_date = e[0];
				self.search.end_date = e[e.length - 1];
				self.screen.showcalendar = false;
				self.search.week = '';
				self.getServerData();
			},
			checkweek(week) {
				self.search.week = week;
				self.search.start_date = '';
				self.search.end_date = '';
				self.getServerData();
			},
			getServerData() {
				self.$http.get('/shop/v10/team/report', self.search).then(({
					data
				}) => {
					self.team_device_num = data.team_device_num;
					self.chartData = data.report;
					self.shopinfo = data.team_shop;
				})
			},
		}
	}
</script>

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

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