<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="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>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="内容">
              <span :title="detailForm.typeContent" class="text">
                {{ detailForm.typeContent || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="类型">
              <span :title="detailForm.category" class="text">
                {{
                  dictionaryEscape('xcdwlx', JSON.stringify(detailForm.category)) || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="位置">
              <span :title="detailForm.lng + ',' + detailForm.lat" class="text">
                {{ detailForm.lng + ',' + detailForm.lat || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="路段">
              <span :title="detailForm.roadCode" class="text">
                {{ detailForm.roadCode || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="方向">
              <span :title="detailForm.direction" class="text">
                {{
                  dictionaryEscape('xsfx', detailForm.direction) || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="桩号">
              <span :title="detailForm.pegVal" class="text">
                {{ detailForm.pegVal || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="登记人员">
              <span :title="detailForm.inspectUserName" class="text">
                {{ detailForm.inspectUserName || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="8">
            <el-form-item label="登记时间">
              <span :title="detailForm.inspectTime" class="text">
                {{ detailForm.inspectTime || '-' }}
              </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" type="flex">
          <el-col :span="8">
            <el-form-item label="状态">
              <span
                :title="dictionaryEscape('xcdwzt', detailForm.inspectStatus)"
                class="text"
              >
                {{
                  dictionaryEscape('xcdwzt', detailForm.inspectStatus) || '-'
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
          <el-col :span="24">
            <el-form-item label="巡查情况">
              <span :title="detailForm.inspectInfo" class="text">
                {{ detailForm.inspectInfo || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="detailForm.inspectStatus === '0'" :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="24">
            <el-form-item label="异常处理措施">
                      <span
                        :title="dictionaryEscape('xcycclfs', detailForm.handleType)"
                        class="text"
                      >
                        {{ dictionaryEscape('xcycclfs', detailForm.handleType) || '-' }}
                      </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="detailForm.inspectStatus === '0'" :gutter="24" style="margin-left: 80px" type="flex">
          <el-col :span="24">
            <el-form-item label="处理结果">
                      <span
                        :title="dictionaryEscape('ycclzt', detailForm.handleStatus)"
                        class="text"
                      >
                        {{ dictionaryEscape('ycclzt', detailForm.handleStatus) || '-' }}
                      </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="detailForm.inspectStatus === '0'" :gutter="24" style="flex-wrap: wrap;margin-left: 80px"
                type="flex">
          <el-col :span="24">
            <el-form-item label="处理措施">
                      <span :title="detailForm.handleContent" class="text">
                        {{ detailForm.handleContent || '-' }}
                      </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
          <el-col :span="24">
            <el-form-item label="现场图片">
              <div
                v-if="detailForm.files && detailForm.files.length"
                class="image-box"
              >
                <el-image
                  v-for="(fileUrl, index) in detailForm.files"
                  :key="index"
                  :preview-src-list="detailForm.files"
                  :src="fileUrl"
                >
                </el-image>
              </div>
              <template v-else>-</template>
            </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/roadWatch/abnormalHandling'
import PubSub from 'pubsub-js'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'DetailPage',
      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) => {
      console.log(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 {
        this.detailForm = await tableDetail(id)
        if (this.detailForm.files.length > 0) {
          this.detailForm.files = this.detailForm.files.map(item => {
            return item.filePreviewUrl
          })
          // detailForm.fileArr = detailForm.fileUrl.split(',').map(item => {
          //   return (
          //     window.context.portal +
          //     '/file/onlinePreviewController/v1/getFileById_' +
          //     item
          //   )
          // })
        }
      } finally {
        this.detailLoading = false
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}

.image-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  margin: 5px 0;

  ::v-deep .el-image {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    user-select: none;
    position: relative;
    transition: all 0.15s;
    box-shadow: 3px 3px 10px rgba(darken($--system-background-color, 30%), 0.3);

    .el-image__inner {
      transition: transform 0.2s;
      position: absolute;
    }

    &:hover {
      .el-image__inner {
        transform: scale(1.5);
      }
    }

    .el-image__error {
      background-color: $--system-box-color2;
    }

    .el-image__placeholder {
      background-color: $--color-text-placeholder;
    }

    &:has(.el-image__error, .el-image__placeholder) {
      box-shadow: none;
    }
  }
}
</style>
