<template>
  <div class="operate"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <!-- <div id="root-map"></div> -->

    <!-- 详情显示 -->
    <div class="details" v-if="opts.type === 'view'">
      <el-tabs :model-value="active" @tab-change="tabChange" class="outerTabs" type="border-card">
        <el-tab-pane label="智能识图" :name="0">
          <project
            :data="form"
            :disabled="true"
            :opts="opts"
            :list="list"
          />
          <recognitionImage
            ref="recognitionImageRef"
            :id="id"
            :opts="opts"
            :project-info="form"
            :disabled="true"
            :upload-callback-data="uploadCallbackData"
          />
        </el-tab-pane>
        <el-tab-pane label="合理性分析" :name="1" v-if="status === '1'">
          <project
            :data="form"
            :disabled="true"
            :opts="opts"
            :list="list"
            :step="1"
            :investigate-data="investigateData"
          />
          <analysis
            ref="analysisRef"
            :opts="opts"
            :project-info="form"
            :disabled="true"
          />
        </el-tab-pane>
        <el-tab-pane label="合理性总览" :name="2" v-if="status === '1'">
          <overview
            v-if="loadOverview"
            ref="overviewRef"
            :id="id"
            :overview-data="overviewData"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="editOrAdd" v-else>
      <div class="header">
        <div class="steps" >
          <el-steps
            :active="active"
            finish-status="success"
            align-center
          >
            <el-step :class="{ pointer: isSubmit }" title="智能识图"  @click="view('recognitionImage')"/>
            <el-step :class="{ pointer: isSubmit }" title="合理性分析"  @click="view('analysis')"/>
            <el-step :class="{ pointer: isSubmit }" title="合理性总览"  @click="view('overview')"/>
            <el-step title="提交" />
          </el-steps>
        </div>
        <div class="btns" v-show="active > 0 && !isSubmit">
          <el-button type="primary" @click="previous">上一步</el-button>
          <el-button type="primary" @click="next" v-show="active === 1">下一步</el-button>
          <el-button type="primary" @click="submit" v-show="active === 2">提交</el-button>
        </div>
      </div>
      <div class="main">
        <project
          :data="form"
          v-show="['recognitionImage', 'analysis'].includes(componentName)"
          :disabled="disabledSelect"
          @select-change="selectChange"
          :opts="opts"
          :list="list"
          :step="active"
          :investigate-data="investigateData"
        />
        <div class="recognitionImageBox" v-show="componentName === 'recognitionImage'">
          <div class="btns" v-show="active === 0 && !isSubmit">
            <div class="file" v-if="fileInfo">
              <span class="fileName ellipsis" :title="fileInfo.name">{{ fileInfo.name }}</span>
              <span class="delFile" @click="removeFile" v-if="opts.type !== 'view'">删除</span>
            </div>
            <popover>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>上传图纸，根据图纸识别下述信息，识别完可以修改</span>
              <template #reference>
                <upload
                  class="upload"
                  :disabled="opts.type === 'view' || !isLoadData || !!fileInfo"
                  @before-upload="beforeUpload"
                  @success="(file) => { uploadSuccess(file) }"
                  @error="uploadError"
                >
                  <el-button icon="Upload" :disabled="opts.type === 'view' || !isLoadData || !!fileInfo">上传图纸</el-button>
                </upload>
              </template>
            </popover>
            <el-button type="primary" class="viewResult" :disabled="!uploadCallbackData" @click="visible = true">查看解析结果</el-button>
            <el-button type="primary" class="viewResult" :disabled="!uploadCallbackData || !perviewFile" @click="previewblueprintBtn">预览</el-button>
            <el-button type="primary" class="save" @click="save" :disabled="!isLoadData">保存</el-button>
            <el-button type="primary" class="computed" @click="computedHandle" :disabled="!isLoadData">计算</el-button>
            <el-button type="primary" @click="next" v-show="isComputed">下一步</el-button>
          </div>
          <recognitionImage
            ref="recognitionImageRef"
            :id="id"
            :opts="opts"
            :project-info="form"
            :upload-callback-data="uploadCallbackData"
            @load-success="loadSuccess"
            :disabled="isSubmit"
          />
        </div>
        <div class="standardMeasurementBox" v-show="componentName === 'analysis'">
          <analysis
            ref="analysisRef"
            :opts="opts"
            :project-info="form"
            :disabled="isSubmit"
          />
        </div>
        <div class="overviewBox" v-if="componentName === 'overview'">
          <overview
            ref="overviewRef"
            :id="id"
            :overview-data="overviewData"
          />
        </div>
      </div>
    </div>
    <el-dialog
      v-model="visible"
      title="解析结果"
      :close-on-click-modal="false"
      width="70%"
    >
      <result
        v-if="visible && uploadCallbackData"
        :upload-callback-data="uploadCallbackData"
        :project-info="form"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="coverClick">
            覆盖
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visible1"
      title="预览"
      :close-on-click-modal="false"
      width="70%"
    >
      <div id="root-map"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { inheritAttr } from '@/utils/v3'
