<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false" @rightClick="jumpScoreRed">课程详情
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->


		<view class="content">
			<view class="pic">
				<image class="bigImg" :src="detail.cover_image==''?'../../../static/posImg.png':detail.cover_image"
					mode=""></image>
			</view>

			<view class="center">
				<view class="scoreTitle">
					<!-- Chat GPT应用场景学习 -->
					{{detail.name}}
				</view>
				<view class="selOutBox">
					<view class="price">
						￥{{detail.price}}
					</view>
					<view class="sellOut" style="font-size: 26rpx;color: #999;">
						已售出：{{detail.orders_count}}份
					</view>
				</view>

			</view>
			<view class="bottom">
				<view class="title">
					课程介绍
				</view>
				<view class="desBox">
					<u-parse :content="detail.description"></u-parse>
					<!-- <image src="../../../static/posImg.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<view class="pos">

		</view>
		<view class="kefuAndBtn">
			<view class="iconBox" @click="jumpToKefu">
				<u-icon class="icon" name="server-fill" color="#26B3A0" size="22"></u-icon>
			</view>
			<view class="btn" @click="goStudy(detail.id)">
				立即学习
			</view>
		</view>
	</view>
</template>

<script>
	import {
		courseDetail,
		shopCourse
	} from '@/api/score/index.js'
	import {
		wxPayPamars,
		wxConfigPamars,
	} from '@/api/public/index.js'
	import {
		myScoreOrder,
		myScoreOrderDetail
	} from '@/api/my/index.js'

	import ShoproPay from '@/common/pay';
	import wxsdk from '@/common/wechat/sdk'


	// 判断是否为微信环境
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		components: {},
		data() {
			return {
				tobheight: 45,

				detail: {},
				course_id: '',
				scoreOrderList: [],
				currPayOrderList: []
			};
		},
		computed: {

		},
		watch: {

		},
		async onLoad(o) {
			this.course_id = o.id
			let res = await courseDetail({
				course_id: o.id
			})
			if (res.code == 0) {
				this.detail = res.data
			}
			console.log('课程详情返回值', res);




		},
		onReady() {

		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			async hasWaitingPayOrder() {
				let resss = await myScoreOrder()
				if (resss.code == 0) {
					this.scoreOrderList = resss.data

					this.currPayOrderList = this.scoreOrderList.filter((item, index) => {
						return item.course_id == this.course_id
					})
				}
			},

			// jumpToKefu() {
			// 	uni.navigateTo({
			// 		url: '/pages/user/public/kefu'
			// 	})
			// },
			jumpToKefu() {
				window.open('https://work.weixin.qq.com/kfid/kfc807229b723286051')
			},
			async goStudy(course_id) {

				// return uni.navigateTo({
				// 	url: '/pages/index/scorePaySuc/index?id=' + this
				// 		.course_id
				// })
				if (!isWechat()) {
					uni.showToast({
						title: '请用微信内置浏览器打开本网站,进行课程购买!',
						icon: 'none'
					})
					return
				}

				// this.hasWaitingPayOrder(
				// 判断是否存在待支付的订单
				let resss = await myScoreOrder()
				if (resss.code == 0) {
					this.scoreOrderList = resss.data

					this.currPayOrderList = this.scoreOrderList.filter((item, index) => {
						return item.course_id == this.course_id
					})
				}
				if (this.currPayOrderList.length != 0) {
					console.log('当前购买课程的待支付订单列表', this.currPayOrderList, resss);
					if (this.currPayOrderList[0].status) {
						uni.showToast({
							title: '你已购买过该课程，请勿重复购买！',
							icon: 'none',
							duration: 1500
						})
					} else {
						let res2 = await wxPayPamars({
							order_id: this.currPayOrderList[0].id
						})
						let url = window.location.href.split('#')[0]
						let res3 = await wxConfigPamars({
							url: url
						})
						if (res2.code == 0 && res3.code == 0) {
							wxsdk.wxpay(res3.data, res2.data, (res) => {
								if (res.errMsg == "chooseWXPay:ok") {
									// uni.showToast({
									// 	title: '付款成功',
									// 	icon: 'success',
									// 	duration: 1500
									// })
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/index/scorePaySuc/index?id=' + this
												.course_id
										})
									}, 1500)
								} else {
									uni.showToast({
										title: '支付失败,请稍后重试！',
										icon: 'error',
										duration: 1500
									})
								}
							});
						} else {
							if (res2.code != 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								})
							} else if (res3.code != 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								})
							}
						}

					}
				} else {
					let res1 = await shopCourse({
						course_id
					})
					console.log('立即学习(下单)返回值', res1);
					if (res1.code == 0) {
						let res2 = await wxPayPamars({
							order_id: res1.data.id
						})
						let url = window.location.href.split('#')[0]
						let res3 = await wxConfigPamars({
							url: url
						})
						if (res2.code == 0 && res3.code == 0) {
							wxsdk.wxpay(res3.data, res2.data, (res) => {
								if (res.errMsg == "chooseWXPay:ok") {
									// uni.showToast({
									// 	title: '付款成功',
									// 	icon: 'success',
									// 	duration: 1500
									// })
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/index/scorePaySuc/index?id=' + this
												.course_id
										})
									}, 1500)
								} else {
									uni.showToast({
										title: '支付失败,请稍后重试！',
										icon: 'error',
										duration: 1500
									})
								}
							});
						} else {
							if (res2.code != 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								})
							} else if (res3.code != 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								})
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>