<template>
	<view class="page" :style="vuex_theme">
		<view class="content">
			<view class="t1">
				{{detailObj.title}}
			</view>
			<view class="dv">
				<view class="tag">
					{{type[detailObj.type]}}
				</view>
				<view class="time">
					{{$u.timeFrom(detailObj.sendTime)}}
				</view>
			</view>
		</view>
		<view style="background-color: #F7F7F7; width: 100%; height: 10px;"></view>
		<view class="tip">
			<view class="ggxq">
				公告详情
			</view>
			<view class="green-line"></view>
		</view>
		<view class="desc">
			<!-- {{detailObj.content}} -->
			<u-parse :tagStyle="parsestyle" :content="detailObj.content"></u-parse>
		</view>
		<view class="fj">
			附件
		</view>
		<view class="greenbg" v-for="(item,index) in attachmentsFile" :key="index" @click="openLink(item.response)">
			<image v-if="item.response.mime_type.indexOf('image') != -1" :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_img.png`" style="width: 60rpx;height: 60rpx;"></image>
			<image v-else :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_file.png`" style="width: 60rpx;height: 60rpx;"></image>
			<view class="name">
				{{item.response.filename}}
			</view>
		</view>
	</view>
</template>

<script>	
	import {
		msgdetailUrl,
		getImgUrlApi
	} from '@/config/api.js';
	export default {
		data() {
			return {
				id: '',
				detailObj: {},
				type: {
					system: '系统公告',
					inform: '通知公告',
					safety_rules: '安全条例',
					vital_document: '重要文件'
				},
				parsestyle: {
					p: 'color: rgba(0,0,0,0.85);font-size:28rpx;font-family: PingFangSC-Light, PingFang SC;',
				},
				attachmentsFile: [],
			}
		},
		
		onLoad(e) {
			this.id = e.id
			msgdetailUrl(this.id).then(res => {
				
				if (res) {
					this.detailObj = res
					
					if (this.detailObj.attachments) {
						this.attachmentsFile = JSON.parse(this.detailObj.attachments)
					}
				}
			})
		},

		methods: {
			openLink(e) {
				var _this = this
			
				uni.showLoading({
					title: '努力加载中~',
					mask: true
				})
			
				if (e.mime_type.indexOf("image") != -1) {
					_this.openImage(`${this.vuex_ossUrlPubilc}/${e.object}`)
				} else {
					let type = ''
					if (e.object.substring(e.object.lastIndexOf(".")+1) == 'xlsx') {
						type = 'xlsx'
					}else if (e.object.substring(e.object.lastIndexOf(".")+1) == 'pdf') {
						type = 'pdf'
					}else if (e.object.substring(e.object.lastIndexOf(".")+1) == 'docx') {
						type = 'docx'
					}else if (e.object.substring(e.object.lastIndexOf(".")+1) == 'doc') {
						type = 'doc'
					}else if (e.object.substring(e.object.lastIndexOf(".")+1) == 'xls') {
						type = 'xls'
					}
					uni.downloadFile({
						url: `${this.vuex_ossUrlPubilc}/${e.object}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								fileType: type,
								success: function(res) {
									console.log('打开文档成功');
								},
								fail(e) {
									console.log('打开文档error', e);
								},
								complete: function() {
									uni.hideLoading();
								}
							});
						}
					});
				}
				// this.$u.api.getImgUrl({
				// 	bucket: e.bucket,
				// 	filePath: e.object
				// }).then(data => {
				// 	console.log("data...", data)
				// 	if (e.mime_type.indexOf("image") != -1) {
				// 		_this.openImage(data.url)
				// 	} else {
				// 		uni.downloadFile({
				// 			url: data.url,
				// 			success: function(res) {
				// 				var filePath = res.tempFilePath;
				// 				uni.openDocument({
				// 					filePath: filePath,
				// 					showMenu: true,
				// 					success: function(res) {
				// 						console.log('打开文档成功');
				// 					},
				// 					fail(e) {
				// 						console.log('打开文档error',e);
				// 					},
				// 					complete: function() {
				// 						uni.hideLoading();
				// 					}
				// 				});
				// 			}
				// 		});
				// 	}
				// })
			},
			openImage(imgPath) {
				let array = new Array(1).fill(imgPath);
				uni.previewImage({
					urls: array,
					success(res) {
						uni.hideLoading();
						console.log('openImage success');
					},
					fail(res) {
						uni.hideLoading();
						console.log('openImage fail:', res);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		
		.content {
			padding: 25px 16px;
			
			.t1 {
				font-size: 20px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			
			.dv {
				margin-top: 8px;
				display: flex;
				justify-content: space-between;
				
				.tag {
					display: inline-block;
					padding: 5px;
					background: rgba(12,177,122,0.06);
					border-radius: 2px;
					font-size: 11px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: var(--primary-color);
				}
				
				.time {
					font-size: 14px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: rgba(0,0,0,0.45);
				}
			}
			
		}
		
		.tip {
			padding: 30px 16px 0;
			border-bottom: 0.5px solid #E5E5E6;
			
			.ggxq {
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			
			.green-line {
				margin-top: 12px;
				margin-left: 12px;
				width: 40px;
				height: 4px;
				background: linear-gradient(270deg, #26B961 0%, #26B961 100%);
			}
		}
		
		.desc {
			margin: 20px 16px 0;
			// font-size: 14px;
			// font-family: PingFangSC-Regular, PingFang SC;
			// font-weight: 400;
			// color: rgba(0,0,0,0.65);
		}
		
		.fj {
			margin: 30px 16px 0;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
		
		.greenbg {
			margin: 40rpx 32rpx 0;
			display: flex;
			align-items: center;
			// width: 100%;
			height: 68px;
			background: rgba(12,177,122,0.03);
			border-radius: 8px;
			padding: 0 40rpx;
			
			.name {
				margin-left: 8px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
</style>