<template>
  <el-dialog
    class="dialog"
    v-model="visible"
    :title="`${opts.text}达标测算`"
    :close-on-click-modal="false"
    width="70%"
    :before-close="close"
  >
    <!-- 详情显示 -->
    <div class="details" v-if="opts.type === 'view' && componentName">
      <el-tabs :model-value="active" @tab-change="tabChange">
        <el-tab-pane label="目标调蓄量" :name="0">
          <project :data="form" :disabled="true" :opts="opts" :list="list" />
          <storageCapacity ref="storageCapacityRef" :id="id" :opts="opts" :project-info="form" :disabled="true" />
        </el-tab-pane>
        <el-tab-pane label="达标测算" :name="1" v-if="status * 1 >= 1">
          <project :data="form" :disabled="true" :opts="opts" :list="list" />
          <standardMeasurement ref="standardMeasurementRef" :id="id" :opts="opts" :project-info="form" :disabled="true" :status="status" />
        </el-tab-pane>
        <el-tab-pane label="达标总览" :name="2" v-if="status * 1 >= 1">
          <overview v-if="loadoverview" ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 新增修改显示 -->
    <div class="editOrAdd" v-else-if="opts.type !== 'view'">
      <div class="steps">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="目标调蓄量" :class="{ pointer: isSubmit }" @click="view('storageCapacity')" />
          <el-step title="达标测算" :class="{ pointer: isSubmit }" @click="view('standardMeasurement')" />
          <el-step title="达标总览" :class="{ pointer: isSubmit }" @click="view('overview')" />
          <el-step title="提交" />
        </el-steps>
      </div>
      <project
        :data="form"
        v-show="['storageCapacity', 'standardMeasurement'].includes(componentName)"
        :disabled="selectDisabled"
        @select-change="selectChange"
        :opts="opts"
        :list="list"
      />
      <div class="stepMain" v-if="componentName">
        <div class="storageCapacityBox" v-show="componentName === 'storageCapacity'">
          <el-button v-if="opts.type === 'edit'" class="refresh" type="primary" size="small" @click="refreshClick">同步数据模版</el-button>
          <storageCapacity
            ref="storageCapacityRef"
            :key="form.projectNo"
            :id="id"
            :opts="opts"
            :project-info="form"
            :disabled="isSubmit"
            @success="onSuccess"
            @set-computed-disabled="onSetComputedDisabled"
          />
        </div>
        <div class="standardMeasurementBox" v-show="componentName === 'standardMeasurement'">
          <standardMeasurement
            ref="standardMeasurementRef"
            :id="id"
            :opts="opts"
            :project-info="form"
            :disabled="isSubmit"
            :status="status"
            @success="onSuccess"
            @set-computed-disabled="onSetComputedDisabled"
          />
        </div>
        <div class="overviewBox" v-if="componentName === 'overview'">
          <overview ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" @success="onSuccess" />
        </div>
      </div>
    </div>
    <template #footer v-if="componentName && !isSubmit && opts.type !== 'view'">
      <div class="dialog-footer">
        <!-- <el-button type="primary">导入</el-button> -->
        <el-button type="primary" @click="computedHandle" :disabled="computedDisabled" v-show="active < 2">计算</el-button>
        <el-button type="primary" @click="previous" v-show="active > 0">上一步</el-button>
        <el-button type="primary" @click="next" v-show="schedule[active] === 'fulfilled'">下一步</el-button>
        <el-button type="primary" @click="submit" v-show="active > 1">提交</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, toRef, computed, nextTick } from 'vue';
