<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.code">
                              {{ detailForm.code || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="所属路线">
                          <span class="text" :title="detailForm.routeName">
                              {{ detailForm.routeName || '-' }}
                          </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.simplicity">
                              {{ detailForm.simplicity || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="路段地址">
                          <span class="text" :title="detailForm.address">
                              {{ detailForm.address || '-' }}
                          </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.startingPoint"
                          >
                              {{ detailForm.startingPoint || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="起点桩号KM">
                          <span class="text" :title="detailForm.startPegK">
                              {{ detailForm.startPegK || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="起点桩号">
                          <span class="text" :title="detailForm.startPeg">
                              {{ detailForm.startPeg || '-' }}
                          </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.terminalPoint"
                          >
                              {{ detailForm.terminalPoint || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="止点桩号KM">
                          <span class="text" :title="detailForm.endPegK">
                              {{ detailForm.endPegK || '-' }}
                          </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.upStartPegLng"
                          >
                              {{ detailForm.upStartPegLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="上行起点纬度">
                          <span
                              class="text"
                              :title="detailForm.upStartPegLat"
                          >
                              {{ detailForm.upStartPegLat || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="上行终点经度">
                          <span class="text" :title="detailForm.upEndPegLng">
                              {{ detailForm.upEndPegLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="上行终点纬度">
                          <span class="text" :title="detailForm.upEndPegLat">
                              {{ detailForm.upEndPegLat || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="上行方向途径点经度">
                          <span class="text" :title="detailForm.upWayLng">
                              {{ detailForm.upWayLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="上行方向途径点纬度">
                          <span class="text" :title="detailForm.upWayLat">
                              {{ detailForm.upWayLat || '-' }}
                          </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.dwStartPegLng"
                          >
                              {{ detailForm.dwStartPegLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="下行起点纬度">
                          <span
                              class="text"
                              :title="detailForm.dwStartPegLat"
                          >
                              {{ detailForm.dwStartPegLat || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="下行终点经度">
                          <span class="text" :title="detailForm.dwEndPegLng">
                              {{ detailForm.dwEndPegLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="下行终点纬度">
                          <span class="text" :title="detailForm.dwEndPegLat">
                              {{ detailForm.dwEndPegLat || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="下行方向途径点经度">
                          <span class="text" :title="detailForm.dwWayLng">
                              {{ detailForm.dwWayLng || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="下行方向途径点纬度">
                          <span class="text" :title="detailForm.dwWayLat">
                              {{ detailForm.dwWayLat || '-' }}
                          </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.designDeep">
                              {{ detailForm.designDeep || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <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.drivewayWidth"
                          >
                              {{ detailForm.drivewayWidth || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="里程">
                          <span class="text" :title="detailForm.mileage">
                              {{ detailForm.mileage + ' KM' || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="路面类型">
                          <span
                              class="text"
                              :title="detailForm.roadsurfaceTypeValue"
                          >
                              {{ detailForm.roadsurfaceTypeValue || '-' }}
                          </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-col :span="6">
                      <el-form-item label="技术等级">
                          <span
                              class="text"
                              :title="detailForm.technologyClassValue"
                          >
                              {{ detailForm.technologyClassValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="车道类型">
                          <span
                              class="text"
                              :title="detailForm.drivewayTypeValue"
                          >
                              {{ detailForm.drivewayTypeValue || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="通车日期">
                          <span class="text" :title="detailForm.passDay">
                              {{ detailForm.passDay || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="24">
                  <el-col :span="24">
                      <el-form-item label="备注" prop="remarks">
                          <span
                              class="text show-all"
                              :title="detailForm.remarks"
                          >
                              {{ detailForm.remarks || '-' }}
                          </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/roadSectionInfo'
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>
