<template>
  <div class="list">
    <el-card class="box-card" shadow="never" style="margin-bottom: 10px">
      <template #header>
        <div class="card-header">
          <span class="title">建设工程下垫面</span>
        </div>
      </template>
      <underlySurfaceTable ref="underlySurfaceTableRef" :list="underlySurfaceTableList" :disabled="props.disabled" />
    </el-card>
    <el-card class="box-card" shadow="never" style="margin-bottom: 10px">
      <template #header>
        <div class="card-header">
          <span class="title">建设工程设施</span>
        </div>
      </template>
      <facilityTable
        class="facilityTable"
        v-for="item in facilityList"
        :name="item.name"
        :list="item.list"
        :disabled="props.disabled"
        ref="facilityTableRef"
      />
    </el-card>
    <el-card class="box-card" shadow="never" v-if="props.index > 0">
      <template #header>
        <div class="card-header">
          <span class="title">分区高程</span>
        </div>
      </template>
      <elevation
        ref="elevationRef"
        :data="elevationData"
        :disabled="props.disabled"
      />
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import underlySurfaceTable from './underlySurfaceTable.vue'
import facilityTable from './facilityTable.vue'
import elevation from './elevation.vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  index: {
    type: [Number, String],
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const underlySurfaceTableList = computed(() => {
  return props?.data?.underlySurface?.list || []
})

const facilityList = computed(() => {
  return props?.data?.facility?.list || []
})

const elevationData = computed(() => {
  return props?.data?.elevation || {}
})

const validate = () => {
  let promiseAll = []
  const p1 = proxy.$refs.underlySurfaceTableRef.validate()
  const ps = proxy.$refs.facilityTableRef.map((item) => {
    return item.validate()
  })
  promiseAll = promiseAll.concat(p1, ps)
  if(props.index > 0){
    const p2 = proxy.$refs.elevationRef.validate()
    promiseAll = promiseAll.concat(p2)
  }
  return Promise.all(promiseAll)
}

defineExpose({
  validate
})
</script>

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