<template>
	<view class="container">
		<view class="message" v-if="detailsData">
			<view class="messageDetail">
				<view class="messageTitle">{{detailsData.title}}</view>
				<view class="messageTime">{{detailsData.releaseDate}} 发布</view>
			</view>
			<view class="messageContent" v-if="detailsData.type!='tx'">
			  <jyf-parser :html="detailsData.content" ref="article"></jyf-parser>
			  <view class="msgFujian">
				  <view v-if="detailsData.imgPaths&&detailsData.imgPaths.length">
					  <view class="tits">图片：</view>
					  <view class="flex justify_between pimgs" style="flex-wrap: wrap;" @click="viewPhoto(detailsData.imgPaths)">
					  	<u-image v-for="item in detailsData.imgPaths" :src="item" width="150" height='150'></u-image>
					  </view>
				  </view>
				  <view v-if="detailsData.attachList&&detailsData.attachList.length">
					  <view class="tits">附件(不支持查看和下载附件，请登录pc电脑端查看)：</view>
					  <view class="flex justify_between pimgs" style="flex-wrap: wrap;">
						  <view style="margin: 0 0 5px;" v-for="(item,index) in detailsData.attachList" :key="index">
						    <text>{{ item.fileName }}</text>
						  </view>
					  </view>
				  </view>
			  </view>
			</view>
			<view class="messageContent" v-else>
				<text style="margin-right: 20rpx;">{{detailsData.plainContent}}</text>
				<u-button @click="toAction(detailsData)" shape="circle" plain size="mini" type="primary">
				  {{ detailsData.extInfo.bizType == 'SHELF_REPLENISH' ? '立即处理':'点击查看' }}
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser"
	import {noticeUserDetail} from "@/api/user.js"
	export default{
		components: {
		    jyfParser
		},
		data(){
			return{
				itemId: null,
				detailsData: null
			}
		},
		onLoad(options) {
			this.itemId = options.id
			this.getDetail()
		},
		methods:{
			viewPhoto(images){
				uni.previewImage({
					urls: images,
				});
			},
			//  获取详情
			getDetail () {
			  noticeUserDetail({ id: this.itemId }).then(res => {
				  console.log(res)
			    if (res.status == 200) {
			      this.detailsData = res.data
			      if (this.detailsData.extInfo) {
			        this.detailsData.extInfo = JSON.parse(this.detailsData.extInfo)
			      }
				  if(this.detailsData.imgPaths){
					  this.detailsData.imgPaths = this.detailsData.imgPaths.split(',')
				  }
			    } else {
			      this.detailsData = null
			    }
			  })
			},
			toAction (data) {
			  // 急送订单
			  if (data.extInfo.bizType == 'TEMP_ORDER') {
				uni.redirectTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify({ salesBillSn: data.extInfo.bizSn }) })
			  }
			  // 补货订单
			  if (data.extInfo.bizType == 'SHELF_REPLENISH') {
				uni.redirectTo({ url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM' })
			  }
			  // 货架订单
			  if (data.extInfo.bizType == 'SHELF_ORDER') {
				uni.redirectTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.extInfo.bizSn })
			  }
			  // 货架异常
			  if (data.extInfo.bizType == 'SHELF_WARN') {
				const shelfName = data.plainContent.split('已经超过')[0]
				uni.redirectTo({ url: '/pages/shelfOrder/shelfOrder?bizType=SHELF_WARN&shelfSn='+data.extInfo.bizSn+'&shelfName='+shelfName })
			  }
			},
		}
	}
</script>

<style lang="less">
	.container{
		width:100%;
		.message{
			margin: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;
			background-color: #fff;
			border-radius: 30rpx;
			box-shadow: 2upx 2upx 6upx #eee;
			.messageDetail{
				margin: 0 0 30rpx 0;
				font-size: 32rpx;
				.messageTitle{
					flex-grow: 1;
					text-align: center;
					margin: 0 0 20rpx 0;
				}
				.messageTime{
					color:#989898;
					font-size: 24rpx;
					text-align: right;
				}
			}
			.messageContent{
				line-height: 46upx;
				word-break: break-all;
			}
		}
		.msgFujian{
			padding: 20upx 0;
			.tits{
				color:#999;
			}
			.pimgs{
				> view{
					margin-bottom: 20upx;
				}
			}
		}
	}
	
</style>
