<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">
      <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 {
  :deep(.formM5) {
    .el-form-item {
      margin-bottom: 5px;
    }
  }

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