<template>
  <!-- 求助详情 -->
  <view class="help-detail">
    <view class="detail">
      <view class="title">
        <text class="status" style="background:#e54e4e" v-if="helpInfo.dataStatus===0">待处理</text>
        <text class="status" style="background:#3ea545" v-else>已处理</text>
        <text class="content">{{helpInfo.context}}</text>
      </view>
      <view class="attachment">
        <view class="file" v-for="(item, index) in reportedAttachments" :key="index">
          <image class="file-icon" mode="aspectFill" :src="item.thumbnail" @click="previewImage(item.thumbnail)">
          <!-- <view class="file-name">{{item.name}}</view> -->
        </view>
      </view>
      <view class="info">求助时间：{{helpInfo.createTime}}</view>
      <view class="info">求助分类：{{helpInfo.msgTypeCn}}</view>
      <view class="info">求助门牌：{{helpInfo.address}}</view>
    </view>
    <view class="flow">
      <text class="flow-title">处置记录</text>
      <uni-steps :options="steps" active-color="#007AFF" :active="currentStep" direction="column" />
    </view>
  </view>
</template>

<script>
import { downloadFile } from '@/api/system';
import { getHelpDetail } from '@/api/help';

export default {
  data() {
    return {
      uuid: '',
      helpInfo: {},
      checkResult: {},
      currentStep: 1,
      steps: [
        { title: '发起求助', desc: '' },
        { title: '镇街指挥室', desc: '' },
        { title: '完成', desc: '' }
      ],
      showPopup: false,
			evaluateScore: 5,
      reportedAttachments: []
    };
  },

  onLoad(options) {
    this.uuid = options.uuid;
    this.getHelpDetail();
  },
  methods: {
    /* 获取求助详情 */
    getHelpDetail() {
      getHelpDetail({uuid: this.uuid}).then(res =>{
        this.helpInfo = res.data.callingHelpInfo;
        this.checkResult = res.data.checkResult || {};
        if (this.helpInfo.fileId) {
          this.downloadAttachment(this.helpInfo.fileId);
          // this.reportedAttachments = JSON.parse(this.helpInfo.fileId);
          // this.reportedAttachments.forEach((item) => {
          //   item.thumbnail = `/static/images/upload/type_${item.type}.png`;
          // });
        }
        this.currentStep = this.helpInfo.dataStatus === 0 ? 1 : 2;
        this.steps[0].desc = `求助人姓名：${this.helpInfo.createUserName} \n 时间：${this.helpInfo.createTime}`;
        if (this.currentStep === 2) {
          this.steps[1].desc = `处理人姓名：${this.checkResult.checkUserName || ''} \n 时间：${this.helpInfo.checkTime || ''}`;
          this.steps[2].desc = `时间：${this.helpInfo.checkTime || ''}`;
        }
      })
    },

		/* 下载附件 */
		downloadAttachment(val) {
      this.reportedAttachments = [];
      const attachments = JSON.parse(val);
      attachments.forEach(item => {
        if (item.type === 'image' || item.type === 'img') {
          downloadFile({ fileUuid: item.fileId }).then(res => {
            let imageType = res.header['Content-Type'];
            if (imageType.startsWith('image')) {
              item.thumbnail = `data:${imageType};base64,${uni.arrayBufferToBase64(res.data)}`;
            } else {
              item.thumbnail = `/static/images/upload/type_${item.type}.png`;
            }
            this.reportedAttachments.push(item);
          });
        } else {
          item.thumbnail = `/static/images/upload/type_${item.type}.png`;
          this.reportedAttachments.push(item);
        }
      });
		},

    /* 预览图片 */
    previewImage(currentImage) {
      const imageUrls = [];
      this.reportedAttachments.forEach(item => {
        imageUrls.push(item.thumbnail)
      });
      uni.previewImage({
        current: currentImage,
        urls: imageUrls
      });
    },
  }
};
</script>

<style>
  @import './helpDetail.css'
</style>
