<template>
  <div class="rationality">
    <el-tabs :model-value="active" @tab-change="tabChange" class="outerTabs" type="border-card">
      <el-tab-pane label="项目合理性" :name="0">
        <project :data="form"/>
        <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 { ref, onMounted, getCurrentInstance } from 'vue'
import project from './project.vue'
import analysis from './analysis.vue'
import overview from './overview.vue';
import recognitionImage from './recognitionImage.vue';
const { proxy } = getCurrentInstance()
const form = {
  projectNo: '',
  projectName: '',
  buildCategory: '',
  engineeringType: '',
  drainagePartition: '',
  targetAnnualRunoffTotalControlRate: '',
  targetAnnualRunoffPollutionControlRate: '',
  storageCapacityStandards: '',
  pollutionRemovalStandards: '',
}
const active = ref(0)
const overviewData = ref({
  reachStandard: {
    targetyAxis: [],
    realityyAxis: [],
    resultyAxis: [],
    xaxis: []
  },
  facilityStorageCapacityEcharts: [],
  facilityRatio: {
    targetyAxis: [],
    realityyAxis: [],
    resultyAxis: [],
    xaxis: []
  },
  areaAnnualRunoffEcharts: [],
  costEstimateList: []
})
const loadOverview = ref(false)
const tabChange = (tab) => {
  active.value = tab
  nextTick(() => {
    loadOverview.value = active.value === 1
  })
}

onMounted(() => {
  proxy.$refs.analysisRef.getDetails()
  proxy.$refs.recognitionImageRef.getList()
})
</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>