<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.carNumber" class="text">
                {{ detailForm.carNumber || '-' }}
              </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.carClass" class="text">
                {{ dictionaryEscape('jycl-cllx', detailForm.carClass + '') || '-' }}
              </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.useType" class="text">
                {{ dictionaryEscape('jycl-clyt', detailForm.useType + '') || '-' }}
              </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.name" class="text">
                {{ detailForm.name || '-' }}
              </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.carColour" class="text">
                {{ detailForm.carColour === '1' ? '黑色' : detailForm.carColour === '2' ? '白色' : detailForm.carColour === '3' ? '黄色' : '-'
                }}
              </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.carBrand" class="text">
                {{ detailForm.carBrand || '-' }}
              </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.seatsNumber" class="text">
                {{ detailForm.seatsNumber === 0 ? '2' : detailForm.seatsNumber === 1 ? '4' : detailForm.seatsNumber === 2 ? '5' : '-'
                }}
              </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.company" class="text">
                {{ detailForm.company || '-' }}
              </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.fuelConsumption" class="text">
                {{ detailForm.fuelConsumption || '-' }}
              </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.fuelConsumption" class="text">
                {{ detailForm.fuelConsumption ? detailForm.fuelConsumption + '吨' : '-' }}
              </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.engineNumber" class="text">
                {{ detailForm.engineNumber || '-' }}
              </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.frameNumber" class="text">
                {{ detailForm.frameNumber || '-' }}
              </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="ICCID">
              <span :title="detailForm.iccid" class="text">
                {{ detailForm.iccid || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="IMSI">
              <span :title="detailForm.imsi" class="text">
                {{ detailForm.imsi || '-' }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="SIM卡号">
              <span :title="detailForm.simNumber" class="text">
                {{ detailForm.simNumber || '-' }}
              </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.operators" class="text">
                {{ detailForm.operators === '1' ? '移动' : detailForm.operators === '2' ? '电信' : detailForm.operators === '3' ? '联通' : detailForm.operators === '4' ? '其他' : '-'
                }}
              </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.isAlarm" class="text">
                {{ detailForm.isAlarm ? '是' : '否' }}
              </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.isFiling" class="text">
                {{ detailForm.isFiling ? '是' : '否' }}
              </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.isOwned" class="text">
                {{ detailForm.isOwned ? '是' : '否' }}
              </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.buyDate" class="text">
                {{ detailForm.buyDate || '-' }}
              </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.expirationDate" class="text">
                {{ detailForm.expirationDate || '-' }}
              </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.registrationDate" class="text">
                {{ detailForm.registrationDate || '-' }}
              </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.addDate" class="text">
                {{ detailForm.addDate || '-' }}
              </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.suitabilityCar" class="text">
                {{ dictionaryEscape('kc-stcx', detailForm.suitabilityCar + '') || '-' }}
              </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.suitabilityTruck" class="text">
                {{ dictionaryEscape('hc-stcx', detailForm.suitabilityTruck + '') || '-' }}
              </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="24">
            <el-form-item label="备注" prop="remarks">
              {{ detailForm.remarks || '-' }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item class="file-form-item" label="行驶证正面照片" prop="drivingLicenseF">
              <div v-loading="drivingLicenseFLoading" class="img-box" element-loading-background="rgba(0, 0, 0, .7)"
                   element-loading-spinner="el-icon-loading">
                <el-image :preview-src-list="[detailForm.drivingLicenseF]" :src="detailForm.drivingLicenseF"
                          title="点击预览"
                          @load="imgLoad('drivingLicenseFLoading')">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="file-form-item" label="行驶证背面照片" prop="drivingLicenseB">
              <div v-loading="drivingLicenseFLoading" class="img-box" element-loading-background="rgba(0, 0, 0, .7)"
                   element-loading-spinner="el-icon-loading">
                <el-image :preview-src-list="[detailForm.drivingLicenseB]" :src="detailForm.drivingLicenseB"
                          title="点击预览"
                          @load="imgLoad('drivingLicenseBLoading')">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px;margin-top: 12px">
          <el-col :span="6">
            <el-form-item class="file-form-item" label="车辆正面照片" prop="carFrontUrl">
              <div v-loading="carFrontUrlLoading" class="img-box" element-loading-background="rgba(0, 0, 0, .7)"
                   element-loading-spinner="el-icon-loading">
                <el-image :preview-src-list="[detailForm.carFrontUrl]" :src="detailForm.carFrontUrl" title="点击预览"
                          @load="imgLoad('carFrontUrlLoading')">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="file-form-item" label="车辆侧面照片" prop="carSideUrl">
              <div v-loading="carSideUrlLoading" class="img-box" element-loading-background="rgba(0, 0, 0, .7)"
                   element-loading-spinner="el-icon-loading">
                <el-image :preview-src-list="[detailForm.carSideUrl]" :src="detailForm.carSideUrl" title="点击预览"
                          @load="imgLoad('carSideUrlLoading')">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="file-form-item" label="车辆背面照片" prop="carBehindUrl">
              <div v-loading="carBehindUrlLoading" class="img-box" element-loading-background="rgba(0, 0, 0, .7)"
                   element-loading-spinner="el-icon-loading">
                <el-image :preview-src-list="[detailForm.carBehindUrl]" :src="detailForm.carBehindUrl" title="点击预览"
                          @load="imgLoad('carBehindUrlLoading')">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

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

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      pubSub: null,
      drivingLicenseFLoading: false,
      drivingLicenseBLoading: false,
      carFrontUrlLoading: false,
      carSideUrlLoading: false,
      carBehindUrlLoading: false
    }
  },
  computed: {
    actionUrl: _ => window.context.portal,
    previewUrl: _ => window.context.portal + '/file/onlinePreviewController/v1/getFileById_'
  },
  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() {
    },
    imgLoad(type) {
      this[type] = false
    },
    // 关闭页面执行
    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.drivingLicenseFLoading = true
      this.drivingLicenseBLoading = true
      this.carFrontUrlLoading = true
      this.carSideUrlLoading = true
      this.carBehindUrlLoading = true
      const data = await tableDetail(id)
      if (data.drivingLicenseF) {
        data.drivingLicenseF = this.previewUrl + data.drivingLicenseF
      } else {
        data.drivingLicenseF = ''
        this.drivingLicenseFLoading = false
      }
      if (data.drivingLicenseF) {
        data.drivingLicenseB = this.previewUrl + data.drivingLicenseB
      } else {
        data.drivingLicenseB = ''
        this.drivingLicenseBLoading = false
      }
      if (data.carFrontUrl) {
        data.carFrontUrl = this.previewUrl + data.carFrontUrl
      } else {
        data.carFrontUrl = ''
        this.carFrontUrlLoading = false
      }
      if (data.carSideUrl) {
        data.carSideUrl = this.previewUrl + data.carSideUrl
      } else {
        data.carSideUrl = ''
        this.carSideUrlLoading = false
      }
      if (data.carBehindUrl) {
        data.carBehindUrl = this.previewUrl + data.carBehindUrl
      } else {
        data.carBehindUrl = ''
        this.carBehindUrlLoading = false
      }
      this.detailForm = {...data}
    },

    // 已上传文件点击
    async handlePreview(file) {
      const fileId = file.fileId || file.response.fileId || '' // 文件ID
      const fileName = file.name || file.fileName || '' // 文件名
      if (!(fileId && fileName)) return this.$message.warning('文件错误，请删除后重新上传')
      const browserOperablePattern = /\.(jpg|jpeg|png|gif|bmp|webp|pdf)$/i
      if (browserOperablePattern.test(fileName)) {
        window.open(this.previewUrl + fileId, '_blank')
      } else {
        window.open(this.downloadUrl + fileId, '_blank')
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.form-content {
  height: 0;
}

.img-box {
  width: 240px;
  height: 150px;
  box-sizing: border-box;
  border-radius: 5px;
  opacity: 1;
  z-index: 1;
  transition: all .3s;

  ::v-deep.el-image {
    width: 100%;
    height: 100%;
    border-radius: 5px;

    * {
      background: transparent;
      box-sizing: border-box;
      border-radius: 5px;
    }
  }

  ::v-deep.el-loading-mask {
    border-radius: 5px;
  }

  ::v-deep.image-slot {
    width: 100%;
    height: 100%;
    line-height: 150px;
    text-align: center;
    border: 1px #43a1ff dashed;
    background: transparent;
    box-sizing: border-box;
    border-radius: 5px;

    i {
      font-size: 20px;
      color: #43a1ff;
    }
  }
}
</style>
