<template>
	<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
		<view class="fix-line">
			<view class="inner" :style="innerStyle"></view>
		</view>
	</fix-base-style>
</template>

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

const props = defineProps({
	mode: {
		type: String,
		default: "solid",
	},
	color: {
		type: String,
		default: "#f5f6fa",
	},
	height: {
		type: Number,
		default: 4,
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});
const innerStyle = computed(() => {
	return {
		borderBottom: `${props.height}rpx ${props.mode} ${props.color}`,
	};
});
</script>

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