<template>
  <!-- 反映详情 -->
  <view class="alarm-detail" :class="{'alarm-detail--elder':$uiStyle==='elder'}">
		<view class="detail">
			<view class="title">
        <text class="status" style="background:#e54e4e" v-if="alarmInfo.dataStatus===0">待处理</text>
        <text class="status" style="background:#3ea545" v-else>已处理</text>
				<text class="content">{{alarmInfo.context}}</text>
			</view>
			<view class="attachment" v-if="reportedAttachments.length>0">
        <view class="file" v-for="(item, index) in reportedAttachments" :key="index" @click="previewImage(item.thumbnail)">
          <img class="file-icon" :src="item.thumbnail">
          <!-- <div class="file-name">{{item.name}}</div> -->
        </view>
			</view>
			<view class="way">
				<text>反映渠道：{{alarmInfo.telephone}}</text>
				<text>反映方式：{{alarmInfo.callType===1?'电话反映':'静默反映'}}</text>
			</view>
			<view class="time">反映时间：{{alarmInfo.createTime}}</view>
			<view class="doorplate">反映门牌：{{alarmInfo.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 { getAlarmDetail } from '@/api/alarm';

export default {
	data() {
		return {
			uuid: '',
			alarmInfo: {},
			checkResult: {},
			steps: [
        { title: '发起反映', desc: '' },
        { title: '奉化区受理中心',desc: '' },
        { title: '完成', desc: '' }
			],
			currentStep: 1,
			showPopup: false,
			evaluateScore: 5,
			reportedAttachments: []
		};
	},

	onLoad(options) {
		this.uuid = options.uuid;
		this.getAlarmDetail();
	},

	methods: {
		/* 获取反映详情 */
		getAlarmDetail () {
			getAlarmDetail({ uuid: this.uuid }).then(res =>{
				this.alarmInfo = res.data.callingPoliceInfo;
				this.checkResult = res.data.checkResult || {};
				if (this.alarmInfo.fileId) {
					this.downloadAttachment(this.alarmInfo.fileId);
					// this.reportedAttachments = JSON.parse(this.alarmInfo.fileId);
					// this.reportedAttachments.forEach((item) => {
					// 	item.thumbnail = `/static/images/upload/type_${item.type}.png`;
					// });
				}
				this.currentStep = this.alarmInfo.dataStatus === 0 ? 1 : 2;
				this.steps[0].desc = `反映人姓名：${this.alarmInfo.createUserName} \n 时间：${this.alarmInfo.createTime}`;
				if (this.currentStep === 2) {
					this.steps[1].desc = `处理人姓名：${this.checkResult.checkUserName || ''} \n 时间：${this.alarmInfo.checkTime || ''}`;
					this.steps[2].desc = `时间：${this.alarmInfo.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 = `/static/images/upload/type_${item.type}.png`;
            } else {
            	item.thumbnail = `data:${imageType};base64,${uni.arrayBufferToBase64(res.data)}`;
						}
            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 './alarmDetail.css';
</style>

<style lang="scss" scoped>
.alarm-detail--elder {
	.title {
		font-size: calc(14px * $zlb-elder-font-scale);
	}
	.way, .time, .doorplate {
		font-size: calc(11px * $zlb-elder-font-scale);
	}
	.flow-title {
		font-size: calc(14px * $zlb-elder-font-scale);
	}
	.uni-steps__column-text {
			padding: 15rpx 0 !important;
	}
	::v-deep .uni-steps__column-title {
		font-size: calc(11px * $zlb-elder-font-scale);
		padding: 3px 0;
	}
	::v-deep .uni-steps__column-desc {
		font-size: calc(11px * $zlb-elder-font-scale);
		line-height: calc(15px * $zlb-elder-font-scale);
		padding: 3px 0;
	}
}
</style>
