<!-- 客服 -->
<template>
	<view class="chat-wrap">
		<!-- 标题栏 -->
		<shopro-navbar
			:background="{
				backgroundImage: 'linear-gradient(45deg, #9000ff, #5e00ff)',
				color: '#FFF'
			}"
			backIconColor="#fff"
		>
			<view class="u-flex u-col-bottom head-box" slot="content">
				<view class="head-title u-m-r-20">{{ navTitle.split(',')[0] }}</view>
				<view v-show="navTitle.split(',')[1] === '在线'" class="u-flex u-col-center">
					<view class="iconfont icon-yuandianxiao text-green head-icon"></view>
					<view class="head-state">在线</view>
				</view>
				<view v-show="navTitle.split(',')[1] === '离线'" class="u-flex u-col-center">
					<view class="iconfont icon-yuandianxiao text-gray head-icon"></view>
					<view class="head-state">离线</view>
				</view>
			</view>
		</shopro-navbar>
		<!-- 提示 -->
		<u-notice-bar
			:autoplay="true"
			close-icon
			@close="closeNotice"
			:show="showNotice"
			:type="noticeType"
			:list="noticeList"
			:volumeIcon="true"
			:isCircular="true"
		></u-notice-bar>

		<scroll-view class="scroll-box" scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<u-loadmore v-if="logmsgList.length" :status="logStatus" :loadText="loadText" icon-type="circle" @loadmore="logLoadmore" />

			<view class="cu-chat">
				<block v-for="(chat, index) in chatList" :key="index">
					<!-- 系统消息-->
					<view class="cu-info" v-if="chat.type === 'system'">{{ chat.msg }}</view>
					<view class="cu-info" v-if="showTime(chat.date, index) && chat.type !== 'system' && chat.type !== 'template'">{{ $u.timeFrom(chat.date) }}</view>

					<view class="" v-if="chat.type !== 'system' && chat.type !== 'template'">
						<!-- 自己  -->
						<view class="cu-item" :class="{ self: chat.identify === 'user' }">
							<view
								v-if="chat.identify !== 'user'"
								class="cu-avatar round"
								:style="'background-image:url(' + (chat.server_avatar ? chat.server_avatar : $IMG_URL + '/imgs/chat/default-chat-avatar.png') + ')'"
							></view>
							<view class="main">
								<!-- 消息 -->
								<view class="content " style="max-width: 480rpx;" :class="chat.identify !== 'user' ? 'bg-white' : ' bg-gradual-purple'" v-if="chat.type === 'text'">
									<u-parse :html="chat.msg"></u-parse>
								</view>
								<!-- 订单 -->
								<view class="content " v-if="chat.type === 'order'" @tap="jump('/pages/order/detail', { id: chat.msg.id })">
									<view class="order-chat">
										<view class="order-code u-m-b-20">订单号：{{ chat.msg.order_sn }}</view>
										<view class="goods-card u-flex u-col-center">
											<view class="img-wrap"><image class="goods-img" :src="chat.msg.image" mode=""></image></view>
											<view class="u-flex-col u-row-between card-right">
												<view class="goods-title u-ellipsis-2">{{ chat.msg.title }}</view>

												<view class="u-flex u-col-center price-box">
													<view class="goods-price">{{ chat.msg.price }}</view>
													<text class="goods-state u-m-l-10">{{ chat.msg.status_name }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 商品 -->
								<view class="content " v-if="chat.type === 'goods'" @tap="jump('/pages/goods/detail', { id: chat.msg.id })">
									<view class="goods-card u-flex u-col-center">
										<view class="img-wrap"><image class="goods-img" :src="chat.msg.image" mode=""></image></view>
										<view class="u-flex-col u-row-between card-right">
											<view class="goods-title u-ellipsis-2">{{ chat.msg.title }}</view>
											<view class="u-flex u-row-between price-box">
												<view class="goods-price">{{ chat.msg.price }}</view>
												<text></text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="chat.identify === 'user'" class="cu-avatar round" :style="'background-image:url(' + userInfo.avatar + ')'"></view>
						</view>
					</view>
					<!-- 模板消息 -->
					<view class="template-box u-m-y-20" v-if="chat.type === 'template'">
						<view class="template-title">猜你想问</view>
						<view class="template-item" v-for="item in templateList" :key="item.id" @tap="onQuestion(item)">* {{ item.title }}</view>
					</view>
				</block>
			</view>
			<view class="scroll-bottom" style="height: 330rpx;" id="scrollBottom"></view>
		</scroll-view>
		<!-- 底部功能栏，输入栏 -->
		<view class="cu-bar foot input u-flex-col">
			<!-- 输入栏 -->
			<view class="cu-bar u-flex-1" style="width: 100%;">
				<view class="input-wrap u-flex-1 u-flex u-col-center u-m-r-20 u-p-l-20">
					<input
						class="input"
						v-model="msgText"
						placeholder-style="font-size:26rpx;color:#999"
						placeholder="请输入您想咨询的问题~"
						type="text"
						confirm-type="发送"
						:focus="false"
						maxlength="300"
						cursor-spacing="10"
						@focus="InputFocus"
						@blur="InputBlur"
						@input="onInput"
						@confirm="onSend"
					/>
					<view class="action u-p-10" @tap="selEmoji"><text class="iconfont icon-biaoqing text-grey"></text></view>
				</view>
				<button v-if="isFocus" class="u-reset-button send-btn shadow" @tap.stop="onSend">发送</button>
				<button v-else class="u-reset-button more-btn" @tap.stop="onTools">
					<view class="action" style="margin-right: 0;"><text class="iconfont icon-tianjia text-grey" :class="{ 'tools-active': showTools }"></text></view>
				</button>
			</view>
			<!-- 工具栏 -->
			<view class="tools-box u-flex" style="width: 100%;" v-if="showTools">
				<u-upload
					:showProgress="false"
					:showUploadList="false"
					@on-uploaded="uploadSuccess"
					@on-change="uploadChange"
					:action="`${EMOJI_BASE_URL}/api/common/upload`"
					:header="{token: token}"
					maxCount="9"
					:customBtn="true"
					:show-tips="false"
					class="u-flex-1 tools-item"
				>
					<view class="tools-item u-flex-1" slot="addBtn">
						<image class="item-img" :src="$IMG_URL + '/imgs/chat/imgs_icon.png'" mode=""></image>
						<text class="item-title">图片</text>
					</view>
				</u-upload>

				<view class="tools-item u-flex-1" @tap="onToolItem('goods')">
					<image class="item-img" :src="$IMG_URL + '/imgs/chat/goods_icon.png'" mode=""></image>
					<text class="item-title">商品</text>
				</view>
				<view class="tools-item u-flex-1" @tap="onToolItem('order')">
					<image class="item-img" :src="$IMG_URL + '/imgs/chat/order_icon.png'" mode=""></image>
					<text class="item-title">订单</text>
				</view>
			</view>
			<!-- 表情栏 -->
			<view class="emoji-box" v-if="showEmoji">
				<swiper
					class="emoji-swiper"
					:indicator-dots="true"
					circular
					indicator-active-color="#7063D2"
					indicator-color="rgba(235, 231, 255, 1)"
					:autoplay="false"
					:interval="3000"
					:duration="1000"
				>
					<swiper-item v-for="(memoji, index) in newEmojiList" :key="index">
						<view class="swiper-item u-flex u-col-center">
							<view class="emoji-img" v-for="(memo, mindex) in memoji" :key="memo.file" @tap="onEmoji(memo)">
								<image class="emoji-img" :src="`${EMOJI_BASE_URL}/assets/addons/shopro/img/emoji/${memo.file}`" mode=""></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 商品/订单 -->
		<view class="cu-bar log-box foot input u-flex-col" v-if="showLogBox">
			<view class="log-head u-flex u-row-between">
				<view class="title-box">{{ logTitle }}</view>
				<button class="u-reset-button close-btn" @tap="closeToolsItem"><text class="u-iconfont uicon-close-circle-fill" style="#e0e0e0;font-size: 36rpx;"></text></button>
			</view>
			<view class="log-content">
				<scroll-view class="card-scroll-box" scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false" @scrolltolower="loadMore">
					<!-- 订单 -->
					<view class="log-item" v-for="(item, index) in orderList" :key="index" @tap="onOrderCard(item)" v-if="cardType === 'order'">
						<view class="code-box u-flex u-row-between">
							<view class="code-text">订单号：{{ item.order_sn }}</view>
							<view class="date-text">{{ $u.timeFormat(item.createtime, 'mm-dd hh:MM') }}</view>
						</view>
						<view class="u-flex log-card">
							<view class="img-wrap"><image class="goods-img" :src="item.item[0].goods_image" mode=""></image></view>
							<view class="u-flex-col  card-right">
								<view class="goods-title u-ellipsis-2">{{ item.item[0].goods_title }}</view>
								<view class="num-box">数量：{{ item.item[0].goods_num }}</view>
								<view class="u-flex u-row-between price-box">
									<view class="goods-price">{{ item.item[0].goods_price }}</view>
									<text class="goods-state">{{ item.status_name }}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 商品 -->
					<view class="log-item" v-for="(item, index) in viewList" :key="index" @tap="onViewCard(item)" v-if="cardType === 'goods'">
						<view class="u-flex log-card">
							<view class="img-wrap"><image class="goods-img" :src="item.goods.image" mode=""></image></view>
							<view class="u-flex-col u-row-between card-right">
								<view class="goods-title u-ellipsis-2">{{ item.goods.title }}</view>
								<view class="num-box">{{ item.goods.subtitle }}</view>
								<view class="u-flex u-row-between price-box">
									<view class="goods-price">{{ item.goods.price }}</view>
									<text class="goods-state"></text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
				</scroll-view>
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="cu-modal" @tap="onMask" :class="{ show: showTools || showEmoji }" style="z-index: 1000;"></view>
	</view>
</template>

<script>
import Socket from './chat.js';
import { BASE_URL, API_URL } from '@/env.js';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			socket: null, //socket服务
			InputBottom: 0,
			isPageHide: false,
			HTTP_API_URL: API_URL,
			EMOJI_BASE_URL: BASE_URL,
			navTitle: '连接中...', //标题栏
			scrollInto: '', //scrollBottom
			lastId: '', //加载历史聊天记录用
			logmsgList: [], //历史消息
			templateList: [], //模板问题。
			emojiList: [], //表情包
			newEmojiList: [], //分层后的表情数据
			loadText: {
				loadmore: '点击加载更多',
				loading: '正在加载，请喝杯茶...',
				nomore: '我也是有底线的'
			},
			logStatus: 'loadmore',
			cardType: '', //卡片分类
			currentPage: 1,
			lastPage: 1,
			chatList: [
				// identify: 'customer_service', // 用户发送的为 user; 客服发送的为 customer_service
				// type: 'text', //message:用户消息类型; message_list:请求消息列表
				// msg: message.message,
				// date: this.$u.timeFormat(message.createtime, 'yyyy年mm月dd日 hh时MM分')
			],
			msgText: '', //输入框内容
			showNotice: true, //滚动提示
			noticeType: 'warning',
			showTools: false, //工具栏显示
			showLogBox: false, //商品订单栏
			showEmoji: false, //表情显示
			logTitle: '', //；栏目标题
			toolsList: [
				//工具栏列表
				{
					id: 'imgs',
					image: this.$IMG_URL + '/imgs/chat/imgs_icon.png',
					title: '图片'
				},
				{
					id: 'goods',
					image: this.$IMG_URL + '/imgs/chat/goods_icon.png',
					title: '商品'
				},
				{
					id: 'order',
					image: this.$IMG_URL + '/imgs/chat/order_icon.png',
					title: '订单'
				},
				{
					id: 'file',
					image: this.$IMG_URL + '/imgs/chat/file_icon.png',
					title: '文件'
				}
			],
			noticeList: [], //跑马灯提示。
			// 订单商品,分页。
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			orderList: [],
			viewList: [],
			orderCurrentPage: 1,
			viewCurrentPage: 1,
			orderTotalPage: 1,
			viewTotalPage: 1,
			token: uni.getStorageSync('token')
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		isFocus() {
			//检测输入框是否有信息
			let isMsg = false;
			this.msgText ? (isMsg = true) : (isMsg = false);
			return isMsg;
		},
		isClose() {
			if (this.socket) {
				return this.socket.isClose;
			}
		}
	},
	created() {
		this.init();
	},
	onShow() {
		// #ifdef MP-WEIXIN
		this.init();
		this.isPageHide = true;
		// #endif
	},
	onHide() {
		// #ifdef MP-WEIXIN
		if (this.isPageHide) {
			this.socket.close();
		}
		// #endif
		uni.hideKeyboard();
	},
	beforeDestroy() {
		this.socket.close();
	},
	methods: {
		init() {
			let that = this;
			that.$http('common.chat').then(res => {
				if (res.code == 1) {
					that.noticeList.push(res.data.config.basic.notice);
					that.templateList = res.data.question;
					that.emojiList = res.data.emoji;
					that.newEmojiList = this.sortData(res.data.emoji, 30);
					that.socket = new Socket(
						{
							ping: 20000,
							is_ssl: res.data.config.system.is_ssl,
							gateway_port: res.data.config.system.gateway_port,
							ssl_type: res.data.config.system.ssl_type
						},
						msg => {
							that.parseMsgStatus(msg.data); //监听消息
						}
					);
				}
			});
		},

		// 数据分层
		sortData(oArr, length) {
			let arr = [];
			let minArr = [];
			oArr.forEach(c => {
				if (minArr.length === length) {
					minArr = [];
				}
				if (minArr.length === 0) {
					arr.push(minArr);
				}
				minArr.push(c);
			});

			return arr;
		},

		// 时间显示
		showTime(timestamp, index) {
			timestamp = parseInt(timestamp);
			// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
			if (timestamp.toString().length == 10) timestamp *= 1000;
			let timer = new Date().getTime() - timestamp;
			timer = parseInt(timer / 1000);

			if (index % 6 == 0 && timer >= 300) {
				return true;
			}
		},

		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},

		// 解析链接状态
		parseMsgStatus(msgStr) {
			let obj = JSON.parse(msgStr);
			let chatName = '客服';
			if (obj.data?.customer_service) {
				chatName = obj.data.customer_service.name ? `客服-${obj.data.customer_service.name}` : '客服';
			}
			if (obj.code === 1) {
				switch (obj.type) {
					case 'init':
						uni.setStorageSync('chatSessionId', obj.data.session_id);
						this.chatLog().then(this.pushChat('', 'template'));
						this.goBottom();
						break;
					case 'waiting':
						this.navTitle = '暂无客服在线';
						this.pushChat(obj.data.message.message, 'system');
						break;
					case 'access':
						this.navTitle = `${chatName},在线`;
						this.pushChat(obj.data.message.message, 'system');
						break;
					case 'customer_service_online':
						this.navTitle = `${chatName},在线`;
						break;
					case 'customer_service_offline':
						this.navTitle = `${chatName},离线`;
						break;
					case 'message':
						this.chatList.push(this.parseMsg(obj.data.message, obj.data.message.identify));
						this.goBottom();
						uni.vibrateLong();
						break;
					case 'message_list':
						let msgList = obj.data.message_list.data;
						this.logmsgList = obj.data.message_list.data;
						this.lastId = msgList[0]?.id;
						this.lastPage = obj.data.message_list.last_page;
						msgList.forEach(item => {
							this.chatList.unshift(this.parseMsg(item, item.identify));
						});

						break;
					default:
				}
			} else {
				this.$u.toast('连接错误，正在重试~');
			}
		},

		// 解析消息类型,接受数据时才用，发送数据时不用。
		parseMsg(message, identify) {
			let obj = null;
			switch (message.message_type) {
				case 'system':
					obj = {
						identify: 'customer_service', // 用户发送的为 user; 客服发送的为 customer_service
						type: 'system', //message:用户消息类型; message_list:请求消息列表
						msg: message.message
					};
					break;
				case 'image':
					obj = {
						identify: message.sender_identify, // 用户发送的为 user; 客服发送的为 customer_service
						type: 'text', //message:用户消息类型; message_list:请求消息列表
						msg: `<img class="chat-img" src="${message.message}"/>`,
						server_avatar: identify?.avatar,
						date: message.createtime
					};
					break;
				case 'goods':
					obj = {
						identify: message.sender_identify, // 用户发送的为 user; 客服发送的为 customer_service
						type: message.message_type, //message:用户消息类型; message_list:请求消息列表
						msg: JSON.parse(message.message),
						server_avatar: identify?.avatar,
						date: message.createtime
					};
					break;
				case 'order':
					obj = {
						identify: message.sender_identify, // 用户发送的为 user; 客服发送的为 customer_service
						type: message.message_type, //message:用户消息类型; message_list:请求消息列表
						msg: JSON.parse(message.message),
						server_avatar: identify?.avatar,
						date: message.createtime
					};
					break;
				case 'text':
					obj = {
						identify: message.sender_identify, // 用户发送的为 user; 客服发送的为 customer_service
						type: message.message_type, //message:用户消息类型; message_list:请求消息列表
						msg: this.replaceEmoji(message.message),
						server_avatar: identify?.avatar,
						date: message.createtime
					};
					break;
				default:
					break;
			}
			return obj;
		},

		// 获取历史聊天记录
		async chatLog() {
			let msg = {
				identify: 'user', // 用户发送的为 user; 客服发送的为 customer_service
				type: 'message_list', //message:用户消息类型; message_list:请求消息列表
				data: {
					// 额外参数，分页页码，分页条数等
					page: this.currentPage, //默认
					last_id: this.lastId //第一页第一条的Id
				}
			};
			this.logStatus = 'loading';
			let strMsg = JSON.stringify(msg);
			let res = await this.socket.send(strMsg);
			if (res && res.errMsg === 'sendSocketMessage:ok') {
				setTimeout(() => {
					this.logStatus = 'loadmore';
				}, 300);
			}
		},

		// 获取焦点
		InputFocus(e) {
			this.onMask();
		},
		// 失去焦点
		InputBlur(e) {
			this.InputBottom = 0;
		},
		// 输入
		onInput(e) {},

		// 滚动到顶部
		logLoadmore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.chatLog();
			} else {
				this.logStatus = 'nomore';
			}
		},

		// 点击工具栏开关
		onTools() {
			if (this.isClose) {
				this.$u.toast('您已掉线！请返回重试');
				this.noticeType = 'error';
				this.noticeList = ['您已掉线！请返回重试'];
				return;
			}
			this.showEmoji = false;
			this.showTools = !this.showTools;
		},
		// 工具栏功能项
		onToolItem(type) {
			this.orderList = [];
			this.viewList = [];
			this.orderCurrentPage = 1;
			this.viewCurrentPage = 1;
			this.orderTotalPage = 1;
			this.viewTotalPage = 1;
			this.cardType = type;
			let map = new Map();
			map.set('order', () => {
				this.logTitle = '我的订单';
				this.showLogBox = true;
				this.getOrderList();
			});
			map.set('goods', () => {
				this.logTitle = '我的浏览';
				this.showLogBox = true;
				this.getbrowseList();
			});
			map.set('imgs', this.chooseImg);

			map.get(type)();
		},
		// 点击商品卡片
		onViewCard(goods) {
			let goodsData = {
				id: goods.goods.id,
				title: goods.goods.title,
				price: goods.goods.price,
				image: goods.goods.image
			};
			let goodsStr = JSON.stringify(goodsData);
			this.sendWs(goodsStr, 'goods');
			this.pushChat(goodsData, 'goods');
			this.onMask();
		},
		onOrderCard(order) {
			let orderData = {
				id: order.id,
				title: order.item[0].goods_title,
				price: order.item[0].goods_price,
				num: order.item[0].goods_num,
				order_sn: order.order_sn,
				image: order.item[0].goods_image,
				status_name: order.status_name
			};
			let orderStr = JSON.stringify(orderData);
			this.sendWs(orderStr, 'order');
			this.pushChat(orderData, 'order');
			this.onMask();
		},
		// 关闭工具栏项
		closeToolsItem() {
			this.showLogBox = false;
		},

		// 选择表情
		selEmoji() {
			this.showTools = false;
			this.showLogBox = false;
			this.showEmoji = !this.showEmoji;
		},
		// 点击表情
		onEmoji(item) {
			this.msgText += item.name;
		},

		// 点击遮罩
		onMask() {
			this.showTools = false;
			this.showLogBox = false;
			this.showEmoji = false;
		},

		//关闭滚动提示
		closeNotice() {
			this.showNotice = false;
		},

		// 滚动底部
		goBottom() {
			let timeout = null;
			this.scrollInto = '';
			clearTimeout(timeout);
			timeout = setTimeout(() => {
				this.scrollInto = 'scrollBottom';
			}, 300);
		},

		// 发送图片
		uploadSuccess(list) {
			list.forEach(item => {
				this.sendWs(item.response.data.url, 'image');
				this.pushChat(`<img class="chat-img" src="${item.response.data.fullurl}"/>`);
				this.onMask();
			});
		},
		uploadChange(e) {
			// console.log('上传回调', e);
		},

		// 发送问题
		async onQuestion(question) {
			this.pushChat(question.title);
			let msg = {
				identify: 'user', // 用户发送的为 user; 客服发送的为 customer_service
				type: 'message', //message:用户消息类型; message_list:请求消息列表
				message: {
					// 发送的消息   type 为 message 的时候必填
					message_type: 'text', // 消息类型 text image 等
					message: question.title // 消息内容 文本，或者图片地址，或者商品 json 对象
				},
				data: {
					question_id: question.id
				}
			};
			let strMsg = JSON.stringify(msg);
			let res = await this.socket.send(strMsg);
		},

		// 发送消息
		onSend() {
			if (this.msgText) {
				this.sendWs(this.msgText);
				this.pushChat(this.msgText);
				this.msgText = '';
			}
			this.showEmoji && this.onMask();
		},

		// 发送服务数据
		async sendWs(data, type = 'text') {
			let msg = {
				identify: 'user', // 用户发送的为 user; 客服发送的为 customer_service
				type: 'message', //message:用户消息类型; message_list:请求消息列表
				message: {
					// 发送的消息   type 为 message 的时候必填
					message_type: type, // 消息类型 text image 等
					message: data // 消息内容 文本，或者图片地址，或者商品 json 对象
				}
			};
			let strMsg = JSON.stringify(msg);
			let res = await this.socket.send(strMsg);
		},

		// 发送本地数据。
		pushChat(data, type = 'text') {
			if (this.isClose) {
				this.$u.toast('您已掉线！请返回重试');
				this.noticeType = 'error';
				this.noticeList = ['您已掉线！请返回重试'];
				return;
			}
			this.chatList.push({
				identify: 'user',
				type: type,
				msg: this.replaceEmoji(data),
				date: new Date().getTime()
			});
			this.goBottom();
		},

		// 表情地址
		selEmojiFile(name) {
			for (let index in this.emojiList) {
				if (this.emojiList[index].name === name) {
					return this.emojiList[index].file;
				}
			}
			return false;
		},
		// 替换表情
		replaceEmoji(data) {
			let newData = data;
			if (typeof newData !== 'object') {
				let reg = /\[(.+?)\]/g; // [] 中括号
				let zhEmojiName = newData.match(reg);
				if (zhEmojiName) {
					zhEmojiName.forEach(item => {
						let emojiFile = this.selEmojiFile(item);
						newData = newData.replace(
							item,
							`<img class="chat-img" style="width:50rpx;height:50rpx;margin:0 6rpx" src="${this.EMOJI_BASE_URL}/assets/addons/shopro/img/emoji/${emojiFile}"/>`
						);
					});
				}
			}
			return newData;
		},

		// 加载更多
		loadMore() {
			if (this.cardType === 'goods') {
				if (this.viewCurrentPage < this.viewTotalPage) {
					this.viewCurrentPage += 1;
					this.getbrowseList();
				}
			}
			if (this.cardType === 'order') {
				if (this.orderCurrentPage < this.orderTotalPage) {
					this.orderCurrentPage += 1;
					this.getOrderList();
				}
			}
		},

		// 订单列表
		getOrderList() {
			let that = this;
			that.isLoading = true;
			that.loadStatus = 'loading';
			that.$http('order.index', {
				type: 'all',
				page: that.orderCurrentPage
			}).then(res => {
				that.isLoading = false;
				if (res.code === 1) {
					that.orderList = [...that.orderList, ...res.data.data];
					that.orderTotalPage = res.data.last_page;
					that.loadStatus = that.orderCurrentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},

		// 历史记录
		getbrowseList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('user.viewList', {
				page: that.viewCurrentPage
			}).then(res => {
				if (res.code === 1) {
					that.viewList = [...that.viewList, ...res.data.data];
					that.viewTotalPage = res.data.last_page;
					that.loadStatus = that.viewCurrentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import './chat.scss';
// 重置样式
page {
	overflow: hidden;
}
.cu-avatar {
	border: 1rpx solid #eeeeee;
}

// 标题栏
.head-box {
	.head-title {
		font-size: 38rpx;
		line-height: 38rpx;
		white-space: nowrap;
	}
	.head-icon {
		font-size: 34rpx;
		line-height: 38rpx;
	}
	.text-green {
		color: $u-type-success-dark;
	}
	.text-gray {
		color: $u-type-error;
	}
	.head-state {
		font-size: 28rpx;
		line-height: 38rpx;
	}
}
// 模板消息
.template-box {
	width: 690rpx;
	background: #ffffff;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 20rpx 24rpx;
	.template-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
	.template-item {
		font-size: 24rpx;
		font-weight: 500;
		color: #603fff;
		line-height: 46rpx;
	}
}
// 聊天框
.chat-wrap {
	height: 100%;
	overflow: hidden;
	.scroll-box {
		height: 100%;
	}
	.cu-chat {
		.cu-info {
			border-radius: 26rpx;
			background: rgba(#000, 0.1);
			padding: 6rpx 20rpx;
		}
		.main {
			margin: 0 20rpx;
			max-width: calc(100% - 80px);
		}
		.cu-item > .main .content {
			&::after {
				width: 0;
				height: 0;
			}
			&::before {
				width: 0;
				height: 0;
			}
		}
	}
}
// 底部
.foot {
	padding: 0 20rpx;
	.input-wrap {
		background: #f2f2f2;
		border-radius: 32rpx;
		flex: 1;
		height: 60rpx;
		.input {
			width: 100%;
		}
	}
	.send-btn {
		padding: 0;
		width: 110rpx;
		line-height: 64rpx;
		background: linear-gradient(90deg, #a36fff, #5336ff);
		border-radius: 32rpx;
		color: #fff;
	}
	.more-btn {
		padding: 0;
		background: none;
		.icon-tianjia {
			font-size: 44rpx;
			background: linear-gradient(90deg, #a36fff, #5336ff);
			-webkit-background-clip: text;
			color: transparent;
			transition: all linear 0.2s;
		}
		.tools-active {
			transform: rotate(45deg);
			transition: all linear 0.2s;
		}
	}
}
// 工具栏
.tools-box {
	background-color: #fff;
	height: 310rpx;
	border-top: 1rpx solid #f6f6f6;
	transition: all 0.3s ease-in-out 0s;
	.tools-item {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		.item-img {
			width: 70rpx;
			height: 70rpx;
			margin-bottom: 30rpx;
		}
		.item-tile {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}
// 商品卡片
.goods-card {
	width: 100%;
	.goods-img {
		width: 116rpx;
		height: 116rpx;
		margin-right: 20rpx;
	}
	.card-right {
		width: 330rpx;
		height: 116rpx;
		.goods-title {
			width: 330rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
		}

		.price-box {
			width: 100%;
			.goods-price {
				font-size: 26rpx;
				font-weight: 500;
				color: #ff3000;
				&::before {
					content: '￥';
					font-size: 20rpx;
				}
			}
			.goods-state {
				font-size: 24rpx;
				font-weight: 500;
				color: #603fff;
			}
		}
	}
}
// 订单卡片样式
.order-chat {
	width: 100%;
	.order-code {
		font-size: 24rpx;
		width: 100%;
		font-weight: 400;
		color: #999999;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 0rpx 10rpx;
	}
}

// 订单商品记录
.log-box {
	width: 750rpx;
	height: 600rpx;
	background: #f2f2f2;
	border-radius: 20rpx 20rpx 0px 0px;
	display: flex;
	flex-direction: column;
	.log-head {
		box-sizing: border-box;
		width: 750rpx;
		height: 94rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 0 26rpx;
		.title-box {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 90rpx;
			border-bottom: 4rpx solid #7063d2;
		}
		.close-btn {
			padding: 0;
			background: none;
		}
	}
	.log-content {
		flex: 1;
		height: 100%;
		width: 100%;
		overflow: hidden;
		background: #f2f2f2;
		.card-scroll-box {
			height: 100%;
			width: 100%;
			background: #f2f2f2;
		}
		.log-item {
			width: 690rpx;
			margin: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.code-box {
				border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
				height: 76rpx;
				padding: 0 20rpx;
				.code-text,
				.date-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.log-card {
				padding: 30rpx 20rpx;
			}
			.goods-img {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
			}
			.card-right {
				width: 500rpx;
				height: 140rpx;

				.goods-title {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 32rpx;
					text-align: left;
					width: 500rpx;
				}
				.num-box {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					text-align: left;
					width: 100%;
				}
				.price-box {
					width: 100%;
					.goods-price {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						&::before {
							content: '￥';
							font-size: 20rpx;
						}
					}
					.goods-state {
						font-size: 24rpx;
						font-weight: 500;
						color: #603fff;
					}
				}
			}
		}
	}
}
// 表情栏
.emoji-box {
	width: 100%;
	background-color: #fff;
	height: 310rpx;
	border-top: 1rpx solid #f6f6f6;
	transition: all 0.3s ease-in-out 0s;
	padding: 20rpx 0;
	.emoji-swiper {
		height: 280rpx;
		.swiper-item {
			flex-wrap: wrap;
		}
	}
	.emoji-img {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		margin: 10rpx;
	}
}
</style>
