<template>
  <div class="edit-add-detail detail show-scrollbar">
    <div
      v-loading="formLoading"
      class="form-content"
      element-loading-background="rgba(10 ,38 ,61, 0.9)"
      element-loading-text="详情加载中..."
    >
      <el-form
        ref="formInfo"
        :model="detailForm"
        label-position="left"
        label-suffix="："
        label-width="120px"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">
              值班日志
            </div>
          </div>
        </div>
        <div class="form-wrapper">
          <div class="title">
            <div>运行监测调度中心</div>
            <div>值 班 记 录</div>
          </div>
          <el-descriptions :column="3" border :labelStyle="{width: '140px'}">
            <el-descriptions-item label="所属路段" :span="3">
              {{ detailForm.roadInfosName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="班次">
              {{ detailForm.shiftName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="工作时间" :span="2">
              {{ detailForm.dateRange || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="值班人员" :span="3">
              <span class="textarea-content">{{ detailForm.dutyPersonnel || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="值班记录" :span="3">
              <span class="textarea-content">{{ detailForm.dutySituation || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            :column="6"
            border
            class="el-descriptions-table"
            direction="vertical"
          >
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              交通事故
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.trafficAccidentCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.trafficAccidentDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              人员伤亡
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.casualtyCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.casualtyDetail || '-' }}
            </el-descriptions-item>

            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              管制情况
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.controlSituationCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.controlSituationDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              重大事件记录
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.majorEventCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.majorEventDetail || '-' }}
            </el-descriptions-item>

            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              拥堵情况
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.congestionCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.congestionDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              设备报修
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.equipmentRepairCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.equipmentRepairDetail || '-' }}
            </el-descriptions-item>

            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              投诉记录
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.complaintCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.complaintDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              清障救援
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.rescueCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.rescueDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              外单位来访
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.visitCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.visitDetail || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="事项"
              :labelStyle="{width: '140px'}"
              :contentStyle="{'text-align': 'center'}"
            >
              来电询问
            </el-descriptions-item>
            <el-descriptions-item label="数量" :labelStyle="{width: '120px'}" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.inquiryCount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="详情" :contentStyle="{'text-align': 'center'}">
              {{ detailForm.inquiryDetail || '-' }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :labelStyle="{width: '140px'}">
            <el-descriptions-item label="交接情况" :span="3">
              <span class="textarea-content">{{ detailForm.handoverSituation || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="设施设备" :span="3">
              <span class="textarea-content">{{ detailForm.facilityStatus || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="接班人员" :span="3">
              <span class="textarea-content">{{ detailForm.nextShiftPersonnel || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="管理员意见" :span="2">
              <span class="textarea-content">{{ detailForm.adminComment || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="管理员签字"
              :span="1"
              :contentStyle="{width: '200px'}"
            >
              {{ detailForm.adminName || '-' }}<br />
              {{ detailForm.adminAuditTime || '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form>
    </div>
    <el-backtop :visibility-height="20" target=".el-form">
      <div class="top-box">UP</div>
    </el-backtop>
  </div>
</template>

<script>
import {tableDetail} from '@/api/patrolAndRescue/commandDispatch/reportManagement/dutyRecords.js'
import PubSub from 'pubsub-js'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      formLoading: false,
      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() {
      const {pubSub} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub
      })
      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },

    // 获取详情
    async getDetail(id) {
      this.formLoading = true
      try {
        let {
          startTime = '',
          endTime = '',
          roadInfos = [],
          ...detailForm
        } = await tableDetail(id)
        const roadInfosName = roadInfos.map(i => i.name).join('、')

        this.detailForm = {
          ...detailForm,
          dateRange: `${startTime.slice(0, 16)} 至 ${endTime.slice(0, 16)}`,
          roadInfosName
        }
      } finally {
        this.formLoading = false
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
::v-deep
  .el-descriptions
  .el-descriptions__body
  .el-descriptions-row
  .el-descriptions-item__cell.el-descriptions-item__label {
  width: auto;
  text-align: center;
}
.edit-add-detail {
  .form-content .el-form {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
  }

  .form-wrapper {
    flex: 1;
    overflow-y: auto;
    width: 1200px;
    margin: 0 auto;
    padding: 0 100px;
    .title {
      margin: 10px 0;
      > div {
        font-size: 24px;
        text-align: center;
      }
    }
  }
}
.textarea-content{
  white-space: pre-line;
}
</style>
