<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>达标情况</span>
      </div>
    </template>
    <el-form class="formM5" ref="standForm" :model="form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="面积加和㎡:" prop="areaTotal">
            <span>{{ form.areaTotal }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="硬质地面㎡:" prop="hardGroundRate">
            <template #label>
              <span>硬质地面㎡</span>
              <popover :width="140">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.hardGroundRate }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
            <template #label>
              <span>硬质地面率是否达标</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面占总面积的百分比，跟目标硬质地面对比，大于目标则达标</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="standardMap.get(form.hardGroundStandards)?.text"
              :type="standardMap.get(form.hardGroundStandards)?.type"
            >{{ standardMap.get(form.hardGroundStandards)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="硬质地面率评级:" prop="hardGroundGrade">
            <template #label>
              <span>硬质地面率评级</span>
              <popover width={ 240 }>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>高于目标值，评【差】</span>
                <br />
                <span>低于目标值5%以内，评【中】</span>
                <br />
                <span>低于目标值10%以内，评【良】</span>
                <br />
                <span>低于目标值10%以上，评【优】</span>
                <br />
                <span>包含下限、不包含上限</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="levelMap.get(form.hardGroundGrade)?.text"
              :type="levelMap.get(form.hardGroundGrade)?.type"
            >{{ levelMap.get(form.hardGroundGrade)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
            <span>{{ form.targetStorageCapacity }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设施调蓄量m³:" prop="facilityStorageCapacity">
            <template #label>
              <span>设施调蓄量m³</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>渗透设施、生物滞留设施、传输与截污净化设施的设施面积*有效调蓄深度加和，再加存储设施的调蓄量之和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.facilityStorageCapacity }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="调蓄容积是否达标:" prop="storageCapacityStandards">
            <template #label>
              <span>调蓄容积是否达标</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>跟目标年径流总量控制率对比，大于等于则达标，反之不达标</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="standardMap.get(form.storageCapacityStandards)?.text"
              :type="standardMap.get(form.storageCapacityStandards)?.type"
            >{{ standardMap.get(form.storageCapacityStandards)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设施调蓄量对应年径流总量控制率%:" prop="facilityStorageCapacityToAnnualRunoffTotalControlRate">
            <template #label>
              <span>设施调蓄量对应年径流总量控制率</span>
              <popover :width="300">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>设施调蓄量对应设计降雨=100*设施调蓄量 / (面积加和*综合径流系数)</span>
                <br /><br />
                <span>设施调蓄量对应年径流总量控制率：根据目标年径流总量控制率跟设计降雨关系曲线，由设施调蓄量对应设计降雨推算设施调蓄量对应年径流总量控制率</span>
              </popover>
              <span>:</span>
            </template>
            <span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{ form.facilityStorageCapacityToAnnualRunoffTotalControlRate }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="年径流总量控制率评级:" prop="totalAnnualRunoffGrade">
            <template #label>
              <span>年径流总量控制率评级</span>
              <popover :width="240">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>低于目标值，评【差】</span>
                <br />
                <span>高于目标值5%以内，评【中】</span>
                <br />
                <span>高于目标值10%以内，评【良】</span>
                <br />
                <span>高于目标值10%以上，评【优】</span>
                <br />
                <span>包含下限、不包含上限</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="levelMap.get(form.totalAnnualRunoffGrade)?.text"
              :type="levelMap.get(form.totalAnnualRunoffGrade)?.type"
            >{{ levelMap.get(form.totalAnnualRunoffGrade)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="污染去除率%:" prop="pollutionRemovalRate">
            <template #label>
              <span>污染去除率%</span>
              <popover :width="300">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>污染去除率=设施调蓄量对应年径流总量控制率*各类设施污染去除率*各类设施服务面积/服务面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{ form.pollutionRemovalRate }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="污染去除率是否达标:" prop="pollutionRemovalStandards">
            <template #label>
              <span>污染去除率是否达标</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>跟目标年径流污染控制率对比，大于等于则达标，反之不达标</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="standardMap.get(form.pollutionRemovalStandards)?.text"
              :type="standardMap.get(form.pollutionRemovalStandards)?.type"
            >{{ standardMap.get(form.pollutionRemovalStandards)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年径流污染控制率评级:" prop="pollutionRemovalGrade">
            <template #label>
              <span>年径流污染控制率评级</span>
              <popover :width="240">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>低于目标值，评【差】</span>
                <br />
                <span>高于目标值5%以内，评【中】</span>
                <br />
                <span>高于目标值10%以内，评【良】</span>
                <br />
                <span>高于目标值10%以上，评【优】</span>
                <br />
                <span>包含下限、不包含上限</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="levelMap.get(form.pollutionRemovalGrade)?.text"
              :type="levelMap.get(form.pollutionRemovalGrade)?.type"
            >{{ levelMap.get(form.pollutionRemovalGrade)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="处置客水评级:" prop="disposalOfGuestWaterGrade">
            <template #label>
              <span>处置客水评级</span>
              <popover :width="300">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>在达标测算目标调蓄量以上（包含），5%以内（不包含）评【中】</span>
                <br />
                <span>在达标测算目标调蓄量*5%以上（包含），10%以内（不包含）评【良】</span>
                <br />
                <span>在达标测算目标调蓄量*10%以上（包含）评【优】</span>
                <br />
                <span>包含下限、不包含上限</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="levelMap.get(form.disposalOfGuestWaterGrade)?.text"
              :type="levelMap.get(form.disposalOfGuestWaterGrade)?.type"
            >{{ levelMap.get(form.disposalOfGuestWaterGrade)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>投资情况</span>
      </div>
    </template>
    <el-form class="formM0" ref="investForm" :model="form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="投产比/万元/m³:" prop="productionRatio">
            <span>{{ form.productionRatio }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投资合理性评级:" prop="investmentRationalityRate">
            <template #label>
              <span>投资合理性评级</span>
              <popover :width="240">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>推荐值上下2.5%以内，评【优】</span>
                <br />
                <span>推荐值上下5%以内，评【良】</span>
                <br />
                <span>推荐值上下10%以内，评【中】</span>
                <br />
                <span>推荐值上下10%以上，评【差】</span>
                <br />
                <span>包含下限、不包含上限</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="levelMap.get(form.investmentRationalityRate)?.text"
              :type="levelMap.get(form.investmentRationalityRate)?.type"
            >{{ levelMap.get(form.investmentRationalityRate)?.text }}</el-tag>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>设施分布</span>
      </div>
    </template>
    <new-table :data="tableData" :columns="columns" :loading="loading" :max-height="300" />
  </el-card>
</template>

<script setup lang="jsx">
import { ref, reactive } from 'vue'
import popover from '@/components/popover'
import {
  standardMap,
  standardTextMap,
  verticalRationalityMap,
  levelMap
} from './map'
import { inheritAttr, setEmpty } from '@/utils/v3'
const form = reactive({
  id: '',
  areaTotal: '',
  hardGroundRate: '',
  hardGroundGrade: '',
  hardGroundStandards: '',
  comprehensiveRunoffCoefficient: '',
  targetStorageCapacity: '',
  facilityStorageCapacity: '',
  storageCapacityStandards: '',
  facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
  pollutionRemovalRate: '',
  pollutionRemovalGrade: '',
  pollutionRemovalStandards: '',
  disposalOfGuestWaterGrade: '',
  productionRatio: '',
  investmentRationalityRate: '',
  totalAnnualRunoffGrade: ''
})
const columns = reactive([
  {
    prop: 'areaName',
    label: '排水分区',
    align: 'center',
    fixed: 'left'
  },
  {
    prop: 'subsidenceGreenRate',
    label: '下沉绿地率%',
    width: 120,
    align: 'center',
    headerRender: () => {
      return (
        <Fragment>
          <span>下沉绿地率%</span>
          <popover width={ 240 }>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>下沉绿地+雨水花园占绿地面积</span>
          </popover>
        </Fragment>
      )
    },
  },
  {
    prop: 'greenRoofRatio',
    label: '绿色屋顶率%',
    width: 120,
    align: 'center',
    headerRender: () => {
      return (
        <Fragment>
          <span>绿色屋顶率%</span>
          <popover width={ 240 }>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>绿色屋顶占屋顶面积</span>
          </popover>
        </Fragment>
      )
    },
  },
  {
    prop: 'permeablePavementRatio',
    label: '透水铺装率%',
    width: 120,
    align: 'center',
    headerRender: () => {
      return (
        <Fragment>
          <span>透水铺装率%</span>
          <popover width={ 240 }>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>透水铺装占不透水路面面积</span>
          </popover>
        </Fragment>
      )
    },
  },
  {
    prop: 'targetAnnualRunoffTotalControlRate',
    label: '目标年径流总量控制率%',
    width: 180,
    align: 'center'
  },
  {
    prop: 'targetStorageCapacity',
    label: '目标调蓄量m³',
    width: 120,
    align: 'center'
  },
  {
    prop: 'facilityStorageCapacity',
    label: '设施调蓄量m³',
    width: 120,
    align: 'center'
  },
  {
    prop: 'facilityStorageCapacityToAnnualRunoffTotalControlRate',
    label: '年径流总量控制率%',
    width: 150,
    align: 'center'
  },
  {
    prop: 'annualRunoffControlRate',
    label: '年径流控制率达标',
    width: 150,
    align: 'center',
    render: ({ row }) => {
      return (
        standardTextMap.get(row.annualRunoffControlRate) ?
          <Fragment>
            <el-tag
              type={standardTextMap.get(row.annualRunoffControlRate).type}
            >{ standardTextMap.get(row.annualRunoffControlRate).text }</el-tag>
          </Fragment>
        : null
      )
    }
  },
  {
    prop: 'verticalRationality',
    label: '竖向合理性',
    width: 120,
    align: 'center',
    fixed: 'right',
    headerRender: () => {
      return (
        <Fragment>
          <span>竖向合理性</span>
          <popover width={ 280 }>
            <span style="font-weight: 700">说明</span>
            <br /><br />
            <span style="font-weight: 700">总体</span>
            <br />
            <span>当存在竖向不合理的分区时，评【存在不合理】</span>
            <br />
            <span>当分区竖向全部合理时，评【合理】</span>
            <br /><br />
            <span style="font-weight: 700">分区</span>
            <br />
            <span>地面高程高于设施底高程，评【合理】</span>
            <br />
            <span>反之评【不合理】</span>
          </popover>
        </Fragment>
      )
    },
    render: ({ row }) => {
      return (
        verticalRationalityMap.get(row.verticalRationality) ?
          <Fragment>
            <el-tag
              type={verticalRationalityMap.get(row.verticalRationality).type}
            >{ verticalRationalityMap.get(row.verticalRationality).text }</el-tag>
          </Fragment>
        : null
      )
    }
  }
])
const tableData = ref([])
const loading = ref(false)

const getDetails = (data) => {
  if(data) {
    inheritAttr(data, form)
    tableData.value = data.intelligentReasonableAnalyseList || []
  } else {
    setEmpty(form)
    tableData.value = []
  }
}

defineExpose({
  getDetails
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  &:last-of-type {
    margin-bottom: 0;
  }
  .card-header {
    font-size: 16px;
    font-weight: 700;
  }
}

</style>