<template>
  <div class="edit-add-detail detail show-scrollbar">
    <div
      v-loading="detailLoading"
      class="form-content"
      element-loading-background="rgba(10 ,38 ,61, 0.9)"
      element-loading-text="详情加载中..."
    >
      <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" style="flex-wrap: wrap" type="flex">
          <el-col :span="6">
            <el-form-item label="边坡编码">
                <span :title="detailForm.number" class="text">
                  {{ detailForm.number || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地下通道号">
                <span :title="detailForm.roadSegmentName" class="text">
                  {{ detailForm.roadSegmentName || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="管养单位">
                <span :title="detailForm.officeName" class="text">
                  {{ detailForm.officeName || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否匝道结构物">
                <span :title="dictionaryEscape('sftyzd',detailForm.isRamp)" class="text">
                  {{ dictionaryEscape('sftyzd', detailForm.isRamp) || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡方向">
                <span :title="dictionaryEscape('qlfx',detailForm.direction)" class="text">
                  {{ dictionaryEscape('qlfx', detailForm.direction) || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保护尺寸">
                <span :title="detailForm.protectiveDimension" class="text">
                  {{ detailForm.protectiveDimension || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡等级">
                <span :title="dictionaryEscape('bplx',detailForm.isHighRisk)" class="text">
                  {{ dictionaryEscape('bplx', detailForm.isHighRisk) || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡类型">
              <span :title="dictionaryEscape('bpfl',detailForm.sideType,{congruent:false})" class="text">
                  {{ dictionaryEscape('bpfl', detailForm.sideType, {congruent: false}) || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起点桩号KM">
                <span :title="detailForm.startPegK" class="text">
                  {{ detailForm.startPegK || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="止点桩号KM">
                <span :title="detailForm.endPegK" class="text">
                  {{ detailForm.endPegK || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设施工情况">
                <span :title="detailForm.constructionSituation" class="text">
                  {{ detailForm.constructionSituation || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地质">
                <span :title="detailForm.geology" class="text">
                  {{ detailForm.geology || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保护种类">
                <span :title="detailForm.protectType" class="text">
                  {{ detailForm.protectType || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="防护材料">
                <span :title="detailForm.protectMaterial" class="text">
                  {{ detailForm.protectMaterial || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡长度">
                <span :title="detailForm.length" class="text">
                  {{ detailForm.length || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡高度">
                <span :title="detailForm.height" class="text">
                  {{ detailForm.height || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="防护位置">
                <span :title="detailForm.防护位置" class="text">
                  {{ detailForm.防护位置 || '-' }}
                </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.startPeg" class="text">
                  {{ detailForm.startPeg || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="止点桩号">
                <span :title="detailForm.endPeg" class="text">
                  {{ detailForm.endPeg || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属区县">
                <span :title="detailForm.district" class="text">
                  {{ detailForm.district || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开挖级数">
                <span :title="detailForm.rxcavateLevel" class="text">
                  {{ detailForm.rxcavateLevel || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡坡率">
                <span :title="detailForm.slopeRate" class="text">
                  {{ detailForm.slopeRate || '-' }}
                </span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
                <span :title="detailForm.modifySituation" class="show-all">
                  {{ detailForm.modifySituation || '-' }}
                </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

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

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

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      detailLoading: true,
      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) {
      try {
        const {...detailForm} = await tableDetail(id)
        this.detailForm = detailForm
      } finally {
        this.detailLoading = false
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

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