<template>
	<fix-base-style
		:styleSpacing="styleSpacing"
		:styleColor="styleColor"
		:position="position"
		:statusBar="statusBar"
		:flowInner="false"
		:index="index"
	>
		<view class="search-bar" @tap="toSearch">
			<view class="search-bar__inner" :style="style" :class="[`is-${mode}`]">
				<cl-icon name="search" :margin="[0, 12, 0, 0]"> </cl-icon>
				<cl-text :value="placeholder" :color="styleColor.color"></cl-text>
			</view>
		</view>
	</fix-base-style>
</template>

<script lang="ts" setup name="fix-search">
import { computed } from "vue";
import { useCool } from "/@/cool";
import { baseProps } from "../../hooks";
const { router } = useCool();

const props = defineProps({
	mode: {
		type: String,
		default: "mode-1",
	},
	backgroundColor: {
		type: String,
		default: "#f6f7fa",
	},
	placeholder: {
		type: String,
		default: "请输入关键字进行搜索",
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
	statusBar: Boolean,
});

function toSearch() {
	router.push("/pages/goods/search");
}

const style = computed(() => {
	const { borderTopLR, borderBottomLR } = props.styleSpacing;

	const { color } = props.styleColor;

	return {
		color: color,
		backgroundColor: props.backgroundColor,
		borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
	};
});
</script>

<style lang="scss" scoped>
.search-bar {
	width: 100%;

	&__inner {
		display: flex;
		align-items: center;
		height: 70rpx;
		width: 100%;
		background-color: #f7f7f7;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.is-mode-1 {
		justify-content: flex-start;
	}
	.is-mode-2 {
		justify-content: center;
	}
	.is-mode-3 {
		justify-content: flex-end;
	}
}
</style>
