<script setup>
	/**
	 * 视频长按更多菜单
	 */
	import {
		onMounted,
		reactive,
		getCurrentInstance,
		ref,
		defineProps
	} from 'vue';
	// 工具库
	import util from '@/common/js/util.js'
	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps({
		// 是否我自己 0不是 1是
		isMine: {
			type: [String, Number],
			default: 0,
		},
	})
	// 
	const emit = defineEmits(['changeSpeed'])
	// 
	const speed = reactive([{
			name: '0.5',
			value: 0.5,
		},
		{
			name: '正常',
			value: 1,
		},
		{
			name: '1.25',
			value: 1.25,
		},
		{
			name: '1.5',
			value: 1.5,
		},
		{
			name: '2',
			value: 2,
		}
	])
	// 倍速下标
	const speedIndex = ref(1)
	// 视频数据对象
	const videoDetail = reactive({})

	onMounted(() => {
		// proxy.$refs.menu.open()
	})

	// 打开弹窗
	function open(item) {
		Object.assign(videoDetail, {}, item)
		// 下标
		speedIndex.value = speed.findIndex(node => node.value == item.speed)
		proxy.$refs.menu.open()
	}

	// 关闭弹窗
	function close() {
		Object.assign(videoDetail, {})
		proxy.$refs.menu.close()
	}

	/**
	 * 跳转
	 * @param {String} url 路径跳转
	 */
	function link(url) {
		util.isLogin().then(rs => {
			// 
			uni.navigateTo({
				url,
			})
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone',
			})
		})

		// 关闭
		close()
	}

	/**
	 * 修改速度
	 * @param {Object} item
	 */
	function handleSpeed(item) {
		emit('changeSpeed', item)
		// 关闭
		close()
	}

	// 
	defineExpose({
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="menu" type="bottom">
		<!--  -->
		<view class="menuAlt">
			<view class="header df jcr fdr ptb10 plr10">
				<uni-icons type="closeempty" @click="close" />
			</view>

			<view class="listArea mtb30 mlr30 plr30 bfff">
				<view class="line rows fdr ptb30">
					<text class="key f1 c111 f28">倍速</text>
					<view class="value speed df jcsb fdr f1 pl30">
						<view class="item" v-for="(item,index) in speed" :key="index" :class="{'active': speedIndex == index}" @click="handleSpeed(item)">
							<text class="text f28">{{item.name}}</text>
						</view>
					</view>
				</view>

				<template v-if="isMine == 0">
					<view class="line rows fdr ptb30" @click="link(util.setUrl('/pages/index/report',{userId:videoDetail.userId}))">
						<text class="key f1 c111 f28">举报作者</text>
						<view class="value f1 ml30"></view>
					</view>
				</template>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 菜单弹窗
	.menuAlt {
		background-color: #f2f2f2;
		border-radius: 30rpx 30rpx 0 0;

		.listArea {
			.line+.line {
				border-top: 2rpx solid #eee;
			}
		}
	}

	// 速度
	.speed {

		// 
		.item {
			.text {
				color: #999;
				transition-duration: .3s;
			}

			&.active {
				.text {
					color: #1c1c1c;
				}
			}
		}
	}
</style>