<template>
	<fix-base-style
		:styleSpacing="styleSpacing"
		:styleColor="styleColor"
		:position="position"
		:index="index"
	>
		<view class="fix-list-menu">
			<view class="inner" v-if="list.length">
				<view
					class="item"
					:class="[`${isBorder ? 'is-border' : ''}`]"
					v-for="(item, index) in list"
					:key="index"
					@click="toPath(item.link)"
				>
					<view class="left">
						<image v-if="item.icon" :src="item.icon" class="icon" />
						<view class="text" :style="{ color: item.color }">
							{{ item.text }}
						</view>
					</view>
					<view class="right">
						<text class="text">{{ item.text2 }}</text>
						<cl-icon color="#a8abb2" name="arrow-right"></cl-icon>
					</view>
				</view>
			</view>
		</view>
	</fix-base-style>
</template>

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

const props = defineProps({
	list: {
		type: Array as PropType<Form.Title[]>,
		default: () => {
			return [
				{
					text: "",
					text2: "",
					color: "",
					icon: "",
					link: {
						name: "",
						type: "",
						appid: "",
						page: "",
					},
				},
			];
		},
	},
	isBorder: {
		type: Boolean,
		default: false,
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});
const emits = defineEmits(["jump"]);

function toPath(link: Form.Link) {
	emits("jump", link);
}
</script>

<style lang="scss" scoped>
.fix-list-menu {
	box-sizing: border-box;
	overflow: hidden;
	.inner {
		.is-border {
			border-bottom: 1px solid #e4e7ed;
		}
		.is-border:last-child {
			border-bottom: none;
		}
		.item {
			height: 80rpx;
			padding: 12rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 40rpx;
				.icon {
					margin-right: 12rpx;
					width: 50rpx;
					height: 50rpx;
				}
				.text {
					width: 440rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 32rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.right {
				width: 160rpx;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.text {
					color: #a8abb2;
					font-size: 24rpx;
					margin-right: 8rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
