<template>
	<view>
		<view style="position: relative;padding-bottom: 100rpx;">
			<u-image :src="imgUrl+detailList.cover" width="750rpx" height="530rpx">
			</u-image>
			<view class="collect" v-if="detailList.is_fav==0||!detailList.is_fav" @click="starTap">
				<view class="star">
					<u-image src="/static/detail/xp_icon_wstar.png" width="28rpx" height="28rpx">
					</u-image>
				</view>
				<u-image src="/static/detail/xiangqing_icon_shoucang.png" width="119rpx" height="48rpx">
				</u-image>
			</view>
			<view class="collect" v-if="detailList.is_fav==1" @click="cancelStarTap(detailList.fav_id)">
				<view class="star">
					<u-image src="/static/detail/xp_icon_star.png" width="28rpx" height="28rpx">
					</u-image>
				</view>
				<u-image src="/static/detail/xiangqing_icon_shoucang.png" width="119rpx" height="48rpx">
				</u-image>
			</view>
			<view class="content">
				<view class="title_box">
					<text class="title">{{detailList.name}}</text>
					<view class="title_tag">{{detailList.cate_bname}}</view>
				</view>
				<view class="desc">
					{{detailList.title}}
				</view>
				<view class="classify">
					{{detailList.cate_name}}
				</view>
				<view class="tag_view">
					<view>
						<text class="tagOne" v-for="item in detailList.tags" :key="item.id">{{item}}</text>
					</view>
					<!-- thumb有值，显示数字+赞 -->
					<view v-if="detailList.thumb" class="heart">
						<!-- 如果用户对该商品没有点赞，显示灰星 -->
						<u-image v-if="detailList.is_thumb==0" src="/static/detail/xp_icon_heart.png" width="34rpx"
							height="32rpx" @click="heartTap">
						</u-image>
						<!-- 如果用户对该商品已经点赞，显示黄星-->
						<u-image v-if="detailList.is_thumb==1" src="/static/detail/xp_icon_ysc.png" width="34rpx"
							height="32rpx" @click="cancelHeartTap(detailList.thumb_id)">
						</u-image>
						<text class="thumb">{{detailList.thumb}} 赞</text>
					</view>
					<!-- thumb无值，显示‘点赞’二字 ，用户进行一次点赞之后，显示1赞-->
					<view v-else class="heart">
						<view v-if="detailList.is_thumb==0" style="display: flex;">
							<u-image src="/static/detail/xp_icon_heart.png" width="34rpx" height="32rpx"
								@click="heartTap">
							</u-image>
							<text class="thumb" @click="heartTap">点赞</text>
						</view>
						<view v-if="detailList.is_thumb==1" style="display: flex;">
							<!-- 用户是否点赞字段 showHeart -->
							<u-image src="/static/detail/xp_icon_ysc.png" width="34rpx" height="32rpx"
								@click="cancelHeartTap(detailList.thumb_id)">
							</u-image>
							<text class="thumb">{{detailList.thumb}} 赞</text>
						</view>
					</view>
				</view>
			</view>

			<view class="releaseDate">
				<u-image src="/static/products/xp_icon_sjf.png" width="24rpx" height="24rpx">
				</u-image>
				<text class="release">发布日期：</text>
				<text>{{detailList.pub_time}}</text>
			</view>

			<u-parse :content="detailList.desc" @preview="preview" @navigate="navigate"></u-parse>

			<u-modal :show="showCall" showCancelButton closeOnClickOverlay="false" confirmText="是" cancelText="否"
				@confirm="confirmCall" @cancel="cancelCall">
				<view>
					<view style="text-indent: 25rpx;">{{mobile}}</view>
					<text>是否拨打客服电话</text>
				</view>
			</u-modal>
			<view style="margin:0 20rpx;">
				<u-overlay :show="!isLoad">
					<login :timoutText="timoutText" @success="reOnLoad()" @fail="failToLoad()"></login>
				</u-overlay>
			</view>
			<u-modal :show="showUpdate" :content='content' closeOnClickOverlay="false" showCancelButton="true"
				confirmText="升级VIP" @confirm="confirm" @cancel="cancel" confirmColor="#0EBB5B">
				<rich-text :nodes="updateContent"></rich-text>
			</u-modal>
			<u-modal :show="showUpdating" closeOnClickOverlay="false" confirmText="确定" @confirm="confirm">
				<rich-text :nodes="updatingContent"></rich-text>
			</u-modal>
		</view>
		<view class="footer" @click="showContact()">
			<u-icon name="kefu-ermai" color="#fff" size="30rpx"></u-icon>
			<text>联系客服</text>
		</view>
	</view>
</template>

