<template>
	<view>
		<!-- #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="scoreBox">
			<view class="scoreInfo">
				课程信息
			</view>
			<view v-if="detail.course" class="scoreInfoCon">
				<image :src="detail.course.cover_image==''?'../../../static/posImg.png': detail.course.cover_image"
					mode=""></image>
				<view class="scoreTitle">
					<!-- Chat GPT应用场景及综合应用（第1期） -->
					{{detail.course.name}}
				</view>
			</view>
			<view class="scoreDes">
				<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
				<u-parse :content="detail.course ? detail.course.description : '暂无课程信息'"></u-parse>
			</view>

			<!-- <view class="topBtn" @click="downLoad(detail.status)">
				查看学习资料
			</view> -->
			<view class="topBtn" @click="handleShowRes">
				{{resShow?'收起学习资料':'查看学习资料'}}
			</view>

			<view class="res" v-if="resShow&&this.detail.course">
				<view class="inner" v-for="(i,index) in this.detail.course.content" @click="downLoad(i)">
					<text style="text-decoration: underline;">
						{{'学习资料'+(index+1)}}</text><text>{{i.slice(i.lastIndexOf('.'))}}</text>
				</view>
			</view>
			<!-- <button @click="test">cces</button> -->

			<view class="divLine">

			</view>
			<view class="orderInfo">
				<view class="title">
					订单信息
				</view>
				<view class="orderNo item">
					订单编号：{{detail.code}}
				</view>
				<view class="createAt item">
					创建时间：{{detail.created_at }}
				</view>
				<view class="orderMoney item">
					订单金额：{{detail.amount}}
				</view>
				<view class="payWay item">
					支付方式：微信
				</view>
				<view class="orderStatus item">
					订单状态：{{detail.status_text}}
				</view>
			</view>
			<!-- <button @click="goPay">测试支付</button> -->
		</view>
	</view>
</template>

<script>
	import {
		myScoreOrderDetail
	} from '@/api/my/index.js'
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl
	} from '@/common/request/request';

	import {
		downLoad2
	} from '@/utils/download2.js'

	import {
		saveAs
	} from '@/utils/FileSaver.js'
	import ShoproPay from '@/common/pay';
	export default {
		data() {
			return {
				loginType: 'h5', //app.globalData.loginType
				tobheight: 45,
				detail: {},

				orderId: '',

				resShow: false
			};
		},
		computed: {

		},
		async onLoad(o) {
			// console.log('是否导入成功', saveAs);
			this.orderId = o.id
			let res = await myScoreOrderDetail({
				course_order_id: o.id
			})
			if (res.code == 0) {
				this.detail = res.data
			}
			console.log('课程详情', this.detail);
		},
		methods: {
			handleShowRes() {
				if (this.detail.status == 0) {
					uni.showToast({
						title: '待支付课程不能查看学习资料',
						icon: 'none',
						duration: 1500
					})
					return
				}

				if (!this.detail.course.content) {
					uni.showToast({
						title: '当前课程暂无学习资料',
						icon: 'none',
						duration: 1500
					})
					return
				}

				this.resShow = !this.resShow
			},
			goPay() {
				let pay = new ShoproPay(this.orderId);
			},
			downLoad(fileName) {
				let _this = this
				//判断是否在微信
				var ua = navigator.userAgent.toLowerCase();
				var isWeixin = ua.indexOf('micromessenger') != -1;

				const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
					navigator.userAgent) ? false : true;

				if (isWeixin) {
					if (fileName.endsWith('.pdf')) {
						uni.navigateTo({
							url: '/pages/user/score/prePdf/index?url=' + fileName
						})
					} else if (fileName.endsWith('.mp4')) {
						uni.navigateTo({
							url: '/pages/user/score/preMp4/index?url=' + fileName
						})
					} else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.jpeg')) {
						uni.navigateTo({
							url: '/pages/user/score/preImg/index?url=' + fileName
						})
					} else if (fileName.endsWith('.zip') || fileName.endsWith('.rar')) {
						let _that = this
						uni.showModal({
							title: '温馨提示',
							content: '微信浏览器不支持直接打开zip或rar类型的文件，请复制链接至手机浏览器打开哦~',
							confirmText: '复制',
							confirmColor: '#26B3A0',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.setClipboardData({
										data: fileName,
										success: function() {
											console.log('success');
											uni.showToast({
												title: "复制成功",
												icon: 'success',
											})
										}
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}

				} else if (detectDeviceType()) {
					// pc端
					uni.downloadFile({
						url: fileName, //文件链接
						success: (res) => {
							if (res.statusCode === 200) {
								var oA = document.createElement("a");
								oA.download = _this.detail.course.name + '-学习资料'; // 设置下载的文件名，默认是'下载'	
								oA.href = res.tempFilePath; //临时路径再保存到本地
								document.body.appendChild(oA);
								oA.click();
								oA.remove(); // 下载之后把创建的元素删除
							}
						},
						fail: (err) => {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						},
					})
				} else {
					// 其他手机浏览器
					if (fileName.endsWith('.pdf')) {
						uni.navigateTo({
							url: '/pages/user/score/prePdf/index?url=' + fileName
						})
					} else if (fileName.endsWith('.mp4')) {
						uni.navigateTo({
							url: '/pages/user/score/preMp4/index?url=' + fileName
						})
					} else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.jpeg')) {
						uni.navigateTo({
							url: '/pages/user/score/preImg/index?url=' + fileName
						})
					} else if (fileName.endsWith('.zip') || fileName.endsWith('.rar')) {
						downLoad2(fileName, this.detail.course.name + '-学习资料', 'application/zip')
						// window.open(
						// 	fileName
						// )
					}
				}
			}
		},
	}
</script>

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