<template>
  <div
    class="rationality"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <el-tabs :model-value="active" @tab-change="tabChange" class="outerTabs" type="border-card">
      <el-tab-pane label="项目合理性" :name="0">
        <project
          :data="form"
          :list="list"
          :step="1"
          :investigate-data="investigateData"
        />
        <analysis ref="analysisRef" />
      </el-tab-pane>
      <el-tab-pane label="合理性总览" :name="1">
        <overview
          v-if="loadOverview"
          :overview-data="overviewData"
        />
      </el-tab-pane>
      <el-tab-pane label="下垫面及设施详情" :name="2">
        <project :data="form"/>
        <recognitionImage ref="recognitionImageRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, shallowRef } from 'vue'
import project from './project.vue'
import analysis from './analysis.vue'
import overview from './overview.vue';
import recognitionImage from './recognitionImage.vue';
import {
  intelligentApproveDetails
} from '@/api/preassess/noopReview'
import {
  getProjectBuildTargetConfigList
} from '@/api/preassess/calculate'
import { inheritAttr } from '@/utils/v3'
const { proxy } = getCurrentInstance()
const props = defineProps({
  id: {
    type: [Number, String],
    default: ''
  }
})
const { id } = props
const form = reactive({
  projectNo: '',
  projectNo: '',
  projectName: '',
  engineeringType: '',
  buildCategory: '',
  drainagePartition: '',
  area: '',
  annualRunoffTotalControlRate: '',
  annualRunoffPollutionControlRate: '',
  hardGroundRate: '',
  designRainfall: '',
  disposalOfGuestWater: '',
  spongeInvest: '',
  recommendedProductionRatio: ''
})
const active = ref(0)
const overviewData = shallowRef({
  reachStandard: {
    targetyAxis: [],
    realityyAxis: [],
    resultyAxis: [],
    xaxis: []
  },
  facilityStorageCapacityEcharts: [],
  facilityRatio: {
    targetyAxis: [],
    realityyAxis: [],
    resultyAxis: [],
    xaxis: []
  },
  areaAnnualRunoffEcharts: [],
  costEstimateList: []
})
const loadOverview = ref(false)
let list = []
const componentNameMap = new Map([
  [0, 'recognitionImage'],
  [1, 'analysis'],
  [2, 'overview']
])
const componentName = ref('');
const investigateData = shallowRef({})
const loading = ref(false)
const tabChange = (tab) => {
  active.value = tab
  nextTick(() => {
    loadOverview.value = active.value === 1
  })
}

const getList = async () => {
  const res = await getProjectBuildTargetConfigList()
  console.log(res)
  if(res?.code !== 200) return
  list = res.data
}

const getDetailInfo = async () => {
  loading.value = true
  await getList()
  const res = await intelligentApproveDetails(id)
  loading.value = false
  if(res?.code !== 200) return
  console.log(res.data)
  const projectInfo = list.find(item => item.projectNo === res.data.projectNo)
  inheritAttr(projectInfo, form)
  componentName.value = componentNameMap.get(active.value)
  overviewData.value = res.data.reasonablenessOverview
  investigateData.value = res.data.examineMap
  nextTick(() => {
    proxy.$refs.recognitionImageRef.getList(res.data)
    proxy.$refs.analysisRef.getDetails(res.data)
  })
}

onMounted(() => {
  if(id) getDetailInfo()
})
</script>

<style lang="scss" scoped>
.rationality {
  ::v-deep(.formM5) {
    .el-form-item {
      margin-bottom: 5px;
    }
  }

  ::v-deep(.formM0) {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
}
</style>