<template>
  <div class="recognitionImage">
    <el-button type="primary" :icon="Plus" size="small" class="add" @click="addTab" v-if="opts.type !== 'view'">添加分区</el-button>
    <el-tabs v-model="active" class="tabs" :closable="opts.type !== 'view'" @tab-remove="removeTab">
      <el-tab-pane
        v-for="tab in tabs"
        :label="tab.label"
        :name="tab.name"
      >
        <list
          :data="tab?.data"
          :index="tab.name"
          :disabled="props.disabled"
          ref="listRef"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      v-model="dialogVisible"
      title="添加分区"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="分区名称" prop="label">
          <el-input v-model="form.label" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import list from './components/list.vue'
import { getUnderlyingSurfaceRunoffConfigItemList } from '@/api/preassess/runoffCoefficient'
import { getFacilitiesPolluteRemoveConfigItemList } from '@/api/preassess/removalRate'
import { getFacilitiesAdaptabilityConfigItemList } from '@/api/preassess/adaptationConfig'
import { getDicts } from '@/api/preassess/noopReview'
import { Plus } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['load-success'])
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  opts: {
    type: Object,
    default: () => {}
  },
  projectInfo: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  },
  uploadCallbackData: {
    type: Object,
    default: () => {}
  }
})
const { id, opts, projectInfo } = props
const sponge_facilities_type = ref([])
const form = reactive({
  label: ''
})
const rules = reactive({
  label: [
    { required: true, message: '分区名称不能为空', trigger: ['blur', 'change'] },
  ]
})
const tabs = ref([])
const active = ref(0)
const templateData = {
  underlySurface: {
    name: "建设工程下垫面",
    list: []
  },
  facility: {
    name: "建设工程设施",
    list: []
  },
  elevation: {
    name: "分区高程",
    data: {
      groundElevation: '',
      facilityBaseElevation: ''
    }
  }
}
const underlySurfaceList = ref([])
const facilityList = ref([])
const dialogVisible = ref(false)

const getTabs = () => {
  active.value = 0
  if(props.uploadCallbackData){
    tabs.value = props.uploadCallbackData.map((item, i) => ({
      name: i,
      label: item.name,
      data: null
    }))
  } else {
    tabs.value = [
      {
        name: 0,
        label: '总体',
        data: null
      }
    ]
  }
}

const handleClose = () => {
  proxy.$refs.ruleFormRef.resetFields()
  dialogVisible.value = false
}

const handleOk = () => {
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      const last = tabs.value[tabs.value.length - 1]
      const cloneData = JSON.parse(JSON.stringify(templateData))
      cloneData.underlySurface.list = JSON.parse(JSON.stringify(underlySurfaceList.value))
      cloneData.facility.list = JSON.parse(JSON.stringify(facilityList.value))
      tabs.value.push({
        name: last.name + 1,
        label: form.label,
        data: cloneData
      })
      active.value = last.name + 1
      setDefaultData()
      handleClose()
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const addTab = () => {
  dialogVisible.value = true
}

const removeTab = (name) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    const curIndex = tabs.value.findIndex(item => item.name === name)
    const pre = tabs.value[curIndex - 1]
    tabs.value.splice(curIndex, 1)
    if(active.value === name) {
      active.value = pre.name
    }
  })
  .catch(() => {})
}

const getTableList = () => {
  getTabs()
  // 填充图纸数据
  setUploadLoadData(underlySurfaceList.value, facilityList.value)
  // 填充默认值
  setDefaultData()
  console.log('填充后的数据', tabs.value)
  emit('load-success')
}

const getUnderlySurfaceList = async () => {
  const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1'})
  if(res?.code !== 200) return []
  res.data.forEach((item) => {
    item.area = ''
    item.runoffCoefficient = item.downValue
  })
  console.log('下垫面模版数据', res.data)
  return res.data
}

const getFacilityList = async () => {
  const res = await getFacilitiesPolluteRemoveConfigItemList({ status: '1' })
  if(res?.code !== 200) return
  const data = res.data
  const res1 = await getFacilitiesAdaptabilityConfigItemList({ status: '1' })
  if(res1?.code !== 200) return
  const filterData = res1.data
  const result = []
  for (const item of sponge_facilities_type.value) {
    const list = getChildrenTableList(item.value, data, filterData)
    if(list.length) {
      result.push({name: item.label, list})
    }
  }
  console.log('设施模版数据', result)
  return result
}

