<template>
	<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
		<div class="fix-video">
			<div class="inner" v-if="video">
				<video
					:src="video"
					:poster="cover"
					class="vertical"
					controls
					:class="[mode == 'horizontal' ? 'horizontal' : 'vertical']"
				></video>
			</div>
		</div>
	</fix-base-style>
</template>

<script lang="ts" name="fix-video" setup>
import { baseProps } from "../../hooks";

const props = defineProps({
	mode: {
		type: String,
		default: "horizontal",
	},
	video: {
		type: String,
		default: "",
	},
	cover: {
		type: String,
		default: "",
	},
	type: {
		type: String,
		default: "local",
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});
</script>

<style lang="scss" scoped>
.fix-video {
	box-sizing: border-box;
	overflow: hidden;
	video {
		margin: 0;
		padding: 0;
		display: block; /* 避免 inline 元素造成的间隙 */
		object-fit: cover;
	}
	.vertical {
		width: 750rpx;
		height: 1334rpx; /* 高度根据宽高比自动调整 */
		object-fit: contain; /* 保持视频的宽高比，不会拉伸 */
	}
	.horizontal {
		width: 750rpx; /* 屏幕宽度适配 */
		height: calc(750rpx * 9 / 16); /* 适用于 16:9 的宽高比 */
	}
}
</style>
