<template>
	<view class="page-index">
		<view class="header">
			<view class="my-location flex-center">
				<text class="icon-location iconfont"></text>
				<text class="address">通力大厦</text>
			</view>
			<view class="search-box">
				<view class="search-input-wrapper flex-center" @click="showSearchPage">
					<text class="iconfont icon-search"></text>
					<view class="input">{{placeholder}}</view>
				</view>
			</view>
		</view>
		<view class="foods-category">
			<view class="category-item" v-for="c in categroyList" @click="loadFoodByCid(c.id)" :key="c.id">
				<view class="cover">
					<image :src="c.cover" mode=""></image>
				</view>
				<view class="title">{{c.id}}{{c.title}}</view>
			</view>
		</view>
		<FoodsList v-if="foodsList" :foodsList="foodsList"></FoodsList>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, onUnmounted, ref } from "vue";
	import { API_URL } from "../../service/api";

	const foodsList = ref([])

	const categroyList = ref<{
		id : number; title : string; cover : string
	}[]>([])


	uni.request({
		url: API_URL + '/api/category',
		success(ret) {
			categroyList.value = ret.data.data
			// console.log(ret.data.data)
		}
	})
	uni.request({
		url: API_URL + '/api/food/recommend',
		success(ret) {
			foodsList.value = ret.data.data
			// console.log(ret.data.data)
		}
	})

	function loadFoodByCid(cid : any) {
		uni.navigateTo({
			url: `/pages/index/category?cid=${cid}`
		})

	}

	function showSearchPage() {
		uni.navigateTo({
			url: '/pages/index/search'
		})
	}


	const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
	const placeholder = ref('搜索 鱼香肉丝 试试')


	let timer : any, foodsIndex = 1;
	onMounted(() => {
		timer = setInterval(() => {
			placeholder.value = `搜索 ${foodsName[foodsIndex]} 试试`
			foodsIndex++;
			if (foodsIndex >= foodsName.length) {
				foodsIndex = 0;
			}
		}, 5000)
	})
	onUnmounted(() => {
		clearInterval(timer)
	})
</script>

<style lang="scss" scoped>
	.page-index {
		// min-height: 100vh;
	}

	.header {
		background-color: $uni-color-primary;
		padding: 10px 15px;
		color: white;
	}

	.my-location {
		cursor: pointer;
		font-size: 12px;
		max-width: 100px;
		overflow: hidden;
	}

	.address {
		margin-right: 5px;
	}

	.search-box {
		flex: 1;
	}

	.icon-search {
		color: #666;
		font-size: 20px;
		transform: translateY(1px);
		margin-right: 5px;
	}

	.search-input-wrapper {
		background-color: #fff;
		border-radius: 40px;
		height: 30px;
		margin-top: 10px;
		padding: 0 15px 0 5px;

		.input {
			width: 100%;
			color: #666;
			font-size: 14px;
		}
	}

	// 分类
	.foods-category {
		overflow: hidden;
	}

	.category-item {
		width: 25%;
		text-align: center;
		float: left;
		font-size: 14px;
		padding: 10px;
		box-sizing: border-box;

		image {
			width: 32px;
			height: 32px;
		}
	}
</style>