<template>
	<fix-base-style
		:styleSpacing="styleSpacing"
		:styleColor="styleColor"
		:position="position"
		:index="index"
	>
		<view class="fix-picture">
			<view class="inner" @click="toPath">
				<template v-if="data.pic">
					<image mode="widthFix" :src="data.pic" class="img" />
				</template>
			</view>
		</view>
	</fix-base-style>
</template>

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

const props = defineProps({
	data: {
		type: Object as PropType<Form.Picture>,
		default: () => {
			return {
				pic: "",
				link: {},
			};
		},
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});
const emits = defineEmits(["jump"]);

function toPath() {
	const link = props.data.link;
	emits("jump", link);
}
</script>

<style lang="scss" scoped>
.fix-picture {
	box-sizing: border-box;
	overflow: hidden;

	.inner {
		height: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		.img {
			width: 100%;
			max-width: 100%;
			vertical-align: middle;
		}
	}
}
</style>
