<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.code">
                              {{ detailForm.code || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <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.companyName">
                              {{ detailForm.companyName || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="里程">
                          <span class="text" :title="detailForm.mileage">
                              {{ detailForm.mileage + ' 千米' || '-' }}
                          </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.start">
                              {{ detailForm.start || '-' }}
                          </span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="终点地址">
                          <span class="text" :title="detailForm.end">
                              {{ detailForm.end || '-' }}
                          </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-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="24">
                      <el-form-item label="备注">
                          <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/routeInfo'
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) {
          this.detailForm = await tableDetail(id)
      },
  },
  beforeDestroy() {
      // 在组件销毁之前 清除订阅消息
      PubSub.unsubscribe(this.pubSub)
  },
}
</script>

<style lang="scss" scoped>

</style>
