<template>
	<view class="charts-box">

		<view style="display: flex;justify-content: center; width: 100%; ">
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(1)">1</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(2)">2</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(3)">3</text>
		</view>

		<view style="margin-top: 20px;margin-left: 20px;">
			<text>当日数据1</text>
			<text style="margin-left: 10px;">{{newDate}}</text>

		</view>

		<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>


		<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">

			<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">现金流量-经营活动产生的现金流量(元)</uni-th>
					<uni-th align="center">总额</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.price }}</uni-td>
				</uni-tr>
			</uni-table>

		</view>

		<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">

			<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="200" align="center">销售渠道类别</uni-th>
					<uni-th align="center">总额</uni-th>
					<uni-th align="center">应收帐款</uni-th>
					<uni-th align="center">扣除应收</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData2" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.totalAmount }}</uni-td>
					<uni-td align="center">{{ item.accountsReceivable }}</uni-td>
					<uni-td align="center">{{ item.deductionAccountsReceivable }}</uni-td>
				</uni-tr>
			</uni-table>


		</view>
		<navigator url="enterpriseRisk?businessName=aaaabbbb&executionTime=2023-03-15" hover-class="navigator-hover">
			<button type="default" style="margin-top: 20px;">测试企业经营页面</button>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
				tableData: [{
						name: "销售商品收到的现金(元)",
						price: "2000000",
					},
					{
						name: "收到其他与经营活动有关的现金(元)",
						price: "28700",
					},
					{
						name: "本项合计",
						price: "123456",
					},
				],
				tableData2: [{
						name: "销售商品收到的现金(元)",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793"
					},
					{
						name: "连锁内加盟",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793"
					},
					{
						name: "配送中心",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793",
					}, {
						name: "连锁外加盟",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793",
					}
				],
				chartData: {},
				opts: {
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group"
						}
					}
				}
			};
		},
		onLoad() {
			this.getServerData();

		},
		methods: {
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
								name: "分销商进货额",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "实际发货额",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 100);
			},
			jump(index) {
				console.log("index>>", index)
				switch (index) {
					case 1:

						break;

					case 2:
						uni.navigateTo({
							url: 'index2'
						});

						break;

					case 3:
						uni.navigateTo({
							url: 'index3'
						});

						break;
				}
			}
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>