<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 '../components/standard_condition.vue';
import facility_storage_capacity from '../components/facility_storage_capacity.vue';
import facility_storage_capacity_p from '../components/facility_storage_capacity_p.vue';
import facility_ratio from '../components/facility_ratio.vue';
import annual_runoff_condition from '../components/annual_runoff_condition.vue';
import cost_estimate from '../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;
  :deep(.card) {
    .el-card__header {
      .card-header {
        display: flex;
        align-items: center;
        .el-icon {
          &.icon {
            &.el-tooltip__trigger {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>