<template>
  <div class="recognitionImage">
    <el-tabs v-model="active" class="tabs">
      <el-tab-pane
        v-for="tab in tabs"
        :label="tab.label"
        :name="tab.name"
      >
        <list
          :data="tab?.data"
          :index="tab.name"
          ref="listRef"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import list from './components/list.vue'
import { getDicts } from '@/api/preassess/noopReview'
const sponge_facilities_type = ref([])
const tabs = ref([])
const active = ref(0)
const templateData = {
  underlySurface: {
    name: "建设工程下垫面",
    list: []
  },
  facility: {
    name: "建设工程设施",
    list: []
  },
  elevation: {
    name: "分区高程",
    data: {
      groundElevation: '',
      facilityBaseElevation: ''
    }
  }
}

const getDetails = (data) => {
  if(!data) return
  const intelligentAreaList = data.intelligentAreaList
  tabs.value = intelligentAreaList.map((item, i) => {
    const cloneData = JSON.parse(JSON.stringify(templateData))
    const intelligentUnderlyingSurfaceRunoffList = item.intelligentUnderlyingSurfaceRunoffList
    cloneData.underlySurface.list = intelligentUnderlyingSurfaceRunoffList
    const intelligentFacilitiesPolluteRemoveList = item.intelligentFacilitiesPolluteRemoveList
    for (const it of sponge_facilities_type.value) {
      const list = intelligentFacilitiesPolluteRemoveList.filter(ele => ele.itemType === it.value)
      if(list.length) {
        cloneData.facility.list.push({name: it.label, list})
      }
    }
    cloneData.elevation.data.groundElevation = item.groundElevation
    cloneData.elevation.data.facilityBaseElevation = item.facilityBaseElevation
    return {
      name: i,
      label: item.areaName,
      data: cloneData
    }
  })
  console.log(tabs.value)
}

const getSpongeFacilitiesType = async () => {
  const res = await getDicts('sponge_facilities_type')
  if(res?.code !== 200) return
  sponge_facilities_type.value = res.data.map(item => ({
    value: item.dictValue,
    label: item.dictLabel
  }))
}

const getList = async (data) => {
  if(!sponge_facilities_type.value.length) {
    await getSpongeFacilitiesType()
  }
  getDetails(data)
}

defineExpose({
  getList
})
</script>

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