const getChildrenTableList = (itemType, data, filterData) => {
  const list = data.filter(it => it.itemType === itemType)
  return list.filter(it => {
    it.facilityArea = ''
    it.effectiveStorageDepth = ''
    it.facilityServiceArea = ''
    it.pollutionRemovalRate = it.downValue

    const ele = filterData.find((val) => (val.itemType + val.itemName) === (it.itemType + it.itemName))
    if(ele) {
      const adaptabilityConfigJson = JSON.parse(ele.adaptabilityConfigJson)
      const engineeringType = projectInfo.engineeringType
      const item = adaptabilityConfigJson.find(it => it.key === engineeringType)
      return item.value !== 'unsuitable'
    } else {
      return true
    }
  })
}

const setUploadLoadData = (underlySurfaceList, facilityList) => {
  for (const tab of tabs.value) {
    const cloneData = JSON.parse(JSON.stringify(templateData))
    cloneData.underlySurface.list = JSON.parse(JSON.stringify(underlySurfaceList))
    cloneData.facility.list = JSON.parse(JSON.stringify(facilityList))
    if(props.uploadCallbackData){
      const curTabData = props.uploadCallbackData.find(it => it.name === tab.label)
      // 填充建设工程下垫面的数据
      setUnderlySurfaceData(cloneData, curTabData)
      // 填充建设工程设施的数据
      setFacilityData(cloneData, curTabData)
    }
    tab.data = cloneData
  }
}

const setUnderlySurfaceData = (cloneData, curTabData) => {
  for (const item of cloneData.underlySurface.list) {
    const curTabUnderlySurfaceItemData = curTabData.underlyingSurfaceList.find(it => it.name === item.itemName)
    if(curTabUnderlySurfaceItemData){
      item.area = curTabUnderlySurfaceItemData.area
      item.runoffCoefficient = curTabUnderlySurfaceItemData.underlyingSurfaceValue
    }
  }
}

const setFacilityData = (cloneData, curTabData) => {
  for (const item of cloneData.facility.list) {
    for (const it of item.list) {
      const curTabFacilityItemData = curTabData.polluteRemoveList.find(val => val.name === it.itemName)
      if(curTabFacilityItemData){
        it.facilityArea = curTabFacilityItemData.area
        it.effectiveStorageDepth = curTabFacilityItemData.depth
        it.facilityServiceArea = curTabFacilityItemData.volume
      }
    }
  }
}

const setDefaultData = () => {
  for (let i = 0; i < tabs.value.length; i++) {
    const tab = tabs.value[i];
    const data = tab.data
    for (const item of data.underlySurface.list) {
      item.area = item.area || '0'
    }
    for (const item of data.facility.list) {
      for (const it of item.list) {
        it.facilityArea = it.facilityArea || '0'
        it.effectiveStorageDepth = it.effectiveStorageDepth || '0'
        it.facilityServiceArea = it.facilityServiceArea || '0'
      }
    }
    if(i > 0) {
      for (const key in data.elevation.data) {
        if (Object.hasOwnProperty.call(data.elevation.data, key)) {
          data.elevation.data[key] = data.elevation.data[key] || '0';
        }
      }
    }
  }
}

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)
  emit('load-success')
}

const validate = () => {
  const ps = proxy.$refs.listRef.map((item) => {
    return item.validate()
  })
  return Promise.all(ps)
}

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()
  }
  if(!underlySurfaceList.value.length){
    underlySurfaceList.value =  await getUnderlySurfaceList()
  }
  if(!facilityList.value.length) {
    facilityList.value = await getFacilityList()
  }
  if(id) getDetails(data)
  else getTableList()
}

defineExpose({
  getList,
  getTableList,
  validate,
  tabs
})
</script>

<style lang="scss" scoped>
.recognitionImage {
  ::v-deep(.tabs) {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            >.el-tabs__item {
              &:nth-child(2) {
                i {
                  display: none;
                }
              }
              i {
                transform: translateY(2px);
              }
            }
          }
        }
      }
    }
  }
}
</style>