import recognitionImage from './recognitionImage.vue'
import analysis from './analysis.vue'
import overview from './overview.vue'
import upload from './upload.vue'
// import { getUploadData } from '@/api/json'
import result from './result.vue'
import popover from '@/components/popover'
import project from './project.vue'
import { fileList } from '@/api/preassess/file'
import {
  updateIntelligentApprove,
  calculate,
  intelligentApproveAdd,
  intelligentApproveDetails,
  uploadCadFile
} from '@/api/preassess/noopReview'
import {
  getProjectBuildTargetConfigList
} from '@/api/preassess/calculate'
import NewFiberMapUtils from '@/utils/NewFiberMapUtils'
const { proxy } = getCurrentInstance();
const componentNameMap = new Map([
  [0, 'recognitionImage'],
  [1, 'analysis'],
  [2, 'overview']
])
// 指定的动态组件
let componentName = ref('');
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  status: {
    type: String,
    default: ''
  },
  opts: {
    type: Object,
    default: () => {}
  }
})
const { id, status, opts } = props
const emit = defineEmits(['close'])
const form = reactive({
  rowId: id,
  projectNo: '',
  projectName: '',
  engineeringType: '',
  buildCategory: '',
  drainagePartition: '',
  area: '',
  annualRunoffTotalControlRate: '',
  annualRunoffPollutionControlRate: '',
  hardGroundRate: '',
  designRainfall: '',
  disposalOfGuestWater: '',
  spongeInvest: '',
  recommendedProductionRatio: ''
})
const list = ref([])
const active = ref(0)
const fileInfo = ref(null)
const uploadCallbackData = ref(null)
const isLoadData = ref(false)
const disabledSelect = ref(false)
let analysisData = null
const loading = ref(false)
const overviewData = ref({})
const isSubmit = ref(false)
const loadOverview = ref(false)
const isComputed = ref(false)
const investigateData = ref({})
const visible = ref(false)
const visible1 = ref(false)
const perviewFile = ref(null)

const selectChange = (item) => {
  fileInfo.value = null
  uploadCallbackData.value = null
  inheritAttr(item, form)
  componentName.value = componentNameMap.get(active.value)
  nextTick(() => {
    proxy.$refs.recognitionImageRef.getList(null)
    proxy.$refs.analysisRef.getList(null)
  })
}

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 submit = async () => {
  loading.value = true
  try {
    const res = await intelligentApproveAdd(analysisData)
    loading.value = false
    if(res?.code !== 200) return
    proxy.$modal.msgSuccess('操作成功！')
    isSubmit.value = true
    active.value += 2
    setTimeout(() => {
      close()
    }, 500)
  } catch (error) {
    loading.value = false
  }
}

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

const getDetailInfo = async () => {
  const res = await intelligentApproveDetails(id)
  if(res?.code !== 200) return
  console.log(res.data)
  const projectInfo = list.value.find(item => item.projectNo === res.data.projectNo)
  inheritAttr(projectInfo, form)
  getFileInfo(res.data)
  componentName.value = componentNameMap.get(active.value)
  analysisData = res.data
  overviewData.value = analysisData.reasonablenessOverview
  investigateData.value = analysisData.examineMap
  isComputed.value = status === '1'

  uploadCallbackData.value = res.data.cadParseResult ? JSON.parse(res.data.cadParseResult) : null
  getPerviewFile(res.data)
  nextTick(() => {
    proxy.$refs.recognitionImageRef.getList(res.data)
    if(status === '1'){
      proxy.$refs.analysisRef.getList(res.data)
    }
  })
}

const getFileInfo = async (data) => {
  const res = await fileList({ refId: data.id, refType: 'IntelligentApprove' })
  if(res?.code !== 200) return
  if(res?.data?.length){
    fileInfo.value = res.data[0]
  } else {
    fileInfo.value = null
  }
}

const getPerviewFile = async (data) => {
  const res = await fileList({ refId: data.id, refType: 'intelligentApproveCadResult' })
  if(res?.code !== 200) return
  if(res?.data?.length){
    perviewFile.value = res.data[0]
    console.log(perviewFile.value)
  } else {
    perviewFile.value = null
  }
}


const initMap = ()=>{
 var nfmu = new NewFiberMapUtils('root-map');
  nfmu.initCadParseToMap();
}

const previewblueprintBtn = () => {
  visible1.value = true
  nextTick(() => {
    initMap()
  })
}

const beforeUpload = () => {
  loading.value = true
  isLoadData.value = false
}

const uploadSuccess = async (file) => {
  console.log(file)
  fileInfo.value = file
  if(opts.type === 'add'){
    const params = getParams()
    try {
      const res = await updateIntelligentApprove(params)
      if(res?.code !== 200) return
      disabledSelect.value = true
      form.rowId = res.data.id
      uploadCadFileM(res.data.id, file)
      nextTick(() => {
        proxy.$refs.analysisRef.getList(null)
      })
    } catch (error) {
      loading.value = false
      isLoadData.value = true
    }
  } else {
    uploadCadFileM(id, file)
  }
}

