<template>
	<ChartCard margin="0 0 20rpx 0" title="项目安全检查数据">
		<view class="defect">
			<!-- <u-subsection :list="list" :current="current" @change="handleChange"></u-subsection> -->
			<view class="defect-main u-flex u-row-between" @click="router.push('/pages/index/projectSafety/index')">
				<!-- <view class="defect-box gb-all">
					<text class="defect-box-lab">安全隐患</text>
					<text class="defect-box-num u-margin-top-20">4567</text>
				</view> -->
				<view class="defect-box gb-rectified">
					<text class="defect-box-lab">项目检查数</text>
					<text class="defect-box-num u-margin-top-20">{{ hsseProblem?.ProjectProblemNum || 0 }}</text>
				</view>
				<view class="defect-box gb-rectified">
					<text class="defect-box-lab">项目未完成数</text>
					<text class="defect-box-num u-margin-top-20">{{ hsseProblem?.ProjectProblemNotCompletedNum || 0 }}</text>
				</view>
				<!-- <view class="defect-box gb-rectified-rate">
					<text class="defect-box-lab">整改率</text>
					<text class="defect-box-num u-margin-top-20">99.99%</text>
				</view> -->
			</view>
		</view>
	</ChartCard>
</template>
<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, watch } from 'vue';
import { router } from '@/utils'
let props = defineProps({
	hsseProblem: {
		type: Object,
		default: () => {}
	}
});
const current = ref(0);
const list = ref([
	{
		name: '集团级'
	},
	{
		name: '公司级'
	},
	{
		name: '项目级'
	},
	{
		name: '分支机构'
	}
]);

const handleChange = () => {};
</script>
<style lang="scss">
.defect {
	&-main {
		height: 120rpx;
	}

	&-box {
		width: 100%;
		// width: calc((100% - 40rpx) / 4);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&-lab {
			font-size: 24rpx;
			color: #ffffff;
		}

		&-num {
			font-size: 28rpx;
			font-weight: 600;
			color: #ffffff;
		}
	}
}

.gb-all {
	background: linear-gradient(to top right, #9e9e9e, #dcdcdc);
}

.gb-not-rectified {
	background: linear-gradient(to top right, #ffd626, #ff9f7d);
}

.gb-rectified {
	background: linear-gradient(to top right, #2488fa, #79baff);
}

.gb-rectified-rate {
	background: linear-gradient(to top right, #2ad192, #8df0c9);
}
</style>
