<template>
	<view>
		<u-alert-tips
			:show-icon="true"
			type="info"
			:description="description"
		></u-alert-tips>
		<view style="margin-top: 20rpx; padding: 0 40rpx">
			<u-radio-group
				:width="'50%'"
				size="50"
				v-model="jubaoType"
			>
				<u-radio
					style="margin-top: 20rpx"
					:label-disabled="false"
					v-for="(item, index) in list"
					:key="index"
					:name="item.content"
				>
					{{ item.content }}
				</u-radio>
			</u-radio-group>
			<!--  -->
			<view style="margin-top: 40rpx">
				<view style="margin-bottom: 20rpx">举报描述（选填）</view>
				<u-input
					maxlength="32"
					v-model="des"
					:type="'textarea'"
					:border="true"
					:height="200"
					:auto-height="true"
				/>
				<view style="text-align: right">{{ des.length }}/32</view>
			</view>
		</view>
		<!--  -->
		<u-button
			class="custom-style"
			:ripple="true"
			type="error"
			@click="sub"
		>
			提交
		</u-button>
	</view>
</template>

<script>
import { reportVideo } from '@/api/vlog';
import storage from '@/utils/storage.js'; //缓存
export default {
	data() {
		return {
			vlogId: '',
			channelComment: null,
			description: '您的举报我们将尽快受理，核实后我们将第一时间告知受理结果，请尽量提交完整的举报描述',
			jubaoType: '',
			des: '',
			list: [
				{
					id: 1,
					content: '低俗色情'
				},
				{
					id: 2,
					content: '违法犯罪'
				},
				{
					id: 3,
					content: '涉政信息'
				},
				{
					id: 4,
					content: '虚假宣传'
				},
				{
					id: 5,
					content: '不良向导'
				},
				{
					id: 6,
					content: '侵犯个人隐私'
				}
			],
			flag: true
		};
	},
	destroyed() {
		console.log('举报页面销毁');
		// 销毁时关闭 BroadcastChannel
		if (this.channelComment) {
			this.channelComment.close();
		}
	},
	onLoad(e) {
		this.channelComment = new BroadcastChannel('comment-counts');
		this.vlogId = e.vlogId;
		this.init = e.from;
	},
	methods: {
		async sub() {
			if (!this.flag) return;
			this.flag = false;
			console.log(this.jubaoType);
			if (this.jubaoType) {
				var data = {
					myId: storage.getVlogUserInfo().id,
					vlogId: this.vlogId,
					reason: this.jubaoType,
					description: this.des
				};
				console.log(data);
				var res = await reportVideo(data);
				console.log(res);
				if (res.data.status == 200) {
					uni.showToast({
						icon: 'none',
						title: '举报成功'
					});
					// 刷新对应的videoList
					this.channelComment.postMessage({
						type: 'comment-counts',
						data: { lahei: true }
					});
					setTimeout(() => {
						if (this.init == 'detail') {
							uni.switchTab({
								url: '/pages/tabbar/vlog/index'
							});
						} else {
							uni.navigateBack();
						}
					}, 1000);
				}
			} else {
				this.flag = true;
				uni.showToast({
					icon: 'none',
					title: '请选择举报原因'
				});
			}
		}
	}
};
</script>

<style scoped>
.custom-style {
	width: 680rpx;
	margin: 0 auto;
	position: fixed;
	bottom: 50rpx;
	left: 50%;
	transform: translateX(-50%);
}
</style>
