<template>
  <div class="edit-add-detail detail">
      <div class="form-content">
          <el-form
              ref="formInfo"
              :model="detailForm"
              label-position="right"
              label-suffix="："
              class="detail-form"
          >
              <div class="rows">
                  <div class="rows-left">
                      <div class="rows-hr"></div>
                  </div>
                  <div class="rows-title">
                      <div class="text-overflow">隧道信息</div>
                  </div>
              </div>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="隧道名称">
                          <span class="text" :title="detailForm.name">
                              {{ detailForm.name || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="隧道编号">
                          <span class="text" :title="detailForm.number">
                              {{ detailForm.number || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="所在路段">
                          <span class="text" :title="detailForm.roadSegmentName">
                              {{ detailForm.roadSegmentName || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="所属公司">
                          <span class="text" :title="detailForm.companyName">
                              {{ detailForm.companyName || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="管养单位">
                          <span class="text" :title="detailForm.officeName">
                              {{ detailForm.officeName || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="隧道等级">
                          <span class="text" :title="detailForm.gradeValue">
                              {{ detailForm.gradeValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="隧道类型">
                          <span class="text" :title="detailForm.typeValue">
                              {{ detailForm.typeValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <div class="rows">
                  <div class="rows-left">
                      <div class="rows-hr"></div>
                  </div>
                  <div class="rows-title">
                      <div class="text-overflow">详细信息</div>
                  </div>
              </div>
              <el-row :gutter="24">
                <el-col :span="6">
                      <el-form-item label="隧道长度">
                          <span
                              class="text"
                              :title="detailForm.length"
                          >
                              {{ detailForm.length || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="隧道宽度">
                          <span class="text" :title="detailForm.width">
                              {{ detailForm.width || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="隧道高度">
                          <span class="text" :title="detailForm.hight">
                              {{ detailForm.hight || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="经度">
                          <span
                              class="text"
                              :title="detailForm.lng"
                          >
                              {{ detailForm.lng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="维度">
                          <span class="text" :title="detailForm.lat">
                              {{ detailForm.lat || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="起点桩号">
                          <span
                              class="text"
                              :title="detailForm.startPeg"
                          >
                              {{ detailForm.startPeg || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="止点桩号">
                          <span class="text" :title="detailForm.endPeg">
                              {{ detailForm.endPeg || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="中心桩号">
                          <span
                              class="text"
                              :title="detailForm.centPeg"
                          >
                              {{ detailForm.centPeg || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="中心值">
                          <span class="text" :title="detailForm.centPegK">
                              {{ detailForm.centPegK || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="隧道方向">
                          <span
                              class="text"
                              :title="detailForm.directionValue"
                          >
                              {{ detailForm.directionValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  
                  <el-col :span="6">
                      <el-form-item label="进洞口形式">
                          <span class="text" :title="detailForm.entranceFormValue">
                              {{ detailForm.entranceFormValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="出洞口形式">
                          <span class="text" :title="detailForm.exitFormValue">
                              {{ detailForm.exitFormValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="断面形式">
                          <span class="text" :title="detailForm.surfaceLayValue">
                              {{ detailForm.surfaceLayValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="衬砌材料">
                          <span
                              class="text"
                              :title="detailForm.onMaterialValue"
                          >
                              {{ detailForm.onMaterialValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="洞身材料">
                          <span
                              class="text"
                              :title="detailForm.bodyMaterialValue"
                          >
                              {{ detailForm.bodyMaterialValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="6">
                      <el-form-item label="创建日期">
                          <span
                              class="text"
                              :title="detailForm.createDay"
                          >
                              {{ detailForm.createDay || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="完成日期">
                          <span class="text" :title="detailForm.finishDay">
                              {{ detailForm.finishDay || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
      </div>

      <el-backtop target=".detail-form" :visibility-height="10">
          <div class="top-box">UP</div>
      </el-backtop>
  </div>
</template>

<script>
import {tableDetail} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/tunnelInfo'
import PubSub from 'pubsub-js'

export default {
  name: 'DetailPage',
  props: {
      componentName: {
          default: 'DetailPage',
          type: String,
      },
  },
  components: {},
  data() {
      return {
          detailForm: {},
          pubSub: null,
      }
  },
  computed: {},
  watch: {
      componentName: {
          handler(newVal) {
              if (newVal === this.$options.name) {
                  this.openPage()
              } else {
                  this.closePage()
              }
          },
      },
  },
  mounted() {
      this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
          if (data.id) {
              this.getDetail(data.id)
          }
      })
  },
  methods: {
      // 打开页面执行
      openPage() {},

      // 关闭页面执行
      closePage() {
          // 重置组件数据
          Object.assign(this.$data, this.$options.data.call(this), {
              pubSub: this.pubSub,
          })
          this.$nextTick((_) => {
              this.$refs.formInfo.$el.scrollTop = 0
          })
      },

      // 获取详情
      async getDetail(id) {
          const {
              startDate = '',
              endDate = '',
              meetingResultData: {fileInfo = JSON.stringify([])} = {},
              specialMeeting = {},
              ...detailForm
          } = await tableDetail(id)
          const {meetingObjects = [], ..._specialMeeting} = specialMeeting
          let topicYearMonth = '',
              startEndDate = []
          if (startDate && endDate) {
              startEndDate = [startDate, endDate]
                  .map((time) => moment(time).format('YYYY-MM-DD HH:mm'))
                  .join(',')
                  .replace(',', '  至  ')
          }
          const meetingObjectsOpt = {
              user: {objName: 'fullname', objId: 'id'},
              ogn: {objName: 'name', objId: 'id'},
              dept: {objName: 'name', objId: 'id'},
              post: {objName: 'name', objId: 'id'},
          }

          this.detailForm = {
              ...detailForm,
              topicYearMonth,
              startEndDate,
              meetingResultData: {
                  fileInfo,
                  fileList: JSON.parse(fileInfo)?.map((i) => ({
                      ...i,
                      timeRemaining: () => 0,
                      isComplete: () => true,
                      cancel: (_) => _,
                      status: 'success',
                      size: i.fileSizes,
                      isVideo: i.fileType === '1',
                      currentSpeed: 0,
                      id: i.fileId,
                  })),
              },
              specialMeeting: {
                  ..._specialMeeting,
                  ...Object.entries(meetingObjectsOpt).reduce(
                      (newObj, [key, value]) => {
                          newObj[key + 'Arr'] = meetingObjects.flatMap(
                              (item) => {
                                  if (item.objType !== key) return []
                                  return Object.entries(value).reduce(
                                      (_newObj, [_key, _value]) => {
                                          _newObj[_value] = item[_key]
                                          return _newObj
                                      },
                                      {}
                                  )
                              }
                          )
                          return newObj
                      },
                      {}
                  ),
              },
          }
      },
  },
  beforeDestroy() {
      // 在组件销毁之前 清除订阅消息
      PubSub.unsubscribe(this.pubSub)
  },
}
</script>

<style lang="scss" scoped>

</style>
