<!-- 商城消息中心页 -->
<template>
	<view class="notice">
		<!-- 消息中心导航栏 -->
		<view class="cu-custom" :style="{ height: sys.height + 'px' }">
			<view class="cu-bar fixed bg-bgcolor" :style="{
				height: sys.height + 'px',
				paddingTop: sys.top + 'px'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="handleBack"></text>
				</view>
				<view class="content" :style="{ top: sys.top + 'px' }">
					{{ $t('notice.headTitle') }}
				</view>
				<view class="action">
					<text class="wlIcon-qingkong" @tap="empty"></text>
					<text class="wlIcon-shezhi" @tap="handleNav('/pages/account/notice')"></text>
				</view>
			</view>
		</view>
		<!-- 消息中心工具栏 -->
		<view class="wanl-notice bg-bgcolor">
			<view class="tool">
				<view class="text-sm margin-right" v-if="statistics.notice.chat > 0">{{ statistics.notice.chat }}{{ $t('notice.unreadMessages') }}</view>
				<view class="text-sm margin-right" v-else>{{ $t('notice.noUnread') }}</view>
			</view>
			<!-- 消息中心模式选择 -->
			<view class="mode padding-bj">
				<view class="flex text-sm wanl-pip shadow-warp">
					<!-- 查看评论 -->
					<view class="logistics" @tap="handleNav('/pages/user/comment/comment')">
						<text class="wlIcon-liuyan-fill"></text>
						{{ $t('notice.viewComment') }}
						<view class="cu-tag badge" v-if="statistics.notice.order != 0">{{ statistics.notice.order }}</view>
					</view>
					<!-- 查看通知 -->
					<view class="notice" @tap="handleNav('/pages/notice/notice')">
						<text class="wlIcon-tongzhi"></text>
						{{ $t('notice.viewNotice') }}
						<view class="cu-tag badge" v-if="statistics.notice.notice != 0">{{ statistics.notice.notice }}</view>
					</view>
					<!-- 查看系统消息 -->
					<view class="Interaction" @tap="handleNav('/pages/notice/sys-notice/index')">
						<text class="wlIcon-liuyan-fill"></text>
						{{ $t('notice.viewSys') }}
					</view>
				</view>
			</view>
		</view>
		<!-- 消息中心消息列表 -->
		<view class="wanl-msg" v-if="chat.list.length != 0">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item, index) in chat.list" :key="index" @tap="handleChat(item)"
					:class="modalName == 'move-box-' + index ? 'move-cur' : ''" @touchstart.stop="ListTouchStart"
					@touchmove.stop.prevent="ListTouchMove" @touchend.stop="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" :style="{ backgroundImage: 'url(' + $appKit.oss(item.avatar, 100, 100) + ')' }"></view>
					<view class="content">
						<view class="wanl-black">{{ item.name }}</view>
						<view class="wanl-gray text-sm flex">
							<view class="text-cut wanl-gray-light">
								{{ item.content }}
							</view>
						</view>
					</view>
					<view class="action">
						<view class="text-gray text-sm">{{ $appKit.timeToChat(item.createtime) }}</view>
						<view class="cu-tag bg-red" v-if="item.count > 0">{{ item.count }}</view>
					</view>
					<view class="move">
						<view class="bg-red" @tap.stop="del(index)">{{ $t('notice.delete') }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 消息中心空消息提示 -->
		<wanl-empty v-else src="notice_default3x" :text="$t('notice.noMessages')" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			modalName: null,
			listTouchStart: 0,
			listTouchStartY: 0,
			listTouchDirection: null,
			pagesNum: 0,
			sys: { height: 0, top: 0 }
		}
	},
	onLoad() {
		this.pagesNum = getCurrentPages().length
		const sysInfo = uni.getSystemInfoSync()
		const statusBarHeight = sysInfo.statusBarHeight || 0
		this.sys = {
			top: statusBarHeight,
			height: statusBarHeight + uni.upx2px(90)
		}
		uni.setNavigationBarTitle({ title: this.$t('notice.headTitle') })
		this.$store.dispatch('chat/get').catch(() => {})
	},
	onShow() {
		this.$store.dispatch('chat/get').catch(() => {})
	},
	computed: {
		...mapState(['chat', 'statistics'])
	},
	methods: {
		...mapActions({
			del: 'chat/del',
			empty: 'chat/empty'
		}),
		handleBack() {
			uni.navigateBack({ delta: 1 })
		},
		handleNav(url) {
			uni.navigateTo({ url })
		},
		handleChat(item) {
			// item.id 为店铺 id；私信页按 shop_id 打开
			if (this.$appKit && typeof this.$appKit.toChat === 'function') {
				this.$appKit.toChat(item.id)
			} else {
				uni.navigateTo({ url: `/pages/notice/chat?shop_id=${item.id}` })
			}
		},
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX
			this.listTouchStartY = e.touches[0].pageY
		},
		ListTouchMove(e) {
			const dx = e.touches[0].pageX - this.listTouchStart
			const dy = e.touches[0].pageY - this.listTouchStartY
			if (Math.abs(dx) <= Math.abs(dy)) return
			this.listTouchDirection = dx > 0 ? 'right' : 'left'
		},
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target
			} else {
				this.modalName = null
			}
			this.listTouchDirection = null
		}
	}
}
</script>

<style>
.cu-bar .search-form {
	background-color: #f2f2f2;
}

.notice .wanl-notice {
	position: relative;
	z-index: 2;
}

.notice .wanl-msg {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	padding-top: 96rpx;
}
</style>
