<template>
  <div class="project">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="title">项目目标</span>
          <el-icon
            class="icon"
            v-show="props.step === 1"
            @click="visible = true"
          ><ChatLineSquare /></el-icon>
        </div>
      </template>
      <el-form class="formM5" ref="projectForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="建设工程:" prop="projectNo">
              <span>{{ form.projectName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工程类型:" prop="engineeringType">
              <span>{{ findText('sponge_engineering_type', form.engineeringType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设分区:" prop="drainagePartition">
              <span>{{ findText('drainage_partition', form.drainagePartition) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设类型:" prop="buildCategory">
              <span>{{ findText('build_category', form.buildCategory) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="面积㎡:" prop="area">
              <span>{{ form.area }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年径流总量控制率%，≥:" prop="annualRunoffTotalControlRate">
              <span>{{ form.annualRunoffTotalControlRate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年径流污染控制率%，≥:" prop="annualRunoffPollutionControlRate">
              <span>{{ form.annualRunoffPollutionControlRate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="硬质地面率%，＜:" prop="hardGroundRate">
              <span>{{ form.hardGroundRate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="处置客水m³:" prop="disposalOfGuestWater">
              <span>{{ form.disposalOfGuestWater }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设计降雨mm:" prop="designRainfall">
              <template #label>
                <span>设计降雨mm</span>
                <popover :width="240">
                  <span style="font-weight: 700">说明</span>
                  <br />
                  <span>根据目标年径流总量控制率跟设计降雨关系曲线，由年径流总量控制率推算设计降雨</span>
                </popover>
                <span>:</span>
              </template>
              <span>{{ form.designRainfall }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="海绵设施投资/万元:" prop="spongeInvest">
              <span>{{ form.spongeInvest }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推荐投产比（万元/m3):" prop="recommendedProductionRatio">
              <span>{{ form.recommendedProductionRatio }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
  <el-dialog
    v-model="visible"
    title="建设工程审查"
    :close-on-click-modal="false"
    width="40%"
    class="dialog"
  >
    <card header="结论" shadow="never" v-if="props.investigateData?.conclusions?.length">
      <div class="conclusion">
        <div
          class="conclusion-item"
          v-for="(item, index) in props.investigateData.conclusions"
        >
          <span>{{ `${index + 1}： ${item}` }}</span>
          <br /><br v-if="index < props.investigateData.conclusions.length - 1" />
        </div>
      </div>
    </card>
    <card header="建议" class="suggestCard" shadow="never" v-if="props.investigateData?.suggests?.length">
      <div class="suggest">
        <div
          class="suggest-item"
          v-for="(item, index) in props.investigateData.suggests"
        >
          <span>{{ `${index + 1}： ${item}` }}</span>
          <br /><br v-if="index < props.investigateData.suggests.length - 1" />
        </div>
      </div>
    </card>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { useDicts } from '@/hooks'
import popover from '@/components/popover'
import { ChatLineSquare } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['select-change'])
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  list: {
    type: Array,
    default: () => []
  },
  step: {
    type: [Number, String],
    default: 0
  },
  investigateData: {
    type: Object,
    default: () => ({})
  }
})
const { findText } = useDicts(proxy)
const form = computed(() => {
  return props.data
})
const visible = ref(false)
</script>

<style lang="scss" scoped>
.project {
  margin-bottom: 10px;
  .suggestCard {
    margin-top: 10px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      font-size: 20px;
      cursor: pointer;
    }
    .title {
      font-size: 16px;
      font-weight: 700;
    }
  }

  .conclusion-item,
  .suggest-item {
    line-height: 1.5;
  }
}
</style>