<script>
	import {
		dateFormatDetail
	} from '../../../utills/date.js'
	import login from 'pages/my/login/login'
	export default {
		components: {
			login
		},
		data() {
			return {
				id: '',
				imgUrl: '',
				showHeart: false,
				detailList: [],
				isLoad: true,
				showUpdate: false,
				showUpdating: false,
				showCall: false,
				mobile: '',
				kf_email: '',
				updateContent: '您暂无权限访问，请升级VIP访问',
				updatingContent: '升级VIP，正在审核中',
				timoutText: 1
			}
		},
		onLoad(option) {
			this.imgUrl = uni.getStorageSync('img_url')
			this.id = option.id
			this.getProductDetail()
			this.getCsTel()
		},
		methods: {
			//获取客服电话
			getCsTel() {
				this.$apiServe.getCsTel().then(res => {
					this.mobile = res.data.data.cs_tel
				}).finally(_ => {})
			},
			//获取详情信息
			getProductDetail() {
				this.$apiServe.getProductDetail(this.id).then(res => {
					console.log('产品详情', res);
					let detail = res.data.data
					let dataCode = res.data.code
					if (dataCode === -1 || res.statusCode == 500) {
						this.isLoad = false
					}
					//授权登录拦截
					if (dataCode == 0 && detail.mytpe == 1) {
						this.isLoad = false
					}
					//跳转到升级VIP页面
					if (dataCode == 0 && detail.mytpe == 2) {
						this.showUpdate = true
					}
					//升级VIP正在审核中
					if (dataCode == 0 && detail.mytpe == 3) {
						this.showUpdating = true
					}

					if (detail) {
						detail.pub_time = dateFormatDetail(detail.pub_time)
						if (detail.tags) {
							detail.tags = detail.tags.split(',')
						}

						// if (detail.is_thumb == 1 && parseInt(detail.thumb) == 1 && parseInt(detail
						// 		.thumbcount) == 1) {
						// 	console.log('222');
						// 	detail.thumb = parseInt(detail.thumbcount)
						// } else {
						detail.thumb = parseInt(detail.thumb) + parseInt(detail.thumbcount)
						// }

						this.detailList = detail
					}
				}).finally(_ => {})
			},
			//点击star收藏
			starTap() {
				if (!uni.getStorageSync('loginToken')) {
					this.$toast.warn('请登录后操作')
				} else {
					this.$apiServe.collect(this.id).then(res => {
						if (res.data.code == 1) {
							this.$toast.warn('收藏成功')
							this.getProductDetail()
						} else {
							this.$toast.warn('收藏失败')
						}
					}).finally(_ => {})
				}
			},
			//点击star取消收藏
			cancelStarTap(fav_id) {
				this.$apiServe.deleteHistoryOrCollection(fav_id).then(res => {
					if (res.data.code == 1) {
						this.$toast.warn('取消收藏')
						this.getProductDetail()
					} else {
						this.$toast.warn('取消收藏失败')
					}
				}).finally(_ => {})
			},
			//点赞按钮
			heartTap() {
				if (!uni.getStorageSync('loginToken')) {
					this.$toast.warn('请登录后操作')
				} else {
					this.$apiServe.thumb(this.id).then(res => {
						if (res.data.code == 1) {
							this.getProductDetail()
							this.$toast.warn('点赞成功')
						} else {
							this.$toast.warn('点赞失败')
						}
					}).finally(_ => {})
				}
			},
			//取消点赞
			cancelHeartTap(thumb_id) {
				this.$apiServe.cancelThumb(thumb_id).then(res => {
					if (res.data.code == 1) {
						this.getProductDetail()
						this.$toast.warn('取消点赞')
					} else {
						this.$toast.warn('取消点赞失败')
					}
				}).finally(_ => {})
			},
			reOnLoad() {
				if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
					this.$toast.warn('登录失败请重试')
					this.isLoad = false
					// uni.navigateTo({
					// 	url: '../../pages/my/login/login'
					// })
					return
				}
				this.isLoad = true
				this.getProductDetail()
			},
			failToLoad() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			confirm() {
				uni.navigateTo({
					url: '../../../packageMy/memberCenter/memberCenter?ask=' + 1
				})
			},
			cancel() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 联系客服模态框
			showContact() {
				this.showCall = true
			},
			confirmCall() {
				this.showCall = false
				let phone = this.mobile
				phone = phone.toString()
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			cancelCall() {
				this.showCall = false
			}
		}
	}
</script>

<style lang="scss">
	.collect {
		display: flex;
		position: absolute;
		top: 16rpx;
		right: 0;
		color: #fff;
		border-radius: 54rpx 0px 0px 54rpx;
		padding: 2px 2px 2px 3px;

		.star {
			position: absolute !important;
			top: 6px !important;
			right: 77rpx;
			z-index: 99;
		}
	}

	.content {
		padding: 20rpx;
		background-color: #fff;

		.title_box {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 48rpx;
				font-weight: bold;
				color: #134b40;
				line-height: 60rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.title_tag {
				height: 30rpx;
				background: #0EBB5B;
				border-radius: 7rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				padding: 1rpx 15rpx;
			}
		}

		.desc {
			font-size: 42rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #3E3E3E;
			// line-height: 38rpx;
			padding: 24rpx 0;
		}

		.classify {
			width: 117rpx;
			height: 40rpx;
			border-radius: 6rpx;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
			padding: 1rpx 15rpx;
		}

		.tag_view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 24rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			// line-height: 28rpx;

			.tagOne {
				padding-right: 20rpx;
			}

			.heart {
				display: flex;

				.thumb {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 33rpx;
					margin-left: 14rpx;
				}
			}
		}

	}

	.releaseDate {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 33rpx;
		display: flex;
		align-items: center;
		padding: 24rpx 20rpx;
		margin: 20rpx 0;
		background-color: #fff;

		.release {
			padding: 0 10rpx 0 6rpx;
		}
	}



	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #0EBB5B;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		text-align: center;

		.u-icon {
			justify-content: center;
		}

		text {
			font-size: 20rpx;
			font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 26rpx;
		}
	}
</style>
