<template>
	<view>
		<!-- 顶部类型 -->
		<scroll-view scroll-x='true' class="srollview width100" :style="{top:headerTop}" scroll-with-animation>
			<view class="conent" :class="[newstypeid == item.codeValue ? 'activeconent' : 'frontconent']"
				v-for="(item,index) in newsTyplist" :key="index" @click="queryMsgByList(item.codeValue)">
				{{item.codeName}}</view>
		</scroll-view>
		<view class="mart10 height70"></view>
		<!-- 内容 -->
		
		<view v-if="newsList == ''"
			class="mart60 fotct font14 fcor666">
			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
		</view>
		<view class="newscont width90 border-8r backcorfff mart20" v-for="(item,index) in newsList" :key="index">
			<view class="alijusstart mart10 margle10" v-if="item.type == 1">
				<image src="../../../static/img/user/notive.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">服务通知</text>
			</view>
			<view class="alijusstart mart10 margle10" v-if="item.type == 2">
				<image src="../../../static/img/user/order.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">交易信息</text>
			</view>
			<view class="alijusstart mart10 margle10" v-if="item.type == 3">
				<image src="../../../static/img/user/kefu.png" mode="widthFix" class="icon30"></image>
				<text class="font18 margle" style="color: #0B1D83;">客服消息</text>
			</view>
			<view class="width90 line1 mart10"></view>
			<!-- 服务通知 -->
			<view class="width90 mart20" v-if="item.type == 1">
				<view class="font18 fcor333">{{item.title}}</view>
				<image mode="widthFix" class="width100 mart10" :src="imageUrl+item.image"></image>
			</view>

			<!-- 交易信息 -->
			<view class="width90 mart20" v-if="item.type == 2">
				<view class="font18 fcor333" >{{item.title}}</view>
				<view class="mart10 border-r backcor9">
					<view class="font20 colore95 fontwig6 paddtop10 fotct">¥{{item.content | msgFormat('price')}}</view>
					<view class="width94 mart10 alijusstart font14">
						<view class="fontwig6 fcor333 width30">交易对象</view>
						<view class="width70 fcor666 fotrt">{{item.content | msgFormat('objectName') }}</view>
					</view>

					<view class="width94 mart15 alijusstart font14">
						<view class="fontwig6 fcor333 width30">交易时间</view>
						<view class="width70 fcor666 fotrt">{{item.content | msgFormat('time') }}</view>
					</view>
					<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
							src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
					</view>
				</view>
			</view>

			<!-- 客服消息 -->
			<view class="width90 mart20" v-if="item.type == 3">
				<view class="font18 fcor333">{{item.title}}</view>
				<view class="mart10 border-r backcor9">
					<view class="width92 fcor333 fontwig6 paddtop15">
						{{item.content}}
					</view>

					<view class="font16 fcor666 alijus mart10 fotct paddbotm20">查看详情<image
							src="../../../static/img/jt.png" mode="widthFix" class="icon15 margle"></image>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		queryMsgByList,
		getDictionaryByCodeType
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				newsTyplist: [], //消息类型
				newsList: [], // 信内容
				newstypeid: 1, //类型id
				headerTop: '0px'
			}
		},
		filters: {
			//过滤器 用于格式化时间
			msgFormat: function(value,value1) {
				let a  = JSON.parse(value);
				return a[value1];
			}
		},
		onLoad() {
			// #ifdef H5
			this.headerTop = '44px';
			// #endif
			this.getDictionaryByCodeType();
		},
		methods: {
			//查询类型
			getDictionaryByCodeType() {
				let datas = {
					codeType: 'MSG_TYPE'
				}
				getDictionaryByCodeType(datas).then(res => {
					if (res.return_code == '000000') {
						this.newsTyplist = res.return_data;
						this.newstypeid = res.return_data[0].codeValue;
						this.queryMsgByList(res.return_data[0].codeValue);
					}
				})
			},
			//查询列表
			queryMsgByList(item) {
				this.newstypeid = item;
				let datas = {
					companyId: app.globalData.companyId,
					type: item
				}
				queryMsgByList(datas).then(res => {
					if (res.return_code == '000000' && res.return_data) {
						this.newsList = res.return_data;
					}else{
						this.newsList = [];
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.srollview {
		position: fixed;
		height: 70px;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;

		.conent {
			height: 24px;
			line-height: 24px;
			margin-top: 15px;
			padding-left: 10px;
			font-size: 11px;
			padding-right: 10px;
			margin-left: 15px;
			display: inline-flex;
			flex-direction: column;
			text-align: center;
			position: relative;
		}
	}

	.frontconent {
		background-color: #eeeeee;
		color: #333333;
	}

	.activeconent {
		background-color: #e8eff4;
		color: #009DFF;
	}

	.newscont {
		padding-top: 10px;
		padding-bottom: 10px;
	}
</style>
