<template>
	<div class="whole">
		<div class="guanzhu" v-if="!is_subscribe && showTips">
			<div :style="{color: Color}">订阅关注公众号，查看及时消息</div>
			<div class="anniu">
				<text @click="followSubscribe()">订阅</text>&nbsp;
				<up-icon name="close" size="14" @click="showTips = false" />
			</div>
		</div>
		
		<view class="row" v-for="(item, index) in messageList" :key="index" @click="viewMsg(item.type)">
			<view class="icon">
				<view class="img">
					<text v-if="item.type == 1" class="iconfont icon-notice"></text>
					<text v-else-if="item.type == 2" class="iconfont icon-set"></text>
					<text v-else-if="item.type == 3" class="iconfont icon-gongdan"></text>
					<text v-else-if="item.type == 4" class="iconfont icon-warn"></text>
					<text v-else-if="item.type == 5" class="iconfont icon-gongzuotai"></text>
					<text v-else-if="item.type == 6" class="iconfont icon-gonggaolan"></text>
					<text v-else class="iconfont icon-notice"></text>
				</view>
				<view class="num" v-if="item.un_read_count">{{item.un_read_count > 99 ? '99+' : item.un_read_count}}</view>
			</view>
			<view class="box">
				<view class="title">
					<view class="tit">{{titObj[item.type]}}</view>
					<view class="time">{{item.last_message && item.last_message.created_at && item.last_message.created_at.slice(0, 16)}}</view>
				</view>
				<view class="txt">{{item.last_message && item.last_message.content && item.last_message.content.title}}</view>
			</view>
		</view>
		
		<view class="row" @click="toJump('/pages/mine/other/grass')">
			<view class="icon flex"><text class="iconfont icon-zhongcao3"></text></view>
			<view class="box">
				<view class="title">
					<view class="tit">种草</view>
				</view>
				<view class="txt">好物分享</view>
			</view>
		</view>
		
		<view class="row" @click="toComplaint" v-if="role == 0">
			<view class="icon flex"><up-icon name="info-circle" color="#333" :size="26" /></view>
			<view class="box">
				<view class="title">
					<view class="tit">投诉与反馈</view>
				</view>
			</view>
		</view>
		
		<view class="noMsg" v-if="!messageList.length && role !== 0">
			<up-empty mode="message" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/message.png" text="暂无消息"></up-empty>
		</view>
		
		<view v-if="messageList.length || role == 0" style="margin-top: 30rpx;">
			<cf-cloud></cf-cloud>
		</view>
		
	</div>
	
	<tabbar :chooseIndex="2" :num="cartNum" :msgNum="msgNum" />
	
</template>

<script>
	import { get } from '@/api/request.js'
	import { ref, reactive, toRefs } from 'vue'
	import { userBind } from '@/components/common.js'
	import tabbar from '@/components/tabbar/index.vue'
	import { sp2 } from '@/components/img.js'
	import { Style } from '@/utils/list.js'
	import cfCloud from '@/components/cfCloud/index.vue'
	
	export default {
		components: {
			tabbar,
			cfCloud
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				cartNum: 0,
				messageList: [],
				msgNum: 0,
				titObj: {
					'1': '系统通知',
					'2': '订单通知',
					'3': '工单通知',
					'4': '投诉通知',
					'5': '平台通知',
					'6': '公告栏'
				},
				is_subscribe: 0,
				showTips: true,
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				tagColor: Style[uni.getStorageSync('theme_index') * 1].tagColor,
				qr_img: '',
				role: uni.getStorageSync('role')
			})
			
			// 消息类型 1-系统通知 2-订单通知 3-工单通知 4-投诉通知
			function getMsgNum() {
				get('/api/v1/messages/count').then((res) => {
					data.messageList = res.data.types || []
					data.msgNum = res.data.total
					uni.setStorageSync('msgNum', data.msgNum)
				})
			}
			
			function viewMsg(type) {
				let tit = data.titObj[type]
				uni.navigateTo({
					url: '/pages/mine/msg/list?tit=' + tit + '&type=' + type
				})
			}
			
			const followSubscribe = () => {
				uni.navigateTo({
					url: '/pages/article/index'
				})
			}
			
			function getUserInfo() {
				get('/api/v1/shopScore/user').then((res) => {
					data.is_subscribe = res.data.user && res.data.user.is_subscribe
					uni.setStorageSync('subscribe', data.is_subscribe)
				})
			}
			
			async function getQrCodeImg() {
				await get('/api/v1/user/qrCode').then((res) => {
					data.qr_img = res.data.qr_code
				})
			}
			
			function toComplaint() {
				uni.navigateTo({
					url: '/pages/mine/msg/select'
				})
			}
			
			function toJump(url) {
				uni.navigateTo({
					url: url
				})
			}
			
			return {
				...toRefs(data),
				getMsgNum,
				viewMsg,
				followSubscribe,
				getUserInfo,
				getQrCodeImg,
				toComplaint,
				toJump
			}
		},
		async onLoad() {
			// await this.$onLaunched
		},
		onShow() {
			this.cartNum = Number(uni.getStorageSync('cartNum')) || 0
			this.getMsgNum()
			this.getUserInfo()
			if(this.role === 0) {
				this.getQrCodeImg()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		overflow: auto;
		min-height: 100vh;
		padding-bottom: 110rpx;
		.row{
			display: flex;
			padding: 30rpx;
			border-bottom: 1px solid #F2F2F2;
			background-color: #fff;
			justify-content: space-between;
			.icon{
				width: 48.5px;
				height: 48.5px;
				position: relative;
				&.flex{
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F2F2F2;
					border-radius: 8rpx;
				}
				.img{
					width: 100%;
					height: 100%;
					background-color: #F1F1F1;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					.iconfont{
						font-size: 24px;
						color: #373536;
					}
				}
				.num{
					border-radius: 20rpx 20rpx 20rpx 0;
					border: 1px solid #fff;
					background-color: v-bind('tagColor');
					font-size: 22rpx;
					color: #fff;
					padding: 6rpx 10rpx;
					position: absolute;
					top: -26rpx;
					left: 100%;
					margin-left: -18rpx;
					line-height: 1;
				}
				.iconfont{
					font-size: 24px;
					color: #373536;
				}
			}
			.box{
				width: calc(100% - 130rpx);
				.title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					.tit{
						font-size: 32rpx;
						color: #333;
						width: calc(100% - 260rpx);
					}
					.time{
						font-size: 24rpx;
						color: #9D9D9D;
					}
				}
				.txt{
					font-size: 28rpx;
					color: #9D9D9D;
				}
			}
		}
		
		.noMsg{
			width: 100%;
			height: calc(100vh - 64rpx);
			padding-top: 20%;
			box-sizing: border-box;
		}
		.guanzhu {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: v-bind('bgColor');
			padding: 15rpx 30rpx;
			.anniu {
				display: flex;
				text{
					background: v-bind('Color');
					border-radius: 8rpx;
					color: #fff;
					font-size: 24rpx;
					padding: 5rpx 25rpx;
				}
			}
		}
	}
</style>
