<template>
	<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
		<view class="banner">
			<cl-banner
				:indicatorDots="indicatorDots"
				:list="list"
				:type="mode"
				:height="height"
				:autoplay="autoplay"
				@select="toPath"
			>
				<template #item="{ item }">
					<cl-skeleton height="100%" :loading="!item.pic" :loading-style="style">
						<image :style="style" mode="fill" :src="item.pic" />
					</cl-skeleton>
				</template>
			</cl-banner>
		</view>
	</fix-base-style>
</template>

<script lang="ts" setup name="fix-banner">
import { computed, type PropType } from "vue";
import { baseProps } from "../../hooks";
import type { Form } from "../../types/form";

const emits = defineEmits(["jump"]);

const props = defineProps({
	mode: {
		type: String,
		default: "",
	},
	height: {
		type: Number,
		default: 300,
	},
	autoplay: {
		type: Boolean,
		default: true,
	},
	indicatorDots: Boolean,
	list: {
		type: Array as PropType<Form.Banner[]>,
		default: function () {
			return [];
		},
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});

function toPath(index: number) {
	const link = props.list[index].link;
	emits("jump", link);
}

const style = computed(() => {
	const { borderTopLR, borderBottomLR } = props.styleSpacing;
	return {
		borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
	};
});
</script>

<style lang="scss" scoped>
.banner {
	margin: 0 auto;
	width: 100%;

	image {
		height: 100%;
		width: 100%;
	}
}
</style>
