<template>
	<view class="content">
		<statusNav navBarTitle="数据看板" returnColor="#c2c2c2"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="project-overview">
					<view class="settlement-type-title">项目概况</view>
					<view class="project-gross">
						<view class="project-gross-title">累计总项目量</view>
						<view class="project-gross-num">
							<view class="li">{{projectCount[4] || 0}}</view>
							<view class="li">{{projectCount[3] || 0}}</view>
							<view class="li">{{projectCount[2] || 0}}</view>
							<view class="li">{{projectCount[1] || 0}}</view>
							<view class="li">{{projectCount[0] || 0}}</view>
						</view>
						<view class="project-gross-box">
							<view class="li">
								<view class="date">今日</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">{{today.project_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">{{today.order_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">{{today.project_rate}}</view>
									</view>
								</view>
							</view>
							<view class="li">
								<view class="date">本周</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">{{week.project_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">{{week.order_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">{{week.project_rate}}</view>
									</view>
								</view>
							</view>
							<view class="li">
								<view class="date">本月</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">{{month.project_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">{{month.order_count}}单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">{{month.project_rate}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data-icon">
					<view class="settlement-type-title">年度项目数据明细</view>
					<view class="">
						<view class="charts-box">
							<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" background="none" />
						</view>
					</view>
				</view>
				<view class="serve-data">
					<view class="settlement-type-title">服务数据</view>
					<view class="serve-data-box">
						<view class="serve-data-left">
							<view class="title">本月服务量</view>
							<view class="text-con">
								<view class="li" v-for="(item,index) in serviceData.month" :key="index">
									<view class="text">{{item.title}}:</view>
									<view class="num">{{item.num}}</view>
								</view>
							</view>
						</view>
						<view class="serve-data-left">
							<view class="title">累计服务量</view>
							<view class="text-con">
								<view class="li" v-for="(item,index) in serviceData.allArr" :key="index">
									<view class="text">{{item.title}}:</view>
									<view class="num">{{item.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data-icon">
					<view class="settlement-type-title">年度服务数据汇总</view>
					<view class="">
						<view class="charts-box">
							<qiun-data-charts type="mix" :opts="opts2" :chartData="chartDataA" background="none" />
						</view>
					</view>
				</view>
				<view class="expire-project">
					<view class="settlement-type-title settlement-type-titlea">质保即将到期项目</view>
					<view class="expire-project-box">
						<view class="li-title li">
							<view class="name">项目名称</view>
							<view class="work-order">工单</view>
							<view class="date">日期</view>
						</view>
						<view class="li-text li" v-for="(item,index) in warranty_expires" :key="index">
							<view class="name">{{index+1}}、{{item.project_name}}</view>
							<view class="work-order">{{item.order_count}}</view>
							<view class="date">{{item.joint_end_time.slice(2)}}</view>
						</view>
					</view>
				</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
				projectCount:[],//累计总项目量
				today:'',//今日数据
				week:'',//本周数据
				month:'',//本月数据
				chartData: {
					categories: ["1月","2月","3月","4月","5月","6月"],
					series: [
						{
							name: "",
							index: 1,
							data: [40,30,55,110,24,58],
							type: "column",
							color: "#fe4141"
						},
						{
							name: "",
							data: [40,30,55,110,24,58],
							type: "line",
							color: "#fe4141"
						},
						{
							name: "",
							index: 2,
							data: [40,30,55,110,24,58],
							type: "point",
							color: "#fe4141"
						}
					]
				},
				opts: {
					padding: [15,15,0,15],
					legend: {},
					fontColor:'#FF0000',
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "solid",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [
				            {
							  min: 0,
							  max: 5000,
				            },
				            {
				              min: 0,
				              max: 5000,
				            },
				            {
				              min: 0,
				              max: 5000,
				            }
						]
					},
					extra: {
						mix: {
							column: {
								linearType:"custom",
								width: 20,
								linearOpacity:0.6,
								customColor:["#FF0000","#fc7575"],
							},
						}
					},
				},
				serviceData:{month:[],allArr:[]},//服务数据
				chartDataA: {
					categories: ["1月","2月","3月","4月","5月","6月"],
					series: [
						{
							name: "",
							index: 1,
							data: [40,30,55,110,24,58],
							type: "column",
							color: "#308de1"
						},
						{
							name: "",
							data: [40,30,55,110,24,58],
							type: "line",
							color: "#308de1"
						},
						{
							name: "",
							index: 2,
							data: [40,30,55,110,24,58],
							type: "point",
							color: "#308de1"
						}

					]
				},
				opts2: {
					padding: [15,15,0,15],
					legend: {},
					fontColor:'#308de1',
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "solid",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [
				            {
							  min: 0,
							  max: 5000,
				            },
				            {
				              min: 0,
				              max: 5000,
				            },
				            {
				              min: 0,
				              max: 5000,
				            }
						]
					},
					extra: {
						mix: {
							column: {
								linearType:"custom",
								width: 20,
								linearOpacity:0.6,
								customColor:["#308de1","#5bc2f2"],
							},
						}
					},
				},
				// 质保即将到期项目
				warranty_expires:[]
			}
		},
		onLoad() {
			this.checkSJ();
		},
		methods: {
			// 查询数据看板数据
			checkSJ() {
				this.$requst.get('/universal/api.statistics/data_kanban').then(res=>{
					if(res.code) {
						// 累计总项目量
						let projectCountNum = res.data.project_count.toString().split(',');
						if(projectCountNum.length > 1) {
							this.projectCount = projectCountNum.reverse();
						} else {
							this.projectCount = projectCountNum;
						}
						// 今日数据
						this.today = res.data.today;
						// 本周数据
						this.week = res.data.week;
						// 本月数据
						this.month = res.data.month;
						// 年度项目数据明细
						let yearProject = [[],[]];
						res.data.project_month.forEach((item,index)=>{
							if(index < 12) {
								yearProject[0].push(item.name+'月');
								yearProject[1].push(item.value);
							}
						})
						this.chartData.categories = yearProject[0];
						this.chartData.series[0].data = yearProject[1];
						this.chartData.series[1].data = yearProject[1];
						this.chartData.series[2].data = yearProject[1];
						let maxNum = Math.max.apply(null, yearProject[1]);
						// 服务数据：本月服务量
						for (let key in res.data.service.month) {
							this.serviceData.month.push({title: key,num:res.data.service.month[key]});
						}
						// 服务数据：累计服务量
						for (let key in res.data.service.all) {
							this.serviceData.allArr.push({title: key,num:res.data.service.all[key]});
						}
						// 年度服务数据汇总
						let yearService = [[],[]];
						res.data.order_month.forEach((item,index)=>{
							if(index < 12) {
								yearService[0].push(item.name+'月');
								yearService[1].push(item.value);
							}
						})
						this.chartDataA.categories = yearService[0];
						this.chartDataA.series[0].data = yearService[1];
						this.chartDataA.series[1].data = yearService[1];
						this.chartDataA.series[2].data = yearService[1];
						let maxNum2 = Math.max.apply(null, yearService[1]);
						// 质保即将到期项目
						this.warranty_expires = res.data.warranty_expires;
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 0rpx 10rpx;
	}

	.charts-box {
		width: 100%;
	}

	.settlement-type-title {
		font-size: 32rpx;
		color: #2c2c2c;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.settlement-type-title::before {
		content: "";
		margin-right: 22rpx;
		width: 6rpx;
		display: block;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(#307ade, #08adf8)
	}

	.project-overview {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 26rpx 24rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.project-gross {
		margin-top: 25rpx;
	}

	.project-gross .project-gross-title {
		color: #2c2c2c;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;

	}

	.project-gross-num {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		margin-bottom: 27rpx;
	}

	.project-gross-num .li {
		width: 76rpx;
		height: 94rpx;
		text-align: center;
		font-size: 60rpx;
		color: #FFFFFF;
		line-height: 94rpx;
		margin: 0 4rpx;
		background-color: #00a0e9;
		border-radius: 10rpx;
	}

	.project-gross-box .li {
		margin-bottom: 50rpx;
	}

	.project-gross-box .li .date {
		color: #2C2C2C;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.project-gross-box .li .date::before {
		content: "";
		display: block;
		width: 10rpx;
		margin-right: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #FFBB31;
	}

	.project-gross-box .li .date-con {
		display: flex;
		padding: 0 23rpx;
		padding-right: 0rpx;
		margin-top: 20rpx;
	}

	.project-gross-box .li .date-con .date-con-li {
		border-right: 2rpx solid #E6E6E6;
		padding-right: 58rpx;
		padding-left: 60rpx;
	}

	.project-gross-box .li .date-con .date-con-li:first-child {
		text-align: left;
		padding-left: 0rpx;
	}

	.project-gross-box .li .date-con .date-con-li:last-child {
		border: none;
	}

	.project-gross-box .li .date-con .date-con-li .text {
		font-size: 24rpx;
		color: #a2a2a2;
	}

	.project-gross-box .li .date-con .date-con-li .single-amount {
		font-size: 30rpx;
		color: #f8b21b;
		margin-top: 10rpx;
	}

	.data-icon {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 26rpx 24rpx;
		margin-top: 15rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.serve-data {
		padding: 26rpx 24rpx;
		margin-top: 27rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;
	}

	.serve-data-box {
		display: flex;
		margin-top: 27rpx;

	}

	.serve-data-box .serve-data-left {
		width: 50%;
	}

	.serve-data-box .serve-data-left .title {
		font-size: 28rpx;
		color: #2c2c2c;
		font-weight: bold;
		display: flex;
		align-items: center;

	}

	.serve-data-box .serve-data-left .title::before {
		content: "";
		width: 10rpx;
		display: block;
		border-radius: 50%;
		margin-right: 13rpx;
		height: 10rpx;
		background-image: linear-gradient(#5fc0f0, #297ddc);
	}

	.serve-data-box .serve-data-left .li {
		display: flex;
		margin-top: 40rpx;
	}

	.serve-data-box .serve-data-left .li .text {
		width: 130rpx;
		font-size: 24rpx;
		color: #a2a2a2;
		margin-right: 20rpx;
		text-align: right;
	}

	.serve-data-box .serve-data-left .li .num {
		width: 130rpx;
		font-size: 24rpx;
		color: #27cdc9;
		font-weight: bold;
	}

	.serve-data-box .serve-data-left:nth-child(2) {
		padding-left: 32rpx;
	}

	.expire-project {
		padding: 26rpx 24rpx;
		margin-top: 27rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		background-color: #FFFFFF;
	}

	.settlement-type-titlea::before {
		content: "";
		margin-right: 22rpx;
		width: 6rpx;
		display: block;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(#2ed5b6, #2fd9cf)
	}

	.expire-project-box .li-title {
		display: flex;
		width: 100%;
		font-size: 28rpx;
		color: #a2a2a2;
		margin-top: 20rpx;
	}

	.expire-project-box .li-title .name {
		padding-left: 80rpx;
		box-sizing: border-box;
	}

	.expire-project-box .li .name {
		width: 455rpx;
	}

	.expire-project-box .li .work-order {
		width: 80rpx;
		text-align: center;
	}

	.expire-project-box .li .date {
		flex: 1;
		text-align: center;
	}

	.expire-project-box .li-text {
		display: flex;
		padding: 17rpx 0rpx;
		font-size: 24rpx;
		border-bottom: 2rpx solid #E6E6E6;
		color: #27cdc9;
	}

	.expire-project-box .li-text .name {
		color: #333333;
	}

	.expire-project-box .li-text:last-child {
		border: none;
	}
</style>
