<template>
	<view class="message">
		<view class="login-container">
			<view class="tips-text">
				<view class="tips-textIndex">
					<view>派出所</view>
					<view>{{nameTitleList.borough}}</view>
				</view>
				<view class="tips-textIndex">
					<view>学校</view>
					<view>{{nameTitleList.station}}</view>
				</view>
				<view class="tips-textIndex">
					<view>教职员工</view>
					<view>{{nameTitleList.student}}</view>
				</view>
			</view>
			<view
				style="position: absolute; z-index: 9999; font-size: 10px;margin-left: 21px;margin-top: 5px;color: #9e9fa1;">
				检查记录</view>
			<view class="nameTitle">
				<view class="itemschool" @click="OnStarCount">
					<span>
						 <image src="../../static/school/星级评定.png"></image>
					</span>
					<!-- <span>{{nameTitleList.schoolStarCount}}</span> -->
					<span>星级评定</span>
				</view>
				<view class="itemschool" @click="onColorCount">
					<span>
						 <image src="../../static/school/三色预警.png"></image>
					</span>
					<!-- <span>{{nameTitleList.schoolColorCount}}</span> -->
					<span>三色预警</span>
				</view>
				<view class="itemschool">
					<span>
						 <image src="../../static/school/日常检查.png"></image>
					</span>
					<!-- <span>{{nameTitleList.schoolCheckCount}}</span> -->
					<span>安全检查</span>
				</view>
				<view class="itemschool">
					<span>
						 <image src="../../static/school/整改工单.png"></image>
					</span>
					<!-- <span>{{nameTitleList.schoolTaskCount}}</span> -->
					<span>工单管理</span>
				</view>
			</view>
		</view>
		<!-- 图表 -->
        
		
		<view style="margin-top: 70px;">
			<view   style="margin-left: 10px;color: #1c1208;display: flex;justify-content: space-between;height: 22px;"  >
				<view>护校打卡走势</view>
				<view @click="SignClick" class="datacharts">数据详情<text class="iconoscope"></text></view>
			</view>
			<view class="charts-box">
				<qiun-data-charts :canvas2d="true" type="line" :opts="opts" :chartData="chartData" />
			</view>			
		</view>
		<view style="background: #e9eef4;margin-top: 14px;height: 9px;"></view>
		<view >
			<view   style="margin-left: 10px;color: #1c1208;display: flex;justify-content: space-between;height: 22px" >
				<view>风采上传走势</view>
				<!-- <button @click="colorClick">数据详情</button> -->
				<view @click="colorClick" class="datacharts" >数据详情<text class="iconoscope"></text></view>
			</view>
			<view class="charts1-box">
				<qiun-data-charts :canvas2d="true" type="line" :opts="op1ts" :chartData="chart1Data" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		optsEnum,
		opts1Enum
	} from './chartsenum.js'
	import {
		getpendsystemCount,
		getpendssignWeeks,
		getpendnewsWeeks
	} from '../../api/login.js'
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: optsEnum,

				chart1Data: {},
				op1ts: opts1Enum,
				nameTitleList: undefined,
				signcount: undefined,
				endTime: undefined,
				newscount: undefined,
				endTimenews: undefined,

			};
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo',
			})
		},
		beforeDestroy() {
			uni.removeStorage({
				key: 'chartsColor'
			})
			uni.removeStorage({
				key: 'charts'
			})

		},
	    onLoad() {
			  this.getpendsystem();
			  this.getpendssign()
			  this.getpendnews()
		},
		onShow() {},
		created() {},
		onReady() {
			// setTimeout(()=>{
				this.getServerData();
				this.getServer1Data()
			// },200)
		},
		mounted() {},
		methods: {
			...mapMutations({
				clearuserInforma: 'users/clearuserInforma'
			}),

			//接口
			async getpendsystem() {
				const listdata = {
					schoolTime: '2023年上半年',
					brigade: '长沙芙蓉区'
				}
				const resp = await getpendsystemCount(listdata)
				this.nameTitleList = resp.data

			},
			// 打卡统计数
			async getpendssign() {
				const resp = await getpendssignWeeks({
					brigade: '长沙芙蓉区'
				})
				this.signcount = resp.data.map(item => item.count)
				console.log(this.signcount);
				this.endTime = resp.data.map((item) => {
					return item.endTime.substring(0, 10)
				})
			},
			// 风采统计数
			async getpendnews() {
				const resp = await getpendnewsWeeks({
					brigade: '长沙芙蓉区'
				})
				this.newscount = resp.data.map(item => item.count)
				this.endTimenews = resp.data.map((item) => {
					return item.endTime.substring(0, 10)
				})

			},

			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.endTime,
						series: [{
							name: "护校打卡走势",
							linearColor: [
								[
									0,
									"#9aa2d2"
								],
								[
									0.25,
									"#97a0d1"
								],
								[
									0.5,
									"#a5add7"
								],
								[
									0.75,
									"#9fa7d4"
								],
								[
									1,
									"#d3d6ec"
								]
							],
							setShadow: [
								3,
								8,
								10,
								"#9aa2d2"
							],
							data: this.signcount
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 1000);
			},

			getServer1Data() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.endTimenews,
						series: [{
							name: "风采上传走势",
							linearColor: [
								[
									0,
									"#9aa2d2"
								],
								[
									0.25,
									"#97a0d1"
								],
								[
									0.5,
									"#a5add7"
								],
								[
									0.75,
									"#9fa7d4"
								],
								[
									1,
									"#d3d6ec"
								]
							],
							setShadow: [
								3,
								8,
								10,
								"#9aa2d2"
							],
							data: this.newscount
						}]
					};
					this.chart1Data = JSON.parse(JSON.stringify(res));
				}, 1000);
			},

			// 星级跳转
			OnStarCount() {
				uni.navigateTo({
					url: `/components/starRecord/starRecord?index=${1}`
				})
				console.log();
			},
			onColorCount() {
				uni.navigateTo({
					url: `/components/tricolorRecord/tricolorRecord?index=${2}`
				})
			},
			SignClick(){
				console.log(121323);
				uni.navigateTo({
					url: `/components/signList/signList`
				})
			},
			colorClick(){
				console.log(121323);
				 uni.navigateTo({
				 	url: `/components/colorUpload/colorUpload`
				 })
			}
			// 获取用户的基本信息 授权之后
			// 点击退出跳转到登录页
		}
	};
