<template>
  <view class="performance">
		<view class="grid-card">
			<uni-grid :show-border="false">
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num">{{chartData.TotalCount || 0}}</view>
						<text class="text">总任务数</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num" style="color: #91CB74">{{chartData.unfinishCount || 0}}</view>
						<text class="text">待办数</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num" style="color: #FAC858">{{chartData.timeOverWaitCount || 0}}</view>
						<text class="text">超时待办数</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num" style="color: #EE6666">{{
								(chartData.doneCount || 0) + (chartData.timeOverCount || 0)
							}}</view>
						<text class="text">已办事项</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num" style="color: #73C0DE">{{allFinishRate}}</view>
						<text class="text">完成率</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<view class="num" style="color: #3CA272">{{finishRate}}</view>
						<text class="text">及时完成率</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
<!--		<view class="word-chart">-->
<!--			<qiun-data-charts-->
<!--				type="word"-->
<!--				:opts="wordOpts"-->
<!--				:chartData="wordChartData"-->
<!--			/>-->
<!--		</view>-->
    <view class="line-chart">
			<view class="line-chart-title">任务及时完成率（近6个月）</view>
			<qiun-data-charts
				type="line"
				:opts="lineOpts"
				:chartData="lineChartData"
			/>
    </view>
		<view class="table">
			<uni-table style="width: 100%" border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="100" align="center">月份</uni-th>
					<uni-th width="60" align="center">任务数</uni-th>
					<uni-th width="60" align="center">完成率</uni-th>
					<uni-th width="90" align="center">及时完成率</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, key) in tableData" :key="key">
					<uni-td align="center">{{item.MONTHStr}}</uni-td>
					<uni-td align="center">{{item.TOTAL_QTY}}</uni-td>
					<uni-td align="center">{{item.FINISH_RATE}}%</uni-td>
					<uni-td align="center">{{item.NORMAL_FINISH_RATE}}%</uni-td>
				</uni-tr>
			</uni-table>
		</view>
  </view>
</template>

<script>
	import {
		getChartData,
	} from '../../services/app'
	import { initFilter } from '../../utils/common'

  let uChartsInstance = {}
  export default {
    data() {
      return {
				chartData: {},
				tableData: [],
				lineChartData: {},
				wordChartData: {},
				wordOpts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				},
				lineOpts: {
					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,
						unit: '%'
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
      }
    },
    onReady() {
      // this.getLineServerData();
      // this.getWordServerData();
    },
    async onShow() {
			const orgId = uni.getStorageSync('orgId')
			const { User } = uni.getStorageSync('appInfo')
			const curDate = new Date()
			const curYear = curDate.getFullYear()
			const curMonth = curDate.getMonth()
			let y, m;
			if (curMonth > 5) {
				y = curYear
				m = curMonth - 5
			} else {
				y = curYear - 1
				m = 11 - (curMonth - 6)
			}
			const startTime = uni.$u.timeFormat(new Date(y, m, 1), 'yyyy-mm-dd')

			const endTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
			let json = initFilter(orgId,User.NAME,"","","",startTime, endTime);
			const res = await getChartData(json)
			if (res.IsSuccessful) {
				this.chartData = res.Data
				const preLineChartData = (res.Data?.groupDataLine || []).splice(-6, 6)
				const lineChartConfig = {
					categories: preLineChartData.map(i => i.MONTHStr.split('年')[1]),
					series: [
						{
							name: "完成率",
							data: preLineChartData.map(i => i.FINISH_RATE)
						},
						{
							name: "及时完成率",
							data: preLineChartData.map(i => i.NORMAL_FINISH_RATE)
						}
					]
				}
				this.lineChartData = JSON.parse(JSON.stringify(lineChartConfig));
				this.tableData = res.Data?.groupData || []
			}
    },
    methods: {
			// getLineServerData() {
			// 	//模拟从服务器获取数据时的延时
			// 	setTimeout(() => {
			// 		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// 		let res = {
			// 			categories: ["202201","202201","202201","202201","202201","202201"],
			// 			series: [
			// 				{
			// 					name: "完成率",
			// 					data: [35,8,25,37,4,20]
			// 				},
			// 				{
			// 					name: "及时完成率B",
			// 					data: [70,40,65,100,44,68]
			// 				}
			// 			]
			// 		};
			// 		this.lineChartData = JSON.parse(JSON.stringify(res));
			// 	}, 500);
			// },
			// getWordServerData() {
			// 	//模拟从服务器获取数据时的延时
			// 	setTimeout(() => {
			// 		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// 		let res = {
			// 			series: [
			// 				{
			// 					name: "总任务数(484)",
			// 					textSize: 25,
			// 					data: undefined
			// 				},
			// 				{
			// 					name: "待办数(1)",
			// 					textSize: 20,
			// 					data: undefined
			// 				},
			// 				{
			// 					name: "超时待办数(24)",
			// 					textSize: 20,
			// 					data: undefined
			// 				},
			// 				{
			// 					name: "已办事项(58)",
			// 					textSize: 20,
			// 					data: undefined
			// 				},
			// 				{
			// 					name: "完成率(98%)",
			// 					textSize: 20,
			// 					data: undefined
			// 				},
			// 				{
			// 					name: "及时完成率(66)",
			// 					textSize: 20,
			// 					data: undefined
			// 				}
			// 			]
			// 		};
			// 		this.wordChartData = JSON.parse(JSON.stringify(res));
			// 	}, 500);
			// }
    },
    computed: {
			allFinishRate() {
				const { TotalCount, timeOverCount, doneCount } = this.chartData
				if (TotalCount) {
					return ((doneCount + timeOverCount) / TotalCount * 100).toFixed(1)
				}
				return 0
			},
			finishRate() {
				const { TotalCount, doneCount } = this.chartData
				if (TotalCount) {
					return (doneCount / TotalCount * 100).toFixed(1)
				}
				return 0
			},
    }
  }
</script>

<style scoped>
  .performance {
		padding: 16px;
	}
	.word-chart {
		border: 1px solid #e5e5e5;
		padding: 10px;
		margin-bottom: 16px;
	}
	.line-chart {
		margin-bottom: 26px;
	}
	.line-chart-title {
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		margin-bottom: 16px;
	}
	.grid-card {
		margin-bottom: 26px;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		padding: 8px;
	}
	.grid-item-box {
		flex: 1;
	// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
	// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.grid-item-box .num {
		font-size: 30px;
		font-weight: bold;
	}
	.grid-item-box .text {
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
	}
</style>
