<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" type="border-card">
        <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"
          />
        </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'">
          <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"
            @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({})
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 || {}
  }
}

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
  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
  })
}

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

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

  ::v-deep(.form) {
    .el-form-item {
      margin-bottom: 5px;
    }
  }
}
.steps {
  width: 70%;
  margin: 20px auto;
  ::v-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;
  ::v-deep(.el-tabs) {
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    border: 1px solid #e4e7ed;
    .el-tabs__header {
      background-color: #fff !important;
      font-size: 18px;
      .el-tabs__item {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 16px;
      }
    }
  }
}
</style>