<template>
  <div class="project">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>项目目标</span>
        </div>
      </template>
      <el-form class="form" ref="targetForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="建设工程:" prop="projectNo">
              <el-select
                v-model="form.projectNo"
                placeholder="建设工程"
                v-if="props.opts.type === 'add'"
                :disabled="props.disabled"
              >
                <el-option
                  v-for="item in props.list"
                  :label="item.projectName"
                  :value="item.projectNo"
                  :key="item.projectNo"
                  @click="selectChange(item)"
                />
              </el-select>
              <span v-else>{{ form.projectName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工程类型:" prop="engineeringType">
              <span>{{ findText('sponge_engineering_type', form.engineeringType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建设分区:" prop="drainagePartition">
              <span>{{ findText('drainage_partition', form.drainagePartition) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="建设类型:" prop="buildCategory">
              <span>{{ findText('build_category', form.buildCategory) }}</span>
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="面积㎡:" prop="area">
              <span>{{ form.area }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年径流总量控制率%，≥:" prop="annualRunoffTotalControlRate">
              <span>{{ form.annualRunoffTotalControlRate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年径流污染控制率%，≥:" prop="annualRunoffPollutionControlRate">
              <span>{{ form.annualRunoffPollutionControlRate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硬质地面率%，＜:" prop="hardGroundRate">
              <span>{{ form.hardGroundRate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <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-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import popover from '@/components/popover'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['select-change'])
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  disabled: {
    type: Boolean,
    default: false
  },
  opts: {
    type: Object,
    default: () => ({})
  },
  list: {
    type: Array,
    default: () => []
  }
})

const { build_category } = proxy.useDict("build_category")
const { drainage_partition } = proxy.useDict("drainage_partition")
const { sponge_engineering_type } = proxy.useDict("sponge_engineering_type")
const dicts = {
  build_category,
  drainage_partition,
  sponge_engineering_type
}
const findText = (prop, type) => {
  const item = dicts[prop].value.find(it => it.value === type)
  return item?.label || ''
}

const form = computed(() => {
  return props.data
})
const selectChange = (item) => {
  emit('select-change', item)
}
</script>

<style lang="scss" scoped>
.project {
  margin-bottom: 10px;
}
.card-header {
  font-weight: 700;
  font-size: 16px;
}
</style>