<template>
  <el-form class="tableForm" ref="tableForm" :model="formModel">
    <el-table :data="formModel.list" v-loading="loading" :max-height="200" element-loading-text="数据加载中...">
      <el-table-column label="下垫面类型" prop="itemName" />
      <el-table-column label="面积㎡" prop="area" />
      <el-table-column label="径流系数" prop="runoffCoefficient">
        <template #header>
          <span>径流系数</span>
          <popover>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>可输入参考值范围内的值，默认取径流系数参考值下限</span>
          </popover>
        </template>
      </el-table-column>
      <el-table-column label="径流系数参考值">
        <template #header>
          <span>径流系数参考值</span>
          <popover>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>由下垫面建议径流系数配置获取</span>
          </popover>
        </template>
        <template #default="{ row }">
          <span>{{ `${row.downValue}-${row.upValue}` }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup>
import {} from 'vue';
const { proxy } = getCurrentInstance();
import useTable from './mixins';
import popover from '@/components/popover';
const { loading, formModel } = useTable(proxy);
const props = defineProps({
  list: {
    type: Array,
    default: () => {},
  },
});
</script>

<style lang="scss" scoped></style>