<template>
	<view class="content">

		<view>
			<view class="top_select">
				<text class="top_select_text">选择日期</text>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="queryParams.date" @change="dateChange" />
			</view>

			<view class="top_select" style="display: flex;">
				<text class="top_select_text">选择类型</text>
				<uni-data-select style="flex-grow: 1;" v-model="queryParams.type" :localdata="range"
					@change="typeChange"></uni-data-select>
			</view>

			<view class="top_select_btn">

				<button class="mini-btn" type="primary" size="mini" @click="doQuery()">查询</button>

				<button class="mini-btn" type="primary" size="mini" @click="doReset()">重置 </button>
			</view>

		</view>


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

		</view>


		<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;  width: 100%;
	    height: 300px;">
			<qiun-data-charts type="pie" :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 width="60" align="center">序号</uni-th>
					<uni-th align="center">供应商名称</uni-th>
					<uni-th width="120" align="center">全部到货日期</uni-th>
					<uni-th width="120" align="center">是否延期</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{item.num}}</uni-td>
					<uni-td align="center">{{ item.supplierName }}</uni-td>
					<uni-td align="center">{{ item.allArrivedDate }}</uni-td>
					<uni-td align="center">{{ item.isDelay }}</uni-td>
				</uni-tr>
			</uni-table>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				newDate: this.getDate(),
				// 类型1.全部,2.常规商品3.烟草
				range: [{
						"value": 1,
						"text": "全部",
					},
					{
						"value": 2,
						"text": "常规商品",
					}, {
						"value": 3,
						"text": "烟草",
					}
				],
				tableData: [{
						"isDelay": "是",
						"supplierName": "中粮可口可乐饮料（河北）有限公司",
						"num": 1,
						"supplierSid": "28",
						"allArrivedDate": "1993-10-16"
					},
					{
						"isDelay": "否",
						"supplierName": "中顺洁柔纸业股份有限公司",
						"num": 2,
						"supplierSid": "18",
						"allArrivedDate": "1993-08-12"
					},
					{
						"isDelay": "是",
						"supplierName": "今麦郎食品股份有限公司石家庄分公司",
						"num": 3,
						"supplierSid": "08",
						"allArrivedDate": "2003-12-16"
					},
					{
						"isDelay": "是",
						"supplierName": "农夫山泉股份有限公司",
						"num": 4,
						"supplierSid": "48",
						"allArrivedDate": "2013-10-16"
					},
					{
						"isDelay": "否",
						"supplierName": "北京百事可乐饮料有限公司",
						"num": 5,
						"supplierSid": "12",
						"allArrivedDate": "2008-03-11"
					},
					{
						"isDelay": "是",
						"supplierName": "今麦郎食品股份有限公司石家庄分公司",
						"num": 6,
						"supplierSid": "03",
						"allArrivedDate": "1996-11-20"
					},
					{
						"isDelay": "是",
						"supplierName": "农夫山泉股份有限公司",
						"num": 7,
						"supplierSid": "68",
						"allArrivedDate": "2022-10-23"
					},
					{
						"isDelay": "否",
						"supplierName": "北京百事可乐饮料有限公司",
						"num": 8,
						"supplierSid": "88",
						"allArrivedDate": "2014-06-02"
					}
				],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				queryParams: {
					customerSid: "",
					date: "",
					type: "",
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getDate() {
				var tempDate = new Date() // 获取今天的日期
				tempDate.setDate(tempDate.getDate() - 1) // 今天的前N天的日期，N自定义
				var endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate()
				console.log(endDate)
				return endDate
			},
			dateChange(e) {
				console.log('----dateChange事件:', e);

			},
			typeChange(e) {
				console.log('e:', e);
				this.queryParams.type = e
			},
			doQuery() {
				this.newDate = this.queryParams.date
				this.getServerData();
			},
			doReset() {
				this.queryParams = {
					customerSid: "",
					date: "",
					type: "",
				}
				this.newDate = this.getDate()
				this.getServerData();
			},
			getServerData() {
				// 	var _this = this
				// 	this.$api.getSalesReport(_this.queryParams).then((resp) => {
				// 			// if (resp.success) {
				// 			console.log('1111', resp.data)
				// 			//   const data = resp.data
				// 			//   _this.dataList = data.financialData
				// 			//   _this.listSalesChannelData = data.listSalesChannelData
				// 			//   _this.drawLine(data.financialAnalysisChartData)
				// 			//   this.tableLoading = false
				// 			// } else {
				// 			//   // 根据resp.code进行异常情况处理
				// 			//   _this.dataList = []
				// 			//   _this.listSalesChannelData = []
				// 		}
				// 	}).catch(e => {
				// 	console.log('eeeee', e)
				// 	_this.tableLoading = false
				// })
				let source = [{
						"value": 2313123,
						"name": "订单总额"
					},
					{
						"value": 4359354,
						"name": "实际到货价值"
					},
					{
						"value": 2313123,
						"name": "在途货价值"
					},
					{
						"value": 56516849,
						"name": "超出价值"
					}
				]

				// let res = {
				// 	series: [{
				// 		data: source,
				// 	}]
				// };

				// this.chartData = JSON.parse(JSON.stringify(res));

				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: source
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.content {
		background: #fff;
		padding-top: 10px;
	}

	.top_select {
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		flex-direction: row;
		margin-top: 10px;
		align-items: center;
	}

	.top_select_text {
		margin-right: 10px;
	}

	.top_select_btn {
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		flex-direction: row;
		margin-top: 15px;
		align-items: center;
	}
</style>
