<template>
	<div class="dashboard_container">
		<div class="refresh" @click="refreshData">
			<span style="color: #1d82ff;">刷新数据</span>
			<i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
		</div>
		<div class="flex">
			<div class="mode" style="min-width:23%"  @click="gotopage('basicData','','')">
				<div class="title">项目维护统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.allProjectNum}}</div>
							<div class="title">总维护数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.onProjectNum}}</div>
							<div class="title">有效项目数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.endProjectNum}}</div>
							<div class="title">已过期项目数量</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode"  style="min-width:53%">
				<div class="title">不含费用申请单统计</div>
				<div class="flex head">
					<div class="tab" @click="gotopage('applicationWithoutFee','待审核数量','WAIT')">
						<div class="text">
							<div class="num">{{collectData.noPriceWaitNum}}</div>
							<div class="title">待审核数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('applicationWithoutFee','审核通过数量','OK')">
						<div class="text">
							<div class="num">{{collectData.noPriceOKNum}}</div>
							<div class="title">审核通过数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('applicationWithoutFee','审核驳回数量','FAIL')">
						<div class="text">
							<div class="num">{{collectData.noPriceFailNum}}</div>
							<div class="title">审核驳回数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('applicationWithoutFee','已取消数量','NO')">
						<div class="text">
							<div class="num">{{collectData.noPriceNoNum}}</div>
							<div class="title">已取消数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('applicationWithoutFee','已支付数量','PAID')">
						<div class="text">
							<div class="num">{{collectData.noPriceNoPaidNum}}</div>
							<div class="title">已支付数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('applicationWithoutFee','未支付数量','NO_PAID')">
						<div class="text">
							<div class="num">{{collectData.noPricePaidNum}}</div>
							<div class="title">未支付数量</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode"  style="min-width:14%" @click="gotopage('allInclusiveExpense','','')">
				<div class="title">全包费用统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.priceOrderNum}}</div>
							<div class="title">全包费用工程数量</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import {dataCountRepairProject} from "@/api/dataCount.js"
	export default {
		data() {
			return{
				collectData: {
          waitGatherCount: 0,
          waitGatherAmount: 0
        }
			}
		},
		created() {
      this.refreshData()
		},
		methods: {
      refreshData(){
        dataCountRepairProject().then(res=>{
          this.collectData = res.data
          console.log(res,"999")
        })
      },
      gotopage(name,pageName,pageCode){
        if(pageCode){
          this.$router.push({
            name: name,
            params: {
              pageName: pageName,
              pageType: '-',
              pageCode: pageCode,
            },
          })
        }else{
          this.$router.push({
            name: name
          })
        }
      }
		}
	}
</script>

<style scoped lang="scss">
	.dashboard_container {
		background: #f5f5f5;
		padding: 20px;
		min-height: calc(100vh - 86px);
		box-sizing: border-box;

		.refresh {
			text-align: right;
			margin-bottom: 10px;

			span {
				cursor: pointer;
			}

			i {
				font-weight: bold;
				margin-left: 4px;
				cursor: pointer;
			}
		}

		.flex {
			display: flex;
      margin-bottom: 10px;
		}

		.flex_asb {
			display: flex;
			justify-content: space-between;
		}

		.mode {
			flex: 1;
			padding: 10px;
			margin-right: 10px;
			background-color: #ffffff;
			border-radius: 10px;

			.title {
				font-weight: bold;
			}

			.head {
        padding-top: 12px!important;
        margin: 0 !important;
        margin-bottom: 0 !important;
			}

			.opacity {
				opacity: 0;
			}

			.tab {
				display: flex;
				align-items: center;
				flex: 1;
				cursor: pointer;

				.text {
					margin: 0 10px;

					.title {
						color: #999999;
						font-size: 12px;
						margin-top: 8px;
					}

					.num {
						font-size: 22px;
						font-weight: bold;
					}
				}

				.img {
					width: 46px;
					height: 46px;
					margin-left: 20px;
				}
			}

			.child {
				border-right: 1px solid #dddddd;

				.text {
					.title {
						margin-top: 8px;
						margin-bottom: 0;
					}
				}
			}

			.child:last-child {
				border-right: none;
			}
		}

		.mode:last-child {
			margin-right: 0;
		}

		.container_bottom {
			width: 100%;
			height: 350px;
			padding: 10px;
			background-color: #ffffff;
			margin-top: 10px;
			border-radius: 10px;
		}
	}
</style>