<script setup>
	/**
	 * 视频举报
	 */
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	// 视频菜单
	import videoMenu from '@/components/index/videoMenu.vue';

	const {
		proxy
	} = getCurrentInstance()
	// 举报列表
	const reportList = reactive([{
			name: '发布不正当的内容或信息',
		},
		{
			name: '传播涩情资源',
		},
		{
			name: '冒充他人',
		},
		{
			name: '涉嫌诈骗',
		},
		{
			name: '侵犯权益',
		},
		{
			name: '其他',
		}
	])
	// 举报下标
	const reportIndex = ref('')
	// 表单
	const form = reactive({
		userId: '',
		videoId: '',
		reasonForReporting: '',
		particulars: '',
		videoPictureUrl: '',
		coverUrl: ''
	})
	// 列表数据
	const list = reactive({
		data: [],
		pageSize: 10,
		pageNum: 1,
		total: 0,
	})
	// 已选择的视频列表
	const videos = computed(() => {
		let result = form.videoId.map(item => {
			return list.data.find(node => node.videoId == item) || {}
		})
		return result
	})

	onLoad((option) => {
		// 被举报的用户id
		if (option.userId) form.userId = option.userId
		// 获取列表
		getList()
	})

	/**
	 * 选择举报列表
	 * @param {Object} ev 携带参数
	 */
	function handleReportList(ev) {
		const index = ev.detail.value
		if (reportIndex.value === index) return
		reportIndex.value = index
	}

	// 刷新列表
	function refreshList() {
		list.pageNum = 1
		list.total = 0
		getList()
	}

	// 获取列表
	function getList() {
		// 
		api.video.myWorks({
			query: {
				userId: form.userId,
				pageSize: list.pageSize,
				pageNum: list.pageNum,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = []
				list.data.push(...rs.rows)
				list.total = rs.total
				return
			}
			return
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 上传图片
	function uploadImg() {
		util.upload_image({
			type: 1,
			success: rs => {
				form.videoPictureUrl = rs.value
			}
		})
	}

	/**
	 * 删除多媒体
	 * @param {Number} index 列表下标
	 * @param {String} key 操作的键
	 */
	function removeMedia(key) {
		util.alert({
			content: '确认要删除吗？',
		}).then(rs => {
			if (key == 'videoId') {
				form.videoId = null
				form.coverUrl = null
			}
			if (key == 'videoPictureUrl') form.videoPictureUrl = null
		})
	}

	// 视频举报
	function handleSubmit() {
		// 
		const data = {
			...form
		}

		// 验证必填项
		if (reportIndex == '') {
			util.alert('请选择举报理由')
			return
		}
		if (!data.particulars) {
			util.alert('详细描述不能为空')
			return
		}
		if (data.particulars.length > 500) {
			util.alert('详细描述自述超过500')
			return
		}

		data.reasonForReporting = reportList[reportIndex.value].name

		api.video.reportVideo({
			data: data,
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('举报成功，请等待后台审核')
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 选中视频信息
	function videoInfo(param) {
		form.videoId = param.videoId;
		form.coverUrl = param.coverUrl;
	}
</script>

<template>
	<view class="appbw">
		<!-- 表单 -->
		<view class="form plr50 c333 f28">
			<view class="line df aic mtb20">
				<view class="key mr20">举报理由</view>
				<picker class="f1" :range="reportList" rangeKey="name" @change="handleReportList">
					<view class="inputBox ptb10 plr10">
						<text v-if="reportList[reportIndex]">{{ reportList[reportIndex].name }}</text>
						<text v-else class="placeholderStyle">请选择举报理由</text>
					</view>
				</picker>
			</view>

			<view class="line mtb50">
				<view class="key">详细描述</view>

				<view class="inputBox mt20 ptb15 plr15">
					<textarea v-model="form.particulars" placeholder="请详细填写，以提高举报成功率。" />
				</view>

				<view class="hint mt10 tar f20">{{ form.particulars.length }}/500</view>
			</view>

			<view class="line mtb50 uploadBox">
				<view class="key">上传照片</view>

				<view class="uploads pr">
					<view class="cartoon pa">
						<image src="/static/uploadCartoon.png" mode="aspectFit" />
					</view>

					<view class="imgList images mt20">
						<view v-if="!form.videoPictureUrl" class="item upload fmid pr mr20 br10" @click="uploadImg">
							<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
						</view>

						<view v-else class="imgs item mr20 br10">
							<image class="br10" :src="form.videoPictureUrl" mode="aspectFill" />
							<view class="close">
								<uni-icons type="clear" size="30rpx" color="red"
									@click="removeMedia('videoPictureUrl')" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="line mtb50 uploadBox">
				<view class="key">选择视频</view>

				<view class="list pr mt20">
					<view v-if="!form.coverUrl" class="item fmid oh br10" @click="$refs.select.open()">
						<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
					</view>

					<view v-else class="item pr br10">
						<image :src="form.coverUrl" mode="aspectFill" />

						<view class="close">
							<uni-icons type="clear" size="30rpx" color="red" @click="removeMedia('videoId')" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fill" style="height: 180rpx;"></view>

		<view class="footer plr30 bfff shadow">
			<view class="btn lg focus" @click="handleSubmit">举报</view>
		</view>

		<!-- 选择 -->
		<uni-popup ref="select" type="bottom">
			<view class="selectAlt popBot">
				<view class="product mt30 bfff">
					<view class="header rows ptb20 plr20">
						<view class="title plr30 c333 f34">
							<text>作品</text>
							<text class="ml10">{{ list.total }}</text>
						</view>

						<view class="fmid c999 f28" @click="refreshList">
							<uni-icons type="refreshempty" color="" />
							<text>刷新</text>
						</view>
					</view>

					<!-- 视频菜单 -->
					<scroll-view scroll-y="true" class="scroll">
						<videoMenu :list="list.data" @videoInfo="videoInfo" mode="checkbox" />
					</scroll-view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	// 表单
	.form {

		.hint {
			color: #a7a7a7;
		}
	}

	// 上传图片
	.uploadBox {

		// 
		.uploads {
			.cartoon {
				top: 0;
				right: -100rpx;
				width: 530rpx;
				height: 249rpx;
			}
		}

		// 上传图片
		.images .item {
			width: 150rpx;
			height: 150rpx;
			background-color: #F3F3F5;
		}

		// 列表
		.list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20rpx;

			// 列表
			.item {
				height: 290rpx;
				background-color: #F1F1F1;

				// 关闭
				.close {
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%, -50%);
					z-index: 1;
				}
			}
		}
	}

	// 作品数量
	.product {
		.scroll {
			height: 80vh;
		}
	}
</style>