<template>
  <div class="overview">
    <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"
        :target-annualRunoff-total-control-rate="props.overviewData?.targetAnnualRunoffTotalControlRate"
      />
    </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: () => ({})
  }
})
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>