<template>
	<view class="zhuti">
		<view class="futi">
			<!-- <view class="saleTian" @click="toSaleReport">上报线下销售数据</view> -->
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">线下销售数据</view>
					<view class="cardMu">
						<view class="cardOne">
							<view class="title" style="font-size: 26rpx;">
								今日销售金额
							</view>
							<view class="num">21</view>
							<view>同比昨日上升5</view>
						</view>
						<!-- <view class="cardOne">
							<view class="title">
								今日销售金额
							</view>
							<view class="num">10</view>
							<view>同比昨日上升1</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">营业额趋势</view>
					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			
			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">销量排名</view>
					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
						<qiun-data-charts type="bar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chart: null,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartData1: {},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 70
					},
					yAxis: {},
					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		mounted() {

		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
						series: [{
								name: "成交量A",
								data: [0, 0, 0, 0, 4,0]
							},
							{
								name: "成交量B",
								data: [0,0 ,0, 0, 44, 0]
							},
							{
								name: "成交量C",
								data: [0, 0, 0, 0, 112, 0]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);

				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
						series: [{
								name: "目标值",
								data: [0, 0, 0,0 ,13, 0]
							},
							{
								name: "完成量",
								data: [0, 0, 0, 0, 6, 0]
							}
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 跳转到销售上报页面
			toSaleReport(){
				uni.navigateTo({
					url:'/pages/saleReport/saleReport'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'salesReporting.scss';
</style>