<template>
	<view class="richDetail">
		<view scroll-x="true" class="detail_title video_box" style="background-color: #fff">

			<view v-for="(v, i) in dataList" :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
				@click="handleClick(v,i)">

				【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
			</view>
		</view>

		<slot name="richHeadImg"></slot>
	</view>
</template>

<script>
	import $http from "@/config/requestConfig.js";
	import {
		mapState
	} from "vuex";
	export default {
		props: ["detailInfo", "dataList", "currentVideo"],
		components: {},
		data() {
			return {};
		},
		onLoad(options) {},
		onHide() {},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			getNumber(num) {
				if (num >= 10) {
					return num;
				} else {
					return `0${num}`;
				}
			},
			handleClick(data) {
				this.$emit("open", data);
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	.commonPageBox {
		padding: 40rpx 0;
	}

	.contentBox {
		.headImage {
			margin-bottom: 20rpx;
		}

		.detail_title {
			padding: 0 20rpx 0;
			font-size: 26rpx;
			line-height: 65rpx;
			font-weight: bold;
			text-align: center;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			overflow: hidden;
		}

		.rich_box {
			padding: 20rpx;
			box-sizing: border-box;

			p {
				display: block;
				text-indent: 2em;
				letter-spacing: 2px !important;
				line-height: 46rpx;
			}
		}
	}

	.richDetail {
		width: 100%;
		height: 100%;
	}

	.video_box {
		width: 100%;
		.video_item {
			width: 23%;
			margin-right: 10rpx;
			float: left;
			border: 2rpx solid #5188e5;
			background: #fff;
			color: #5188e5;
			text-align: center;
			border-radius: 10rpx;
			box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
		}

		.video_item:nth-child(4n) {
			margin-right: 0;
		}
	}

	.hot {
		background-color: #5188e5 !important;
		color: #fff !important;
	}
</style>