<template>
	<view class="page" v-if="showPage">
		<view class="page1" v-if="isUp == 1">
			<view class="pageMain">
				<view class="swiperBox" v-if="swipers.length > 0">
					<ty-swiper-swiper-detail :list="swipers"></ty-swiper-swiper-detail>
				</view>
				<view class="padding-tb-25 padding-lr-30">
					<!-- 商铺详情 -->
					<view class="text-34 text-bold">
						{{detailData.name}}
					</view>
					<view class="text-26 text-77 line-45 margin-top-25" style="white-space: pre-line;"
						v-if="detailData.detail">
						{{detailData.detail}}
					</view>
					<view class="margin-top-25" v-if="detailData.detail_img.length > 0">
						<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
							mode="aspectFill" v-for="(item,index) in detailData.detail_img" :key="index"></image>
					</view>
					<!-- 商品价格 -->
					<view class="flex align-center justify-center margin-top-40"
						v-if="detailData.price || detailData.price_img.length > 0">
						<view class="titleLine"></view>
						<view class="margin-lr-15 text-26 text-98">商品价格</view>
						<view class="titleLine"></view>
					</view>
					<view class="text-26 text-33 line-45 margin-top-20" style="white-space: pre-line;"
						v-if="detailData.price">
						{{detailData.price}}
					</view>
					<view class="margin-top-25" v-if="detailData.price_img.length > 0">
						<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
							mode="aspectFill" v-for="(item,index) in detailData.price_img" :key="index"></image>
					</view>
					<!-- 检测报告 -->
					<view class="flex align-center justify-center margin-top-50"
						v-if="detailData.report || detailData.report_img.length > 0">
						<view class="titleLine"></view>
						<view class="margin-lr-15 text-26 text-98">检测报告</view>
						<view class="titleLine"></view>
					</view>
					<view class="text-26 text-33 line-45 margin-top-20" style="white-space: pre-line;"
						v-if="detailData.report">
						{{detailData.report}}
					</view>
					<view class="margin-top-25" v-if="detailData.report_img.length > 0">
						<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
							mode="widthFix" v-for="(item,index) in detailData.report_img" :key="index"></image>
					</view>
				</view>
			</view>
			<!-- 聊天 -->
			<view class="chatBox" @click="go('/pages/chat/index',3)">
				<view class="icon-icon-xiaoxi iconfont text-ff text-40"></view>
				<view class="redCircle" v-if="isChatRed"></view>
			</view>
			<!-- 底部 -->
			<view class="bottomBox flex align-center justify-between">
				<view class="flex flex-direction align-center position-relative">
					<view class="icon-icon-fenxiang iconfont text-42 margin-bottom-5 text-33"></view>
					<view class="text-22 text-33 line-30">分享</view>
					<button class="shareBtn" open-type="share"></button>
				</view>
				<view class="flex flex-direction align-center" @click="changeCollect">
					<view class="tyIcon-shoucang text-42 margin-bottom-5 "
						:class="isCollected ? 'text-2f9' : 'text-33'"></view>
					<view class="text-22 text-33 line-30">{{isCollected ? '已收藏' : '收藏'}}</view>
				</view>
				<view class="bg-2f9 text-center text-ff text-30 text-bold line-height-80 radius-40"
					style="width: 470rpx;" @click="goChat">
					咨询商家</view>
			</view>
		</view>
		<view class="page2 flex flex-direction align-center" v-else>
			<view class="emptyImg">
				<image src="/static/home/empty1.png" class="width-100p height-100p block"></image>
			</view>
			<view class="text-33 text-30 margin-bottom-35">商品已过期或已删除</view>
			<view class="text-26 text-ff text-center line-height-60 radius-30 bg-2f9" style="width: 220rpx;"
				@click="go('/pages/home/index',3)">去首页逛逛
			</view>
		</view>
	</view>
</template>

<script>
	import chat from '../chat/api/chat.js'
	export default {

		data() {
			return {
				swipers: [],
				detailData: {},
				id: '',
				isCollected: false,
				isUp: 1, //0--已下架  1-已上架
				showPage: false,
				isChatRed: false,
			}
		},
		onShareAppMessage() {
			return {
				title: this.detailData.name,
				imageUrl: this.detailData.cover_img,
				path: 'pages/material/detail?id=' + this.id
			}
		},
		onLoad(options) {
			this.id = options.id ? options.id : '';
			this.getPageData();
		},
		onShow() {
			if (this.cn.isLogin()) {
				this.getBottomTabRed()
			}
		},
		methods: {
			// 获取底部导航栏红点是否显示
			getBottomTabRed() {
				this.rq.getData('chat/api/FriendsChat/getNoReadNumber').then((res) => {
					if (res.code == 0) {
						if (res.data.number > 0) {
							this.isChatRed = true;
						} else {
							this.isChatRed = false;
						}
					}
				})
			},
			getPageData() {
				this.rq.getData('fire/api/Fire/getProductDetail', {
					product_id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.detailData = res.data.detail;
						if (res.data.detail.status) {
							res.data.detail.img_path.forEach((item, index) => {
								this.swipers.push({
									type: 1,
									image_url: item
								})
							})
							if (res.data.detail.video_url) {
								this.swipers.unshift({
									type: 2,
									video_url: res.data.detail.video_url,
									image_url: res.data.detail.video_cover_img
								})
							}
							if (res.data.detail.status == 3) {
								this.isUp = 0;
							} else {
								this.isUp = 1;
							}
							this.isCollected = res.data.detail.is_collect == 1 ? true : false;
						} else {
							this.isUp = 0;
						}
						this.showPage = true;
					}
				})
			},
			changeCollect() {
				if (this.cn.isLogin()) {
					this.rq.getData('fire/api/Fire/submitCollectProduct', {
						product_id: this.id
					}).then(res => {
						if (res.code == 0) {
							this.isCollected = !this.isCollected
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			},
			goChat() {
				if (this.cn.isLogin()) {
					let clientId = '';
					if (this.websocket.isSocketOpen) {
						clientId = uni.getStorageSync('clientId')
					}
					if (uni.getStorageSync('user_id') != this.detailData.user_id) {
						this.rq.getData('chat/api/FriendsChat/updateChatRoom', {
							to_user_id: this.detailData.user_id,
							 client_id: clientId
						}).then(res => {
							if (res.code == 0) {
								console.log(1005, res)
								var room_id = res.data.room_id
								chat.insertChatMessage(room_id, 5, this.detailData.name, {}, {
									id: this.id,
									name: this.detailData.name,
									cover_img: this.detailData.cover_img
								}).then(res => {
									uni.navigateTo({
										url: '/pages/chat/message?room_id=' + room_id
									})
								})
							}
						})
					} else {
						this.cn.alert('不能跟自己对话')
					}
				} else {
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.page2 {
		width: 100vw;
		height: 100vh;
		background: #fff;
		padding-top: 100rpx;
		box-sizing: border-box;
	}

	.swiperBox {
		width: 100vw;
	}

	.titleLine {
		width: 60rpx;
		height: 3rpx;
		background: #CCCCCC;
	}


	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)) 60rpx;
	}

	.shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 0;
		left: 0;
		top: 0;
	}

	.chatBox {
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
	}

	.redCircle {
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: red;
		right: 5rpx;
		top: 5rpx;
		border-radius: 50%;
	}

	.emptyImg {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 60rpx;
	}
</style>