<template>
	<view>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container">
			<far-bottom></far-bottom>
			<view class="pages-header p-r" :style="{'background-image':' url('+imageRoot+'merchantBg1.png)'}"></view>
			<view class="merchantuserCenter p-r p-left-right-30">
				<view class="userCenter-header bor-radius-10upx b-f">
					<view class="msg-tab bor-radius-10upx b-f">
						<view class="msg-list dis-flex">
							<view class="msg-item flex-box t-c" v-for="(item,index) in msg_list" :key="index" @click="navgateTo($event,item.item_navType)">
								<image class="msg-item-icon" :src="imgfixUrls + item.item_icon" mode=""></image>
								<view class="f-24 col-3">{{item.item_name}}</view>
								<view class="min-badge dis-flex flex-x-center flex-y-center" v-if="item.item_type=='myuser'&&newInfo.newnoticenum!=='0'">
									<view class="span">{{newInfo.newnoticenum}}</view>
								</view>
								<view class="min-badge dis-flex flex-x-center flex-y-center" v-if="item.item_type=='msguser'&&newInfo.newusernum!=='0'">
									<view class="span">{{newInfo.newusernum}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view :scroll-y="true" :lower-threshold="0" @scrolltolower="load">
					<nonemores v-if="totalpage==0"> </nonemores>
					<!-- 		<view class="tool-tab m-top30" v-if="totalpage!=0">
					<view class="tool-list dis-flex flex-dir-column">
						<view class="tool-item flex-box t-c dis-flex flex-y-center" v-for="(item,index) in newList" :key="index" @click="goChat(item)">
							<image class="tool-item-icon" :src="item.avatar" mode=""></image>
							<view class="dis-flex flex-x-between flex-y-center tool-item-right">
								<view class="dis-flex flex-dir-column tool-username">
									<view class="f-28 color-33 font-blod">{{item.nickname}}</view>
									<view class="color-99 f-24">{{item.content}}</view>
								</view>
								<view class="dis-flex flex-dir-column flex-y-end">
									<view class="color-99 f-22">{{item.date_time}}</view>
									<view class="badge" v-if="item.total!=0">{{item.total}}</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
					<view class="toolBox">
						<block v-for="(item,index) in newList" :key="index">
							<view class="toolContent" @click="goChat(item)">
								<image class="toolImage" :src="item.avatar" mode=""></image>
								<view class="toolName">
									<view class="f-28 color-33 font-blod">
										{{item.nickname}}
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 0">
										<rich-text :nodes="item.content"></rich-text>
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 1">
										[图片]
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 2">
										[视频]
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 3">
										[名片]
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 4">
										[简历]
									</view>
									<view class="tool-content color-99 f-24" v-if="item.type == 5">
										[其他消息]
									</view>
								</view>
								<view class="toolDate">
									<view class="color-99 f-22">
										{{item.date_time}}
									</view>
									<view class="toolNum" v-if="item.total!=0">
										{{item.total}}
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="tips" v-if="totalpage!=0">
						<loadmore :isMore="isMore"></loadmore>
					</view>
				</scroll-view>
			</view>
		</view>
		<navBar :tabBarAct="2" />
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	import navBar from '@/components/template/navBar.vue';
	import nonemores from '@/components/template/nonemores.vue'
	import loadmore from '@/components/template/loadmore.vue'
	export default {
		data() {
			return {
				isMore: true,
				newInfo: {},
				page: 1,
				storeid: null,
				monidata: 'ikik',
				detalsData: null,
				loadlogo: false,
				shopShow: false,
				newList: [],
				totalpage: null,
				msg_list: [{
						item_type: 'msguser',
						item_name: '我的客户',
						item_icon: 'centerMerchant/msguser.png',
						item_navType: 'msguser'
					},
					{
						item_type: 'myuser',
						item_name: '系统通知',
						item_icon: 'centerMerchant/msgnotice.png',
						item_navType: 'myuser'
					},
					{
						item_type: 'tips',
						item_name: '系统公告',
						item_icon: 'centerMerchant/msgmsg.png',
						item_navType: 'tips'
					}
				],
				tab_list: [{
						item_type: 'manager',
						item_name: '店员管理',
						item_icon: '4e81ea09056979072a00019a.jpg',
						item_navType: 'manager'
					},
					{
						item_type: 'myuser',
						item_name: '我的客户',
						item_icon: '4e81ea09056979072a00019a.jpg',
						item_navType: 'myuser'
					},
					{
						item_type: 'shopmain',
						item_name: '店铺主页',
						item_icon: '4e81ea09056979072a00019a.jpg',
						item_navType: 'shopmain'
					},
					{
						item_type: 'changeshop',
						item_name: '切换店铺',
						item_icon: '4e81ea09056979072a00019a.jpg',
						item_navType: 'changeshop'
					}
				]
			}
		},
		components: {
			Loadlogo,
			navBar,
			nonemores,
			loadmore
		},
		computed: {},
		onShow() {
			let _this = this
			_this.init();
			console.info('show')
		},
		mounted() {},
		onLoad(e) {
			let _this = this

			console.info('load')
		},
		methods: {
			init() {
				let _this = this
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeid = res.data;
						_this.getStoreNewList(res.data);
					}
				});

			},
			goChat(item) {
				let _this = this
				// App.navigationTo({
				// 	url: 'pages/subPages/homepage/chat/chat?other_party_id=' + item.other_party_id + '&other_party_type=' + item.other_party_type +
				// 		'&type=2' + '&id=' + _this.storeid
				// })
				let getSetInfo = uni.getStorageSync('getSetInfo');
				if(getSetInfo.type == 1){
					App.navigationTo({
						url: 'pagesA/instantMessenger/instantMessenger?other_party_id=' + item.other_party_id + '&other_party_type=' + item.other_party_type+ '&type=2' + '&id=' + _this.storeid
					})
				}else{
					App.navigationTo({
						url: 'pages/subPages/homepage/chat/chat?other_party_id=' + item.other_party_id + '&other_party_type=' + item.other_party_type+ '&type=2' + '&id=' +_this.storeid
					})
				}
			},
			load() {
				let _this = this
				if (_this.totalpage == _this.page) {
					_this.isMore = true
				} else {
					_this.page++
					_this.getStoreNewList()
				}
			},
			// 店铺消息列表
			getStoreNewList(storeid) {
				let _this = this
				let data = {
					storeid: storeid || _this.storeid,
					page: _this.page
				}
				_this.isMore = false
				App._post_form('&p=store&do=storeNewList', data, res => {
					_this.newList = res.data.list
					_this.newInfo = res.data
					_this.totalpage = res.data.total
					_this.isMore = true
				})
			},
			// 跳转商家
			goStore() {
				App.navigationTo({
					url: 'pages/subPages/dealer/myStore/myStore'
				})
			},
			navgateTo(e, navType) {
				let _this = this;
				switch (navType) {
					case 'myuser':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantNotice/merchantNotice'
						});
						break;
					case 'msguser':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantChat/merchantChat'
						});
						break;
					case 'setshop':
						App.navigationTo({
							url: 'pages/subPages/dealer/setshop/setshop'
						});
						break;
					case 'order':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantUserCenter/merchantUserCenter'
						});
						break;
					case 'rank':
						App.navigationTo({
							url: 'pages/subPages/dealer/rank/rank'
						});
						break;
					case 'level':
						App.navigationTo({
							url: 'pages/subPages/dealer/level/level'
						});
						break;
					case 'client':
						App.navigationTo({
							url: 'pages/subPages/dealer/client/client'
						});
						break;
					case 'help':
						App.navigationTo({
							url: 'pages/subPages/dealer/richtext/setrich'
						});
						break;
					case 'gener':
						App.navigationTo({
							url: 'pages/subPages/dealer/gener/gener'
						});
						break;
					case 'poster':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
					case 'tips':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantTips/merchantTips'
						});
						break;
					case 'shops':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.toolBox {
		opacity: 0.97;
		border-radius: 20upx;
		background: #FFFFFF;
        margin-top: 20upx;
		.toolContent {
			padding: 20upx;
			border-bottom: 2upx solid #EEEEEE;
			display: flex;
			justify-content: space-around;

			.toolImage {
				width: 117upx;
				height: 80upx;
				border-radius: 50%;
			}

			.toolName {
				margin-left: 20upx;
				width: 550upx;

				.tool-content {
					margin-top: 10upx;
				}
			}

			.toolDate {
				margin-left: 25rpx;
				.toolNum {
					width: 56upx;
					height: 32upx;
					line-height: 32upx;
					background: rgba(255, 68, 68, 1);
					opacity: 0.93;
					border-radius: 18upx;
					text-align: center;
					font-size: 22upx;
					color: rgba(255, 255, 255, 1);
					margin: 30upx;
				}
			}
		}
	}

	.tips {
		height: 80upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;


			color: black;
		}
	}

	page {
		font-size: 0;
		background-color: #F6F6F6;
	}

	.container {
		.color-33 {
			color: #333333;
		}

		.color-99 {
			color: #999999;
		}

		.color-f4 {
			color: #FF4444;
		}

		.font-blod {
			font-weight: bold;
		}

		// 头部内容
		.pages-header {
			width: 100%;
			height: 184upx;
			background-repeat: no-repeat;
			background-size: 100% 184upx;

			//个人-邀请人信息
			.person-content {
				padding: 94upx 40upx 0;

				.user-avatar {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					background-repeat: no-repeat;
					background-size: 100upx 100upx;
				}

				.user-referrer-name {
					.level-label {
						background-color: #E7D4AA;
						border-radius: 18upx;
						padding: 0 16upx;
					}

					.referrer-name {
						color: #6B6E88;
					}
				}
			}
		}

		// 详情内容
		.merchantuserCenter {
			margin-top: -154upx;
			//319-262=57
			padding-bottom: 120upx;

			// 导航
			.userCenter-header {
				padding: 30upx 0;
			}

			// 工具导航
			.msg-tab {
				.msg-item {
					position: relative;

					.msg-item-icon {
						margin: 0 auto 20upx;
						display: block;
						width: 80upx;
						height: 80upx;
					}

					.min-badge {
						top: 0;
						left: 126upx;
						position: absolute;
						width: 50upx;
						height: 28upx;
						background: rgba(255, 68, 68, 1);
						border: 1upx solid rgba(255, 255, 255, 1);
						border-radius: 13px;
						font-size: 18upx;
						color: rgba(255, 255, 255, 1);

						.span {
							transform: scale(0.8)
						}
					}
				}
			}

			// 工具导航
			.tool-tab {
				padding: 0 30upx;
				opacity: 0.97;
				border-radius: 10px;
				background: #FFFFFF;

				.tool-item-right {
					width: 100%;
				}

				.tool-username {
					align-items: start;

					.font-blod {
						margin-bottom: 16upx;
					}
				}

				.tool-tab-title {
					padding: 0 30upx;
				}

				.tool-item {
					width: 100%;
					flex-wrap: nowrap;
					border-bottom: 1px solid #EEEEEE;
					padding: 40upx 0;

					.badge {
						width: 56upx;
						height: 32upx;
						line-height: 32upx;
						background: rgba(255, 68, 68, 1);
						opacity: 0.93;
						border-radius: 18upx;
						text-align: center;
						font-size: 22upx;
						color: rgba(255, 255, 255, 1);
						margin-top: 18upx;
					}

					.tool-item-icon {
						margin-right: 30upx;
						width: 80upx;
						height: 80upx;
						flex-shrink: 0;
						border-radius: 50%;
					}
				}

				.tool-item:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