const uploadCadFileM = (id, file) => {
  const params = {
    id,
    sysFileList: [file]
  }
  uploadCadFile(params)
  .then((res) => {
    console.log(res)
    proxy.$modal.alert('CAD正在解析中，请耐心等待')
    loading.value = false
    isLoadData.value = true
  })
  .catch(() => {
    loading.value = false
    isLoadData.value = true
  })
}

const uploadError = () => {
  loading.value = false
  isLoadData.value = true
}

const removeFile = () => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(() => {
    fileInfo.value = null
    // uploadCallbackData.value = null
  })
  .catch(() => {})
}

const save = () => {
  const promise = proxy.$refs.recognitionImageRef.validate()
  promise.then(async () => {
    loading.value = true
    const params = getParams()
    try {
      const res = await updateIntelligentApprove(params)
      loading.value = false
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      disabledSelect.value = true
      form.rowId = res.data.id
      nextTick(() => {
        proxy.$refs.analysisRef.getList(null)
      })
    } catch (error) {
      loading.value = false
    }
  })
}

const computedHandle = () => {
  const promise = proxy.$refs.recognitionImageRef.validate()
  promise.then(async () => {
    loading.value = true
    const params = getParams()
    console.log(params)
    try {
      const res = await calculate(params)
      loading.value = false
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      form.rowId = res.data.id
      disabledSelect.value = true
      active.value++
      analysisData = res.data || null
      if(!analysisData) return
      overviewData.value = analysisData.reasonablenessOverview
      investigateData.value = analysisData.examineMap
      componentName.value = componentNameMap.get(active.value)
      isComputed.value = true
      nextTick(() => {
        proxy.$refs.analysisRef.getList(analysisData)
      })
    } catch (error) {
      loading.value = false
    }
  })
}

const getParams = () => {
  const tabs = proxy.$refs.recognitionImageRef.tabs
  const subAreaSaveRequestList = tabs.map((tab, i) => {
    const standardCalcUnderlyingSurfaceRunoffSaveRequestList = []
    for (const item of tab.data.underlySurface.list) {
      const obj = JSON.parse(JSON.stringify(item))
      obj.area = obj.area || '0'
      obj.runoffCoefficient = obj.runoffCoefficient || item.downValue
      standardCalcUnderlyingSurfaceRunoffSaveRequestList.push(obj)
    }
    const standardCalcFacilitiesPolluteRemoveSaveRequestList = []
    for (const item of tab.data.facility.list) {
      for (const it of item.list) {
        const obj = JSON.parse(JSON.stringify(it))
        obj.facilityArea = obj.facilityArea || '0'
        obj.effectiveStorageDepth = obj.effectiveStorageDepth || '0'
        obj.facilityServiceArea = obj.facilityServiceArea || '0'
        obj.pollutionRemovalRate = obj.pollutionRemovalRate || obj.downValue
        standardCalcFacilitiesPolluteRemoveSaveRequestList.push(obj)
      }
    }
    return {
      areaId: i,
      areaName: tab.label,
      ...tab.data.elevation.data,
      standardCalcUnderlyingSurfaceRunoffSaveRequestList,
      standardCalcFacilitiesPolluteRemoveSaveRequestList
    }
  })
  return {
    id: form.rowId,
    projectNo: form.projectNo,
    fileSaveRequestList: fileInfo.value ? [{ ...fileInfo.value, refType: 'IntelligentApprove' }] : [],
    subAreaSaveRequestList
  }
}

const loadSuccess = () => {
  isLoadData.value = true
  loading.value = false
}

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

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

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

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

const coverClick = () => {
  proxy.$refs.recognitionImageRef.getTableList()
  nextTick(() => {
    visible.value = false
  })
}

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

<style lang="scss" scoped>
.operate {
/*  #root-map{
    width: 100%;
    height: 300px;
  }*/
  .title {
    font-weight: 700;
    font-size: 16px;
  }
  .editOrAdd {
    .header {
      display: flex;
      align-items: center;
      margin: 20px auto;
      .steps {
        width: 70%;
        margin: 0 auto;
        ::v-deep(.el-step) {
          position: relative;
          width: 50%;
          .el-step__head {
            .el-step__line {
              left: 87%
            }
          }
          .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: 81%
            }
          }
          }
        }
      }
    }
  }
  .pointer {
    cursor: pointer;
  }
  .details {
    margin-top: 20px;
    ::v-deep(.outerTabs) {
      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;
        }
      }
    }
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  ::v-deep(.formM5) {
    .el-form-item {
      margin-bottom: 5px;
    }
  }

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

  .recognitionImageBox {
    margin-top: 20px;
    position: relative;
    .btns {
      position: absolute;
      right: 0;
      top: 0;
      width: 35%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      z-index: 10;
      .file {
        display: flex;
        align-items: center;
        .fileName {
          max-width: 200px;
        }
        .delFile {
          flex-shrink: 0;
          color: #f56c6c;
          cursor: pointer;
          margin-left: 10px;
        }
        .disabled {
          cursor: not-allowed !important;
        }
      }
      .upload {
        margin-left: 10px;
      }
      .save {
        margin-left: 10px;
      }
      .computed {
        margin-left: 10px;
      }
      .viewResult {
        margin-left: 10px;
      }
    }
  }
}
</style>