<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
    "needLogin": true,
	"layout": "tabbar",
	"style": {
		// 'custom' 表示开启自定义导航栏，默认 'default'
		"navigationStyle": "default",
		"navigationBarTitleText": "选择城市"
	}
}</route>

<template>
    <view class="">
        <view class="search-box mx-30rpx mt-30rpx">
            <wd-search
				placeholder="请输入城市名称"
				placeholder-left></wd-search>
        </view>

        <view class="mt-52rpx mx-30rpx">
            <view class="text-[#333] leading-42rpx text-30rpx font-bold">当前定位</view>
            <view class="mt-40rpx">
                <view class="bg-[#F8F9FA] rounded-28rpx w-162rpx h-56rpx text-[#606266] flex items-center justify-center">
                    <wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
                    <view class="text-26rpx text-[#606266] leading-36rpx">{{ city || LOCATION_DEFAULT_CITY }}</view>
                </view>
            </view>
        </view>

         <view class="mt-50rpx mx-30rpx">
            <view class="text-[#333] leading-42rpx text-30rpx font-bold">已开通城市</view>
            <view class="mt-40rpx grid grid-cols-4 gap-20rpx w-full">
                <view class="bg-[#F8F9FA] rounded-28rpx h-56rpx text-[#606266] flex items-center justify-center"  
				v-for="(item, index) in openCityList" :key="index"
				@click="City.handleChooseCity(item)"
				>
                    <wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
                    <view class="text-26rpx text-[#606266] leading-36rpx">{{ item.name }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
	import { router } from '@/utils/tools'
	import { getOpenCityList } from '@/api/tea-room'
	import { LOCATION_CITY_KEY, LOCATION_LAT_KEY, LOCATION_LNG_KEY } from '@/hooks/useLocation'

	const OSS = inject('OSS')

	// 经纬度
	const latitude = ref<number>(0)
	const longitude = ref<number>(0)
	const city = ref<string>('')

	// 已开通城市列表
	const openCityList = ref<Array<any>>([])

	onLoad((args) => {
		if (args.lat && args.lng) {
			latitude.value = Number(args.lat)
			longitude.value = Number(args.lng)
		}

		City.handleInit()
	})

    const City = {
		handleInit: async () => {
			city.value = uni.getStorageSync(LOCATION_CITY_KEY)
			const res = await getOpenCityList()
			openCityList.value = res.list
		},

		/**
		 * 选择城市
		 */
		handleChooseCity: (item: any) => {

			const params = {
                latitude: item.latitude,
                longitude: item.longitude,
                city: item.name
            }
            uni.$emit('locationUpdate', params)

			uni.setStorageSync(LOCATION_LAT_KEY, item.latitude)
			uni.setStorageSync(LOCATION_LNG_KEY, item.longitude)
			uni.setStorageSync(LOCATION_CITY_KEY, item.name)
			router.navigateBack()
		}
	}

</script>

<style lang="scss">
page {
    background-color: #fff;
}

.search-box {
	display: flex;
	height: 100%;
	margin-right: 32px;
	--wot-search-padding: 0;
	--wot-search-side-padding: 0;

	:deep() {
		.wd-search {
			background: transparent !important;
			width: 100% !important;
		}

        .wd-search__block {
            height: 72rpx;
			background-color: #F8F9FA !important;
		}

		.wd-search__input {
			// #ifndef MP
			padding-right: 0 !important;
			// #endif
		}
	}
}
</style>
