<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" :data="props.overviewData?.facilityStorageCapacityEcharts" />
    </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 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.overviewData)
</script>

<style lang="scss" scoped>
.overview {
  display: grid;
  grid-template-columns: repeat(2, 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>