<template>
  <div class="overview" v-if="props.overviewData">
    <!-- <card class="card" header="达标情况" shadow="never">
      <standard_condition ref="standardConditionRef" :data="props.overviewData?.reachStandard" />
    </card>
    <card class="card" header="设施调蓄量" shadow="never">
      <facility_storage_capacity ref="facilityStorageCapacityRef" :data="props.overviewData?.facilityStorageCapacityEcharts" />
    </card>
    <card class="card" header="单项设施调蓄量占比" shadow="never">
      <facility_storage_capacity_p ref="facilityStorageCapacityPRef" :radius="['35%', '60%']" :data="props.overviewData?.facilityStorageCapacityEcharts" />
    </card>
    <card class="card" header="设施比例" shadow="never">
      <facility_ratio ref="facilityRatioRef" :data="props.overviewData?.facilityRatio" />
    </card>
    <card class="card" header="分区年径流总量控制率达标情况" shadow="never">
      <annual_runoff_condition ref="annualRunoffConditionRef" :data="props.overviewData?.areaAnnualRunoffEcharts" />
    </card>
    <card class="card" header="造价估算表" shadow="never">
      <template #header>
        <span>造价估算表</span>
        <popover width={ 240 }>
          <span style="font-weight: 700">说明</span>
          <br />
          <span>当项目年径流总量控制率不达标时，该模块不显示</span>
        </popover>
      </template>
      <cost_estimate ref="costEstimateRef" :data="props.overviewData?.costEstimateList"/>
    </card> -->
  </div>
</template>

<script setup>
// import standard_condition from '../../examineManage/components/standard_condition.vue'
// import facility_storage_capacity from '../../examineManage/components/facility_storage_capacity.vue'
// import facility_storage_capacity_p from '../../examineManage/components/facility_storage_capacity_p.vue'
// import facility_ratio from '../../examineManage/components/facility_ratio.vue'
// import annual_runoff_condition from '../../examineManage/components/annual_runoff_condition.vue'
// import cost_estimate from '../../examineManage/components/cost_estimate.vue'
// import popover from '@/components/popover'
// const props = defineProps({
//   id: {
//     type: String,
//     default: ''
//   },
//   overviewData: {
//     type: Object,
//     default: null
//   }
// })
// console.log(props)
</script>

<style lang="scss" scoped>
.overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  ::v-deep(.card) {
    .el-card__header {
      .card-header {
        display: flex;
        align-items: center;
        .el-icon {
          &.icon {
            &.el-tooltip__trigger {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>