<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="6">
            <el-form-item label="投诉路段">
              <span :title="detailForm.roadName" class="text">
                {{ detailForm.roadName || '-' }}
              </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.complaintSource" class="text">
                {{ dictionaryEscape('yxjc-tsly', detailForm.complaintSource + '') || '-' }}
              </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.specificSource" class="text">
                {{ dictionaryEscape('yxjc-jtly', detailForm.specificSource + '') || '-' }}
              </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.complaintTime" class="text">
                {{ detailForm.complaintTime || '-' }}
              </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="6">
            <el-form-item label="投诉人姓名">
              <span :title="detailForm.complainantName" class="text">
                {{ detailForm.complainantName || '-' }}
              </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.complainantContactInformation" class="text">
                {{ detailForm.complainantContactInformation || '-' }}
              </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.respondent" class="text">
                {{ detailForm.respondent || '-' }}
              </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.responseTime" class="text">
                {{ detailForm.responseTime || '-' }}
              </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.complaintCategory" class="text">
                 {{ dictionaryEscape('yxjc-tslb', detailForm.complaintCategory + '') || '-' }}
              </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.complaintObject" class="text">
                {{ dictionaryEscape('yxjc-tsdx', detailForm.complaintObject + '') || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="投诉事项">
              <span :title="detailForm.complaintMatters" class="text" style="white-space:normal">
                {{ detailForm.complaintMatters || '-' }}
              </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.complaintReasonType" class="text">
                 {{ dictionaryEscape('yxjc-tslylx', detailForm.complaintReasonType + '') || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="detailForm.complaintReasonType===1" :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="具体投诉理由内容">
              <span :title="detailForm.complaintReasonsContent" class="text" style="white-space:normal">
                {{ detailForm.complaintReasonsContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="具体对象阐述">
              <span :title="detailForm.specificObjectDescription" class="text" style="white-space:normal">
                {{ detailForm.specificObjectDescription || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="备注">
              <span :title="detailForm.notes" class="text" style="white-space:normal">
                {{ detailForm.notes || '-' }}
              </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/complaintLedgerManagement'
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>
