<template>
  <div class="edit-add-detail detail">
    <div class="form-content">
      <el-form ref="formInfo" :model="detailForm" class="detail-form" label-position="right" label-suffix="：">
        <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 :title="detailForm.eventTel" class="text">
                {{ detailForm.eventTel || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件发生时间">
              <span :title="detailForm.eventTime" class="text">
                {{ detailForm.eventTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件来源">
              <span :title="detailForm.eventSrc" class="text">
                {{ dictionaryEscape('sjly', detailForm.eventSrc + '') || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件类型">
              <span :title="detailForm.eventType" class="text">
                {{ dictionaryEscape('sjlx', detailForm.eventType + '') || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件等级">
              <span :title="detailForm.eventLevel" class="text">
                {{ detailForm.eventLevel + '级' || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件上报时间">
              <span :title="detailForm.uploadTime" class="text">
                {{ detailForm.uploadTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件上报人员">
              <span :title="detailForm.uploadUserName" class="text">
                {{ detailForm.uploadUserName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件上报部门">
              <span :title="detailForm.uploadTeamName" class="text">
                {{ detailForm.uploadTeamName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收时间">
              <span :title="detailForm.receiveTime" class="text">
                {{ detailForm.receiveTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收部门">
              <span :title="detailForm.receiveOrgName" class="text">
                {{ detailForm.receiveOrgName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收人员">
              <span :title="detailForm.receiveUserName" class="text">
                {{ detailForm.receiveUserName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属路段">
              <span :title="detailForm.roadName" class="text">
                {{ detailForm.roadName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经度">
              <span :title="detailForm.lng" class="text">
                {{ detailForm.lng || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="纬度">
              <span :title="detailForm.lat" class="text">
                {{ detailForm.lat || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件开始点位桩号">
              <span :title="detailForm.pegSVal" class="text">
                {{ detailForm.pegSVal || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件结束点位桩号">
              <span :title="detailForm.pegEVal" class="text">
                {{ detailForm.pegEVal || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="肇事方">
              <span :title="detailForm.cause" class="text">
                {{ detailForm.cause || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="肇事车辆">
              <span :title="detailForm.causeCar" class="text">
                {{ detailForm.causeCar || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拥堵里程">
              <span :title="detailForm.blockLength" class="text">
                {{ detailForm.blockLength || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始的站">
              <span :title="detailForm.startPatrolName" class="text">
                {{ detailForm.startPatrolName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束的站">
              <span :title="detailForm.endPatrolName" class="text">
                {{ detailForm.endPatrolName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <span :title="detailForm.direction" class="text">
                {{ detailForm.direction || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="滞留车辆数量">
              <span :title="detailForm.holdupCarNum" class="text">
                {{ detailForm.holdupCarNum || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="滞留人员数量">
              <span :title="detailForm.holdupUserNum" class="text">
                {{ detailForm.holdupUserNum || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受伤人员数量">
              <span :title="detailForm.hurtUserNum" class="text">
                {{ detailForm.hurtUserNum || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="损坏车辆数量">
              <span :title="detailForm.brokenCarNum" class="text">
                {{ detailForm.brokenCarNum || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="死亡人员数量">
              <span :title="detailForm.deadUserNum" class="text">
                {{ detailForm.deadUserNum || '-' }}
              </span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="路产损失">
              <span :title="detailForm.loss" class="text">
                {{ detailForm.loss || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属执法支队及大队">
              <span :title="detailForm.trafficTeam" class="text">
                {{ detailForm.trafficTeam || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <span :title="detailForm.memo" class="text">
                {{ detailForm.memo || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button v-if="eventStatus < 2" type="primary" @click="eventConfirm" :loading="confirmLoading">
        核实登记
      </el-button>
      <el-button @click="changePage('TablePage')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>
    <el-backtop :visibility-height="10" target=".detail-form">
      <div class="top-box">UP</div>
    </el-backtop>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail, eventConfirm} from '@/api/patrolAndRescue/commandDispatch/reportEventQuery'
import PubSub from 'pubsub-js'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      pubSub: null,
      eventStatus: 0,
      confirmLoading: false
    }
  },
  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.eventStatus = data.status
        this.getDetail(data.id)
      }
    })
  },
  methods: {
    dictionaryEscape,
    eventConfirm() {
      this.$confirm('确定事件核实登记吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            this.confirmLoading = true
            const {state} = await eventConfirm(this.detailForm.id)
            if (state) {
              this.$message.success(`事件确认成功`)
              this.confirmLoading = false
              this.changePage('TablePage','add')
            }
          })
    },
    // 打开页面执行
    openPage() {
    },
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, {type})
      })
    },
    // 关闭页面执行
    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 {...detailForm} = await tableDetail(id)
      this.detailForm = {
        ...detailForm
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped></style>