</script>

<style scoped lang="scss">
	.message {
		// padding: 20rpx;
		height: 100vh;
		background-color: #fff;
		// position: relative;
	}

	.login-container {
		height: 257rpx;
		align-items: center;
		background-image: url('../../static/login/banner.png');
		background-repeat: no-repeat;
		background-position: right;
		overflow: hidden;
		padding: 45rpx;
		box-sizing: border-box;
		line-height: 26px;

		.tips-text {
			display: flex;
			font-size: 28rpx;
			color: #fff;
			align-items: center;
			margin-top: 32rpx;
			justify-content: space-around;
			text-align: center;

			.tips-textIndex view:nth-child(1) {
				font-size: 12px;
			}

			.tips-textIndex view:nth-child(2) {
				font-size: 18px;
			}

		}

		.nameTitle {
			position: absolute;
			top: 198rpx;
			left: 25px;
			height: 172rpx;
			background-color: #f6f8ff;
			width: 650rpx;
			border-radius: 12rpx;
			box-shadow: 0px 10px 10px -4px #dde3fc;
			display: flex;
			font-size: 14px;
			align-items: center;

			.itemschool {
				width: 120px;
				border-right: solid 1.5rpx #dadada;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30rpx
			}

			.itemschool span:nth-child(1) {
				font-size: 22px;
				color: #5c7dfd;
				height: 25px;
				width: 25px;
				image{
					    width: 100%;
					    height: 100%;
				}
				
			}

			.itemschool span:nth-child(2) {
				font-size: 17px;
				color: #aaabad;
			}
		}

		.nameTitle .itemschool:nth-child(2) {
			span:nth-child(2) {
				// margin-left: -46rpx;
			}
		}

		.nameTitle .itemschool:nth-child(4) {
			border-right: none;

			span:nth-child(2) {
				// margin-left: -44rpx;
			}
		}
	}
	.iconoscope {
		width: 8px;
		height: 8px;
		display: inline-block;
		border: solid 2px #ccc;
		/* margin-left: 10px; */
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		border-bottom: white;
		border-left: white;
	}
	
	.datacharts{
		 height: 25px;
		 margin-right: 17px;
		 color: #5c7dfd;
		 // background-color: #dadada;
		 z-index: 99999;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
		margin-top: 5px;
	}

	.charts1-box {
		width: 100%;
		height: 400rpx;
		margin-top: 5px;

	}
</style>