<template>
	<view class="qualityManage">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				安全管理
			</view>
		</headers>
		<view class="problemOverview">
			<view class="overLeft">问题概览</view>
			<view class="overRight">{{nowTime}}</view>
			<view class="problemData">
				<view class="dataBox1 dataStyle">
					<view class="day" v-if="statisticsValue.totalNumDifferYesterday<0">
						较昨日{{statisticsValue.totalNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.totalNumDifferYesterday||0}}</view>
					<view class="num">{{statisticsValue.totalNum}}</view>
					<view class="text">总数</view>
				</view>
				<view class="dataBox2 dataStyle">
					<view class="day" v-if="statisticsValue.oseNumDifferYesterday<0">
						较昨日{{statisticsValue.oseNumDifferYesterday}}</view>
					<view class="day" v-else>
						较昨日+{{statisticsValue.oseNumDifferYesterday||0}}</view>
					<view class="num">{{statisticsValue.overdueNotCloseNum}}</view>
					<view class="text">超期未关闭</view>
				</view>
				<view class="dataBox3 dataStyle">
					<view class="day" v-if="statisticsValue.closeNumDifferYesterday<0">
						较昨日{{statisticsValue.closeNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.closeNumDifferYesterday||0}}</view>
					<view class="num">{{statisticsValue.closeNum}}</view>
					<view class="text">已闭合</view>
				</view>
				<view class="dataBox4 dataStyle">
					<view class="day" v-if="statisticsValue.notCloseNumDifferYesterday<0">
						较昨日{{statisticsValue.notCloseNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.notCloseNumDifferYesterday||0}}</view>
					<view class="num">{{statisticsValue.notCloseNum}}</view>
					<view class="text">未闭合</view>
				</view>
			</view>
			<view class="overDataList">
				待整改
				<span style="margin-left: 35px;">{{statisticsValue.rectificationNum}}</span>
				待复查
				<span style="margin-left: 35px;">{{statisticsValue.reviewNum}}</span>
				待核验
				<span style="margin-left: 35px;">{{statisticsValue.verificationNum}}</span>
			</view>
			<!--  <view class="overData">
        <view>待整改<span style="margin-left: 30px;">{{statisticsValue.rectificationNum}}</span></view>
        <view>待复查<span style="margin-left: 30px;">{{statisticsValue.reviewNum}}</span></view>
        <view>待核验<span style="margin-left: 30px;">{{statisticsValue.verificationNum}}</span></view>
      </view> -->
		</view>
		<view class="commonModules">
			<view class="overLeft">常用模块</view>
			<view class="modulesList">
				<view class="menu" @click="goList(1)">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/newZlgl1.png"></image>
					<view>检查台账</view>
				</view>
				<view class="menu" @click="addBtn" v-if="btnAuth">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/newZlgl2.png"></image>
					<view>新增检查</view>
				</view>
				<view class="menu" @click="addPrjcet">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/xmzlzj.jpg">
					</image>
					<view>项目安全自检</view>
				</view>
				<view class="menu" @click="jumpPage">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/safeMange/danger_check.png">
					</image>
					<view>危大验收</view>
				</view>
				<view class="menu" @click="qualityAlarm">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/safeAlarm.png">
					</image>
					<view>安全分析预警</view>
				</view>
				<view class="menu" @click="specialCheck">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/safeMange/danger_check.png">
					</image>
					<view>特种验收</view>
				</view>
				<view class="menu" @click="reliefApprove">
					<image class="icon" style="width: 30px; height: 30px;" src="@/static/reliefApprove.png">
					</image>
					<view>救援隐患审批</view>
				</view>
				<!-- <view class="moudle-item flex" @click="jumpPage(7)" v-if="COMPANY != 'sanjiang'">
			<image class="moudle-icon" src="/static/safeMange/danger_check.png"></image>
			<text>危大验收</text>
		</view> -->
			</view>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from "../../../components/headers/headers.vue"
	import uCharts from '@/components/u-charts/component.vue';
	var _self;
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				mendNumber: 0,
				submitNumber: 0,
				totalNum: 0,
				pieChartData: {
					title: {
						name: "1",
						color: '#7cb5ec',
						fontSize: 12,
						offsetY: 0,
						background: 'rgba(0,0,0,0)'
					},
					series: [{
							"data": 0,
							color: '#FA5C53'
						},
						{
							"data": 0,
							color: '#FFCC00'
						},
						{
							"data": 0,
							color: '#6DD400'
						},
						{
							"data": 0,
							color: '#44C5D7'
						},
					]
				},
				manageTypeList: [{
						typeName: '待整改数',
						totalNum: 26
					},
					{
						typeName: '待审核数',
						totalNum: 12
					},
					{
						typeName: '无需整改数',
						totalNum: 20
					},
					{
						typeName: '已闭合数',
						totalNum: 10
					}
				],
				colorList: ['#FA5C53', '#FFCC00', '#6DD400', '#44C5D7'],
				statusBarHeight: 0,
				projectSn: '',
				statisticsValue: {
					totalNum: 0, //总数
					closeNum: 0, //已闭合
					notCloseNum: 0, //未闭合
					overdueNotCloseNum: 0, //超期未关闭
					rectificationNum: 0, //待整改
					reviewNum: 0, //待复查
					verificationNum: 0, //待核验
					totalNumDifferYesterday: 0, //
					oseNumDifferYesterday: 0, //
					closeNumDifferYesterday: 0, //
					notCloseNumDifferYesterday: 0, //


				},
				nowTime: '',
				timer: '', //定义一个定时器
				btnAuth: true
			}
		},
		onLoad() {
			this.btnAuth = this.checkPermission({key: 'inspectionLedger_add', menuPath: '/project/safeSame/inspectionLedger'})
		},
		mounted() {
			this.getTime()
			// this.getListData();
			// this.loadData();
		},
		onShow() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			// this.getListData();
			// this.loadData();
			this.getRecordList()
		},
		methods: {
			jumpPage() {
				uni.navigateTo({
					url: '../dangerBigProject/backlogList'
				})
			},
			qualityAlarm() {
				// 质量分析预警
				uni.navigateTo({
					url: "./analysisAlarm"
				})
			},
			specialCheck() {
				//特种验收
				uni.navigateTo({
					url: '../specialOperations/specialCheck'
				})
			},
			reliefApprove() {
				//隐患审批
				uni.navigateTo({
					url: `../emergencyDisposal/index?id=${2}`
				})
			},
			//实时时间
			getTime() {
				this.timer = setInterval(() => {
					let timeDate = new Date()
					let year = timeDate.getFullYear()
					let mounth = timeDate.getMonth() + 1
					let day = timeDate.getDate()
					let hours = timeDate.getHours()
					hours = hours >= 10 ? hours : '0' + hours
					let minutes = timeDate.getMinutes()
					minutes = minutes >= 10 ? minutes : '0' + minutes
					let seconds = timeDate.getSeconds()
					seconds = seconds >= 10 ? seconds : '0' + seconds
					let week = timeDate.getDay()
					let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
					this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
				}, 1000)
			},
			//获取检查记录数据
			getRecordList() {
				let data = {
					projectSn: this.projectSn
				}
				this.sendRequest({
					url: 'xmgl/xzSecurityQualityInspectionRecord/list',
					method: 'post',
					data,
					success: res => {
						this.statisticsValue = res.result.total
						console.log('获取检查记录数据', res)
					}
				})
			},
			loadData() {
				if (this.manageTypeList.length > 0) {
					let arr = [];
					this.manageTypeList.forEach((item, index) => {
						let json = {
							"data": item.totalNum,
							color: this.colorList[index]
						};
						arr.push(json)
					});
					this.pieChartData.series = arr;
				};
			},
			//获取记录
			getListData() {
				let that = this;
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/xzSecurityQualityInspectionRecord/selectQualityStatistics',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						console.log(res)
						this.totalNum = res.result.total.totalNum
						let data = res.result
						let arr = [{
								typeName: '待整改数',
								num: data.total.rectificationNum
							},
							{
								typeName: '待审核数',
								num: data.total.reviewNum
							},
							{
								typeName: '无需整改数',
								num: data.total.totalNum - data.total.rectificationNum
							},
							{
								typeName: '已闭合数',
								num: data.total.closeNum
							}
						]
						this.manageTypeList = arr
						let arr2 = []
						this.manageTypeList.forEach((item, index) => {
							let json = {
								"data": item.num,
								color: this.colorList[index]
							};
							arr2.push(json);
						});
						this.pieChartData.series = arr2;
					}
				})

			},
			//列表页
			goList(type) {
				uni.navigateTo({
					url: "./list?type=" + type
				})
			},
			//新增按钮
			addBtn() {
				uni.navigateTo({
					url: "./addIssue?type=add"
				})
			},
			addPrjcet() {
				// 项目安全自检
				uni.navigateTo({
					url: "./projectList"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qualityManage {
		height: 100%;
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}
	}



	.problemOverview {
		height: 33%;
		// box-sizing: border-box;
		border-radius: 10px;
		border: 3px solid #fafbfc;
		margin: 17% 2%;
		padding: 3% 3%;



		.overRight {
			float: right;
			font-size: 12px;
			color: gray;
		}

		.problemData {
			margin-top: 13%;
			display: flex;

			.dataStyle {
				width: 150px;
				height: 90px;
				text-align: center;

			}

			.dataBox1 {
				background: #ebf1ff;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;

				.day {
					font-size: 12px;
					color: #3a7bff;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #3a7bff;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 5px;
				}
			}

			.dataBox2 {
				background: #fcebec;

				.day {
					font-size: 12px;
					color: #ea3941;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ea3941;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox3 {
				background: #eef9f6;

				.day {
					font-size: 12px;
					color: #5ecba7;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #5ecba7;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox4 {
				background: #fff4e7;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;

				.day {
					font-size: 12px;
					color: #ff9810;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ff9810;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}
		}
	}

	.overDataList {
		padding-left: 7px;
		margin-top: 15px;
	}

	.overDataList>span:not(:last-child)::after {
		content: '|';
		margin: 0 10px;
		color: #e9e9e9;
	}

	.commonModules {
		height: 66%;
		margin: -10% 2%;
		padding: 3% 3%;

		.modulesList {
			// display: flex;
			// margin-top: 15%;
			// flex-wrap: wrap;
			margin-top: 15%;
			display: grid;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);

			.menu {
				text-align: center;
				// margin-left: 30px;
				// margin-bottom: 5%;
				font-size: 14px;
			}
		}
	}

	.overLeft {
		float: left;
		color: #000;
		font-weight: 600;
		font-size: 14px;
	}

	// .smallHeight{
	// 	// height: calc(100% - 45px);
	// 	height: 100%;
	// 	box-sizing: border-box;
	// 	background: #F6F6F6;
	// }

	// .qualityManage >>> .headerBox {
	// 	background-color: #13b98c;
	// }
	// .chart_wrap .chart_box{
	// 	width: 60%;
	// 	position: relative;
	// }
	// .chart_wrap{
	// 	display: flex;
	// 	font-size: 12px;
	// 	color: #fff;
	// }
	// .chart_box #pieChart{
	// 	margin-left: 76rpx !important;
	// 	margin-top: 56rpx !important;
	// }
	// .chart_message{
	// 	margin-left: 60rpx;
	// 	padding-top: 60rpx;
	// }
	// .chart_wrap .flex{
	// 	width: 240rpx;
	// 	margin: 8rpx 0;
	// }
	// .chart_wrap .num {
	// 	font-size: 12px;
	// 	color: #fff;
	// }
	// .chart_title{
	// 	background: #0f9c75;
	// 	width: 216rpx;
	// 	height: 216rpx;
	// 	position: absolute;
	// 	z-index: 1;
	// 	border-radius: 50%;
	// 	left: 116rpx;
	// 	top: 96rpx;
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	// .chart_title span{
	// 	font-size: 24px;
	// }
	// .chart_wrap .bg_color{
	// 	width: 10rpx;
	// 	height: 10rpx;
	// 	border-radius: 50%;
	// 	margin: 0 16px 0 10px;
	// }
	// .qualityManage .content {
	// 	width: 100%;
	// 	height: 100%;
	// 	padding: 0px 30rpx 0;
	// 	box-sizing: border-box;
	// 	margin-top: -30px;
	// 	z-index: 99;
	// }

	// .flex {
	// 	display: flex;
	// 	align-items: center;
	// }

	// .flex2 {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// }

	// .item {
	// 	width: 100%;
	// 	box-sizing: border-box;
	// 	padding: 14px 30rpx;
	// 	box-shadow: 0 0 10px #d3d3d3;
	// 	margin-bottom: 18px;
	// 	border-radius: 4px;
	// 	color: rgba(51, 51, 51, 100);
	// 	font-size: 30rpx;
	// 	font-family: PingFangSC-Regular;
	// 	background-color: #FFFFFF;
	// }

	// .value {
	// 	font-size: 26rpx;
	// }

	// .num {
	// 	margin-right: 5px;
	// 	font-size: 37rpx;
	// 	color: #4181FE;
	// }

	// .addBtn {
	// 	position: absolute;
	// 	bottom: 50px;
	// 	left: 0;
	// 	right: 0;
	// 	width: 60%;
	// 	margin: 0 auto;
	// 	text-align: center;
	// 	padding: 10px 0;
	// 	border-radius: 30px;
	// 	background-color: rgba(65, 129, 254, 0.9);
	// 	font-size: 30rpx;
	// 	color: #fff;
	// 	box-shadow: 0 0 5px rgba(65, 129, 254, 0.7);
	// }

	// .addBtn:active {
	// 	background-color: #4181FE;
	// }
	// .chart_wrap{
	// 	width: 100%;
	// 	height: 480rpx;
	// 	background-image: url(../../../static/titleBg2.png);
	// 	background-size: cover;
	// }
</style>