<!--
 * @Description: 应急处置记录详情
 * @Author: 空白格
 * @Date: 2022-08-23 10:34:14
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-23 12:01:14
 * @FilePath: \parking_operation\pages\patrolManagement\emergencyDisposalRecords\recordsDetails\recordsDetails.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->

<template>
  <view class="details">
    <view class="details-item">
      <view class="details-item-title">
        <view class="details-item-title-text">事件信息</view>
      </view>
      <view class="details-item-content">
        <view class="details-item-content-item">路段/停车场：{{ details.roadName || '-' }}</view>
        <view class="details-item-content-item">描述：{{ details.exceprionDes || '-' }}</view>
        <view class="details-item-content-item">
          <view class="left">图片：</view>
          <view class="right" v-if="details.imgList && details.imgList.length">
            <u--image
              class="right-img"
              v-for="(item, index) in details.imgList"
              :key="index"
              :showLoading="true"
              :src="item"
              width="80px"
              height="80px"
              @click="previewImgae(details.imgList, index)"
            >
              <view slot="error" style="font-size: 24rpx">加载失败</view>
            </u--image>
          </view>
          <view v-else>暂无</view>
        </view>
      </view>
    </view>
    <view class="details-item">
      <view class="details-item-title">
        <view class="details-item-title-text">处理信息</view>
      </view>
      <view class="details-item-content">
        <view class="details-item-content-item">处理员：{{ details.processBy || '-' }}</view>
        <view class="details-item-content-item">处理过程：{{ details.processDes || '-' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: {}
    };
  },
  onLoad(page) {
    if (page.id) {
      this.getDetails(page.id);
    }
  },
  methods: {
    /**
     * 通过id获取记录详情
     * @date 2022-08-23
     * @param {any} id
     * @returns {any}
     */
    getDetails(id) {
      uni.$u.api.emergencyDisposalApi.getEmergencyDisposalRecordsDetailsApi({ id }).then((res) => {
        if (res.code === 200) {
          this.details = res.data;
        }
      });
    },
    /**
     * 预览图片
     * @date 2022-08-23
     * @param {any} imgList
     * @param {any} index
     * @returns {any}
     */
    previewImgae(imgList, index) {
      uni.previewImage({
        current: index,
        urls: imgList
      });
    }
  }
};
</script>

<style lang="scss">
page {
  min-height: calc(100vh - 44px);
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
@import './recordsDetails.scss';
</style>
