<script setup>
	/**
	 * 视频详情页
	 */

	import {
		ref,
		getCurrentInstance,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onHide
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	// 手机状态栏
	import statusBar from '@/components/header/statusBar.vue';
	// 首页视频
	import indexVideo from '@/components/index/indexVideo.vue'
	// 评论弹窗
	import commentAlt from '@/components/index/commentArea.vue'
	// 收藏弹窗
	import collectAlt from '@/components/index/collect.vue'
	// 分享到好友弹窗
	import shareFirendAlt from '@/components/index/shareFirend.vue'
	// 产品详情弹窗
	import productAlt from '@/components/index/proDetailAlt.vue'
	// 产品规格弹窗
	import productSpecAlt from '@/components/shop/detail/makeOrder.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 视频id
	const videoId = ref('')
	// 视频详情
	const detail = reactive({})
	// 是否是自己
	const isMine = ref(false)
	// 显示统计
	const statistic = ref('0')
	// 用户信息
	const userinfo = computed(() => uni.$store.state.userinfo)

	onLoad((option) => {
		if (option.videoId) videoId.value = option.videoId
		// 是否我的作品
		if (option.isMine && option.isMine != 'false') isMine.value = option.isMine
		// 是否显示统计
		if (option.statistic) statistic.value = option.statistic

		// 获取视频详情
		getVideoDetail()

		// 视频数据被修改
		uni.$on('updateVideo', (item) => {
			// 校验
			if (!item && !item.videoId) return
			// 当前下标
			if (item.videoId == detail.videoId) Object.assign(detail, item)
		})
	})

	onHide(() => {
		proxy.$refs.indexVideo.pause()
	})

	// 获取视频详情
	function getVideoDetail() {
		api.video.getVideoById({
			data: {
				id: videoId.value,
			}
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(detail, rs.data)

				// 播放视频
				proxy.$refs.indexVideo.play()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 打开评论弹窗
	 * @param {Object} item 当前列表项
	 */
	function handleShowCommentAlt(item) {
		proxy.$refs.commentRef.open(item)
		// 暂停当前视频
		proxy.$refs.indexVideo.pause()
	}

	/**
	 * 打开收藏弹窗
	 * @param {Object} item 视频项下标
	 */
	function handleShowCollectAlt(item) {
		proxy.$refs.collectRef.open(item)
	}

	/**
	 * 打开分享给好友弹窗
	 */
	function handleShowShareFirend() {
		proxy.$refs.shareFirendRef.open()
	}


	/**
	 * 视频点赞
	 * @param {Object} param 见下
	 * @param {Number} param.index 操作的视频下标
	 * @param {Number|String} param.isLike 0.点赞  1.取消点赞
	 * @param {Number|String} param.likeType 点赞类型 0.公开赞  1.隐私赞
	 */
	function videoLike(param) {
		const item = detail
		const data = {
			// 视频id
			videoId: item.id,
			// 点赞用户id
			likeUserId: userinfo.value.id,
			// 被点赞用户id
			targetUserId: item.userId,
			// 点赞类型 0.公开赞  1.隐私赞
			likeType: param.likeType,
			// //点赞   0.点赞  1.取消点赞
			isLike: param.isLike,
		}

		// 
		api.video.videoLike({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('updateVideo', {
					...item,
					...rs.data,
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 点击详情菜单
	 * @param {Object} item
	 */
	function detailMenu(item) {
		// 菜单
		let menu = [{
				name: '编辑',
				fn: () => {
					uni.navigateTo({
						url: util.setUrl('/pages/release/video', {
							videoId: detail.id,
						})
					})
				}
			},
			{
				name: '删除',
				fn: () => {
					util.alert({
						content: '删除后不可恢复。确认删除？',
					}).then(rs => {
						// 删除视频
						if (rs.confirm) api.video.removeVideo({
							data: {
								id: detail.id,
							}
						}).then(rs => {
							if (rs.code == 200) {
								uni.$emit('deleteVideo', detail.videoId)
								uni.navigateBack()
								return
							}
							util.alert({
								content: rs.msg,
								showCancel: false,
							})
						})
					})
				}
			},
		]
		uni.showActionSheet({
			itemList: menu.map(node => node.name),
			success: rs => {
				menu[rs.tapIndex].fn()
			}
		})
	}

	/**
	 * 跳转数据中心
	 * @param {Object} detail
	 */
	function handleDataCenter(detail) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/dataCenter/dataCenter', {
				videoId: detail.id,
			})
		})
	}

	/**
	 * 打开产品弹窗
	 * @param {Object} item 视频列表项
	 */
	function handleShowProduct(item) {
		// 打开产品详情弹窗
		proxy.$refs.productAltRef.init(item.productId)
	}

	/**
	 * 商品弹窗购买
	 * @param {Object} product
	 */
	function handleProductBuy(product) {
		Object.assign(productDetail, {}, product)
		// 
		proxy.$refs.productSpecAltRef.open()
	}

	/**
	 * 商品购买
	 * @param {Object} video 视频列表
	 */
	function handleProBuy(video) {
		// 获取商品详情
		api.shop.productDetail({
			query: {
				// 产品id
				productionId: video.productId,
			},
		}).then(rs => {
			if (rs.code == 200) {
				// 
				handleProductBuy(rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 返回
	 */
	function handleBack() {
		const pages = getCurrentPages()

		// 如果页面栈数量大于1
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
</script>

<template>
	<view class="page f1">
		<view class="apex">
			<statusBar />

			<view class="head df fdr jcsb">
				<view class="back" @click="handleBack">
					<uni-icons type="left" color="#fff" size="40rpx" />
				</view>
			</view>
		</view>

		<!--  -->
		<indexVideo ref="indexVideo" :statistic="statistic" :item="detail" :tabIndex="0" :isMine="isMine" :index="0"
			:current="0" mode="detail" @showComment="handleShowCommentAlt" @showCollect="handleShowCollectAlt"
			@showShareFirend="handleShowShareFirend" @like="videoLike" @detailMenu="detailMenu"
			@dataCenter="handleDataCenter" @showProduct="handleShowProduct" @proBuy="handleProBuy" />

		<!-- 评论弹窗 -->
		<commentAlt ref="commentRef" />
		<!-- 收藏弹窗 -->
		<collectAlt ref="collectRef" />
		<!-- 分享到好友弹窗 -->
		<shareFirendAlt ref="shareFirendRef" />
		<!-- 产品详情弹窗 -->
		<productAlt ref="productAltRef" @buy="handleProductBuy" />
		<!-- 产品立即下单弹窗 -->
		<productSpecAlt ref="productSpecAltRef" :detail="productDetail" @confirm="handlePay" />
	</view>
</template>

<style lang="scss" scoped>
	// 顶部
	.apex {
		position: fixed;
		top: 0%;
		left: 0;
		right: 0;

		// 返回
		.back {
			width: 40px;
			height: 40px;
			background-color: rgba(0, 0, 0, .8);
			border-radius: 100rpx;
		}
	}
</style>