import project from './project.vue';
import storageCapacity from './storageCapacity.vue';
import standardMeasurement from './standardMeasurement.vue';
import overview from './overview.vue';
import { inheritAttr } from '@/utils/v3';
import { getFacilitiesStandardCalcInfo, getProjectBuildTargetConfigList, facilitiesStandardCalcSubmit } from '@/api/preassess/calculate';
const { proxy } = getCurrentInstance();
const componentNameMap = new Map([
  [0, 'storageCapacity'],
  [1, 'standardMeasurement'],
  [2, 'overview'],
]);
// 指定的动态组件
let componentName = ref('');
const emit = defineEmits(['update:modelValue', 'close']);
const props = defineProps({
  id: {
    type: [String, Number],
    default: '',
  },
  status: {
    type: String,
    default: '',
  },
  opts: {
    type: Object,
    default: () => {},
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const { id, opts, status } = props;
const isShowDialog = toRef(props, 'modelValue');
const visible = computed({
  get() {
    return isShowDialog.value;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});

const form = reactive({
  projectNo: '',
  projectName: '',
  engineeringType: '',
  buildCategory: '',
  drainagePartition: '',
  area: '',
  annualRunoffTotalControlRate: '',
  annualRunoffPollutionControlRate: '',
  hardGroundRate: '',
  designRainfall: '',
});

const active = ref(0);

const list = ref([]);

const isSubmit = ref(false);
const schedule = reactive({
  0: 'pending',
  1: 'pending',
  2: 'pending',
});
const overviewData = ref({});
const facilityStorageCapacity = ref('')
let submitData = {};
const details = ref({});
const computedDisabled = ref(false);
const selectDisabled = computed(() => {
  return schedule[0] === 'fulfilled';
});
const loadoverview = ref(false);

const next = () => {
  if (active.value === 2) {
    active.value = 4;
  } else {
    active.value++;
    componentName.value = componentNameMap.get(active.value);
  }
};

const previous = () => {
  if (active.value === 0) return;
  if (active.value === 4) {
    active.value = 1;
  } else {
    active.value--;
  }
  componentName.value = componentNameMap.get(active.value);
};

const selectChange = item => {
  inheritAttr(item, form);
  componentName.value = componentNameMap.get(active.value);
  nextTick(() => {
    proxy.$refs.storageCapacityRef.getList();
    proxy.$refs.standardMeasurementRef.getList();
  });
};

const computedHandle = () => {
  console.log('计算当前结果');
  switch (active.value) {
    case 0:
      proxy.$refs.storageCapacityRef.submit();
      break;
    case 1:
      proxy.$refs.standardMeasurementRef.submit();
      break;
    default:
      break;
  }
};

const close = () => {
  visible.value = false;
  componentName.value = '';
  active.value = 0;
  emit('close', opts.type);
};

const onSuccess = (result = {}) => {
  if (active.value === 0) {
    schedule[0] = 'fulfilled';
    schedule[1] = 'pending';
    schedule[2] = 'pending';
    const data = proxy.$refs.storageCapacityRef.form;
    proxy.$refs.standardMeasurementRef.setFormData(data);
    proxy.$refs.standardMeasurementRef.setTable();
  } else if (active.value === 1) {
    schedule[1] = 'fulfilled';
    schedule[2] = 'pending';
    submitData = result;
    overviewData.value = result?.reasonablenessOverview || {};
    facilityStorageCapacity.value = result?.facilityStorageCapacity
  }
};

const onSetComputedDisabled = disabled => {
  computedDisabled.value = disabled;
};

const getDetailInfo = async () => {
  const res = await getFacilitiesStandardCalcInfo(id);
  console.log(res);
  if (res?.code !== 200) return;
  if (res.data.status === '0') {
    res.data.standardCalcFacilitiesPolluteRemoveSaveRequestList = [];
    for (const key in res.data) {
      if (Object.hasOwnProperty.call(res.data, key)) {
        if (
          [
            'facilityStorageCapacity',
            'storageCapacityStandards',
            'facilityStorageCapacityToAnnualRunoffTotalControlRate',
            'pollutionRemovalRate',
            'pollutionRemovalStandards',
          ].includes(key)
        ) {
          res.data[key] = '';
        }
      }
    }
  }
  details.value = res.data;
  const item = list.value.find(it => it.projectNo === res.data.projectNo);
  inheritAttr(item, form);
  componentName.value = componentNameMap.get(active.value);
  if (status === '0') {
    schedule[0] = 'fulfilled';
  } else if (status === '1') {
    schedule[0] = 'fulfilled';
    schedule[1] = 'fulfilled';
  } else if (status === '2') {
    schedule[0] = 'fulfilled';
    schedule[1] = 'fulfilled';
    schedule[2] = 'fulfilled';
  }
  submitData = res.data;
  overviewData.value = res.data?.reasonablenessOverview;
  facilityStorageCapacity.value = res.data?.facilityStorageCapacity;
  nextTick(() => {
    proxy.$refs.storageCapacityRef.getList(details.value);
    if (proxy.$refs.standardMeasurementRef) {
      proxy.$refs.standardMeasurementRef.getList(details.value);
    }
  });
};

const getList = async () => {
  const res = await getProjectBuildTargetConfigList();
  console.log(res);
  if (res?.code !== 200) return;
  list.value = res.data;
  if (opts.type === 'add' && list.value.length) {
    selectChange(list.value[0]);
  }
};

const view = name => {
  if (isSubmit.value) {
    componentName.value = name;
  }
};

const submit = async () => {
  active.value += 2;
  schedule[2] = 'fulfilled';
  isSubmit.value = true;
  const res = await facilitiesStandardCalcSubmit(submitData);
  if (res?.code !== 200) return;
  setTimeout(() => {
    close();
  }, 500);
};

const tabChange = tab => {
  active.value = tab;
  nextTick(() => {
    loadoverview.value = active.value === 2;
  });
};

const refreshClick = () => {
  proxy.$modal
    .confirm('同步数据后需要重新计算，是否同步数据？')
    .then(() => {
      proxy.$refs.storageCapacityRef.heavyLoad()
      proxy.$refs.standardMeasurementRef.heavyLoad()
      active.value = 0
      schedule[0] = 'pending'
      schedule[1] = 'pending'
      schedule[2] = 'pending'
    })
    .catch((error) => {
      console.log(error)
    })
}

onMounted(async () => {
  await getList();
  if (id) getDetailInfo();
});
</script>

<style lang="scss" scoped>
.box-card {
  .card-header {
    font-weight: 700;
    font-size: 16px;
  }

  :deep(.form) {
    .el-form-item {
      margin-bottom: 5px;
    }
  }
}
.steps {
  width: 70%;
  margin: 20px auto;
  :deep(.el-step) {
    position: relative;
    .el-step__head {
      .el-step__line {
        left: 88%;
      }
    }
    .el-step__main {
      position: absolute;
      left: calc(50% + 20px);
      top: 4px;
      line-height: 1;
      .el-step__title {
        font-size: 14px;
        line-height: 1;
      }
    }

    &:nth-of-type(1) {
      .el-step__head {
        .el-step__line {
          left: 94%;
        }
      }
    }
  }
}
.pointer {
  cursor: pointer;
}
.details {
  margin-top: 20px;
  :deep(.el-tabs) {
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    .el-tabs__header {
      font-size: 18px;
      .el-tabs__item {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 16px;
      }
    }
  }
}
.storageCapacityBox {
  position: relative;
  .refresh {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>