<template>
  <div class="cost_estimate">
    <new-table class="table" :max-height="300" :data="tableData" :columns="columns" :loading="loading" />
  </div>
</template>

<script setup lang="jsx">
import { ref, reactive } from 'vue'
import popover from '@/components/popover'
const props = defineProps({
  data: {
    type: Array,
    default: () => ({})
  }
})
const loading = ref(false)
const tableData = props.data
const columns = reactive([
  {
    label: '设施名称',
    prop: 'facilitiesName',
    fixed: 'left'
  },
  {
    label: '用量（m2）',
    prop: 'dosageArea',
    width: 95
  },
  {
    label: '调蓄量（m3）',
    prop: 'facilityStorageCapacity',
    width: 115
  },
  {
    label: '造价区间（万元）',
    prop: 'costRange',
    width: 140
  },
  {
    label: '推荐造价（万元）',
    prop: 'estimateCost',
    width: 150,
    headerRender: () => {
      return (
        <Fragment>
          <span>推荐造价（万元）</span>
          <popover width={ 240 }>
            <span style="font-weight: 700">说明</span>
            <br />
            <span>推荐投资产出比 * 调蓄量</span>
          </popover>
        </Fragment>
      )
    },
    fixed: 'right'
  }
])
</script>

<style lang="scss" scoped>
.cost_estimate {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
}
</style>