<template>
	<!-- 安全管理 -->
	<view class="safeManage">
		<headers class="fixedheader" :showBack="true" :themeType="'white'">
			<view class="headerName">
				安全管理
			</view>
		</headers>
		<view class="chart_wrap" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }">
			<view class="chart_box">
				<div class="chart_center">
					<view class="chart_title">
						<span>{{totalNum}}</span>
						质量检查总数
					</view>
				</div>
				<u-charts canvas-id="pieChart" chartType="ring" :opts="pieChartData" ref="pieChart" cWidth="150" cHeight="150"></u-charts>
			</view>
			<view class="chart_message" >
				<view class="flex" v-for="(item,index) in manageTypeList" :key="index">
					<view class="name flex">
						<view class="bg_color" :style="{'background-color': colorList[index]}"></view> {{item.typeName}}
					</view>
					<view class="num">{{item.num}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item flex2" @click="goList(1)">
				<view class="flex">
					<image class="icon" style="width: 38rpx; height: 22px; margin-right: 7px;"
						src="../../../static/icon1.png"></image>
					<text>安全检查记录</text>
				</view>
			</view>
			<view class="item flex2" @click="goList(2)">
				<view class="flex">
					<image class="icon" style="width: 44rpx; height: 21px;margin-right: 7px;"
						src="../../../static/icon2.png"></image>
					<text>检查项管理</text>
				</view>
			</view>
			<view>
				<view class="addBtn" @click="addBtn">新增安全检查</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/component.vue';
	export default {
		components:{
			uCharts
		},
		data() {
			return {
				totalNum: 0,
				mendNumber: 0,
				submitNumber: 0,
				pieChartData: {
					title: {
						name: "222",
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
						background:'rgba(0,0,0,0)'
					},
					series: [{
							"data": 1,
							color: '#FA5C53'
						},
						{
							"data": 2,
							color: '#FFCC00'
						},
						{
							"data": 3,
							color: '#6DD400'
						},
						{
							"data": 4,
							color: '#44C5D7'
						},
					]
				},
				manageTypeList:[],
				colorList:['#FA5C53','#FFCC00','#6DD400','#44C5D7'],
				statusBarHeight: 0
			}
		},
		onShow(){
			this.statusBarHeight= uni.getStorageSync('systemInfo').statusBarHeight;
		},
		mounted() {
			this.getListData();
			this.loadData();
		},
		methods: {
			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;
				let projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
				//获取安全检查记录
				this.sendRequest({
					url: 'xmgl/securityManage/selectSecurityManageStatistics',
					method: 'post',
					data: {
						projectSn: projectSn,
					},
					success: res => {
						let result = res.result.total
						this.totalNum = result.totalNum
						let arr = [
							{
								typeName: '待整改数',
								num: result.rectificationNum
							},
							{
								typeName: '待审核数',
								num: result.reviewedNum
							},
							{
								typeName: '无需整改数',
								num: result.totalNum-result.rectificationNum
							},
							{
								typeName: '已闭合数',
								num: result.totalNum
							}
						]
						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;
						console.log(res,this.pieChartData.series);
					}
				});
			
			},

			//列表页
			goList(type) {
				uni.navigateTo({
					url: "./list?type=" + type
				})
			},


			//新增按钮
			addBtn() {
				uni.navigateTo({
					url: "./addSafe?type=add"
				})
			},
		}
	}
</script>

<style>
	.safeManage >>> .headerBox {
		background-color: #13b98c;
	}
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.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_box uni-canvas{
		width: 300rpx !important;
		height: 300rpx !important;
	}
	.chart_message{
		padding-top: 60rpx;
	}
	.chart_wrap .flex{
		width: 240rpx;
		margin: 8rpx 0;
	}
	.chart_wrap .num {
		font-size: 12px;
		color: #fff;
	}
	.chart_center{
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 76rpx;
		top: 56rpx;
	}
	.chart_title{
		background: #0f9c75;
		width: 216rpx;
		height: 216rpx;
		position: absolute;
		z-index: 1;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		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 32rpx 0 20rpx;
	}
	.safeManage .content {
		width: 100%;
		height: 100%;
		padding: 0px 60rpx 0;
		box-sizing: border-box;
		margin-top: -60rpx;
		z-index: 999;
	}
	
	.flex {
		display: flex;
		align-items: center;
	}

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

	.item {
		width: 100%;
		box-sizing: border-box;
		padding: 28rpx 30rpx;
		box-shadow: 0 0 20rpx #d3d3d3;
		margin-bottom: 36rpx;
		border-radius: 8rpx;
		color: rgba(51, 51, 51, 100);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		background-color: #fff;
	}

	.value {
		font-size: 26rpx;
	}

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

	.addBtn {
		position: absolute;
		bottom: 100rpx;
		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>
