<template>
  <div class="edit-add-detail detail">
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="detailForm"
        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" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="所属路段">
              <span :title="detailForm.roadName" class="text">
                {{ detailForm.roadName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始桩号">
              <span :title="detailForm.pegSVal" class="text">
                {{ detailForm.pegSVal || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束桩号">
              <span :title="detailForm.pegEVal" class="text">
                {{ detailForm.pegEVal || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="所属区域">
              <span :title="detailForm.regionalName" class="text">
                {{ detailForm.regionalName || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="方向">
              <span :title="detailForm.direction" class="text">
                {{
                  dictionaryEscape('yxjc-fx', detailForm.direction + '') || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="位置描述">
              <span
                :title="detailForm.locationCatUncle"
                class="text"
                style="white-space:normal"
              >
                {{ detailForm.locationCatUncle || '-' }}
              </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" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="来文气象局">
              <span :title="detailForm.publishUnit" class="text">
                {{ detailForm.publishUnit || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来文方式">
              <span :title="detailForm.publishDeviceName" class="text">
                {{
                  dictionaryEscape(
                    'lwfs',
                    detailForm.publishDeviceName + ''
                  ) || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
          <el-col v-if="detailForm.warningType === 1" :span="8">
            <el-form-item label="预警灾害类型">
              <span :title="detailForm.warningValue" class="text">
                {{
                  dictionaryEscape(
                    'yjlxdm',
                    detailForm.warningValue + ''
                  ) || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="接收人">
              <span :title="detailForm.receiveUser" class="text">
                {{ detailForm.receiveUser || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接收时间">
              <span :title="detailForm.receiveTime" class="text">
                {{ detailForm.receiveTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解除接收时间">
              <span :title="detailForm.relieveReceiveTime" class="text">
                {{ detailForm.relieveReceiveTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="发布时间">
              <span :title="detailForm.warningTime" class="text">
                {{ detailForm.warningTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警类型">
              <span :title="detailForm.warningType" class="text">
                {{
                  dictionaryEscape('yxjc-yjlx', detailForm.warningType + '') ||
                  '-'
                }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布设备类型">
              <span :title="detailForm.publishDeviceType" class="text">
                {{
                  dictionaryEscape('yxjc-fbsblx', detailForm.publishDeviceType + '') ||
                  '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="预警等级">
              <span :title="detailForm.warningLevel" class="text">
                {{
                  dictionaryEscape('yxjc-yjdj', detailForm.warningLevel + '') ||
                  '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="天气情况">
              <span :title="detailForm.warningContent" class="text">
                {{ detailForm.warningContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="转发时间">
              <span :title="detailForm.forwardTime" class="text">
                {{ detailForm.forwardTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解除转发时间">
              <span :title="detailForm.relieveForwardTime" class="text">
                {{ detailForm.relieveForwardTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="响应时间">
              <span :title="detailForm.responseTime" class="text">
                {{ detailForm.responseTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解除发布时间">
              <span :title="detailForm.relieveWarningTime" class="text">
                {{ detailForm.relieveWarningTime || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="已转达人员">
              <span
                :title="detailForm.forwardObject"
                class="text"
              >
                {{ detailForm.forwardObject || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="响应情况">
              <span :title="detailForm.responseContent" class="text">
                {{ detailForm.responseContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="解除内容">
              <span :title="detailForm.relieveContent" class="text">
                {{ detailForm.relieveContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="解除反馈">
              <span :title="detailForm.relieveFeedback" class="text">
                {{ detailForm.relieveFeedback || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="落实情况">
              <span :title="detailForm.executeContent" class="text">
                {{ detailForm.executeContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="备注">
              <span :title="detailForm.remark" class="text">
                {{ detailForm.remark || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="16">
            <el-form-item label="是否落实“叫应”机制">
              <span :title="detailForm.isRespondCall === '1' ? '是' : '否'" class="text">
                {{ detailForm.isRespondCall === '1' ? '是' : '否' || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail} from '@/api/patrolAndRescue/operationalMonitoring/specialWarningInformation'
import PubSub from 'pubsub-js'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      pubSub: null
    }
  },
  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: {
    dictionaryEscape,
    // 打开页面执行
    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 data = await tableDetail(id)
      this.detailForm = {...data}
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.form-content {
  height: 0;
}
</style>
