<template>
	<!-- 质量管理 -->
	<view class="qualityManage">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				质量管理
			</view>
		</headers>
		<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
		<view class="chart_wrap">
			<!-- <view class="chart_box">
				<view class="chart_title">
					<span>{{totalNum}}</span>
					质量检查总数
				</view>
				<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">
				<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>
		</scroll-view>
	</view>
</template>

<script>
	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
			}
		},
		mounted(){
			// this.getListData();
			// this.loadData();
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			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/qualityInspectionRecord/selectQualityStatistics',
					method: 'post',
					data: {
						projectSn: 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"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		/deep/.headerBox{
			background: #13b98c;
		}
	}
	.smallHeight{
		// height: calc(100% - 45px);
		height: 100%;
		box-sizing: border-box;
		background: #F6F6F6;
	}
	.qualityManage{
		height: 100%;
	}
	.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>
