<template>
	<view :style="{paddingTop:`${titleStyle.top}px`}"
		style="background: linear-gradient(180deg, #FF4A2B 0%, rgba(255,65,65,0) 25%);" class="page_body">
		<view class="home_container">
			<view :style="{height:`${titleStyle.height}px`}" class="home_header flex jc ac">首页</view>
			<view class="home_input_container">
				<uni-easyinput @clear='seach' @confirm='seach' prefixIcon="search" trim="all" v-model="productName" placeholder="请输入内容"></uni-easyinput>
			</view>
			<!-- 轮播图 -->
			<view  :style="{order:mobile.GUANGGAO.index}" v-if="mobile&&mobile.GUANGGAO&&mobile.GUANGGAO.infoList.length" class="home_swiper_container">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item v-for="item in mobile.GUANGGAO.infoList">
						<image  :src="item.position_image"></image>
					</swiper-item> 
				</swiper>
			</view>
			<!-- 菜单列表 -->
			<view :style="{order:mobile.FENLEI.index}" v-if="mobile&&mobile.FENLEI&&mobile.FENLEI.infoList.length" class="home_menu_container">
				<view class="menu_section">
					<view @click="goList('classify',item.id)" v-for="(item,index) in mobile.FENLEI.infoList"   class="menu_item">
						<image :src="item.icon"></image>
						<view  class="name">{{item.categoryName}}</view>
					</view> 
				</view>
			</view>
			<!-- 新鲜好物 -->
			<view :style="{order:mobile['1'].index}" v-if="mobile&&mobile['1']&&mobile['1'].infoList.length" class="home_fresh_container">
				<view @click="goList('model',mobile['1'].type)" class="fresh_title flex jw ac">
					<view class="fresh_title_left strong">{{mobile['1'].moduleName}}</view>
					<view class="fresh_title_right flex ac">更多好物 <uni-icons type="right" size="12"></uni-icons> </view>
				</view>
				<view class="home_fresh_item_container flex">
					<view @click="navToDetailPage(item)"  v-for="item in mobile['1'].infoList" class="home_fresh_item">
						<view class="home_fresh_item_img flex ac jc">
							<image mode="widthFix"
								:src="item.url">
							</image>
						</view>
						<view class="home_fresh_item_name flex jc">{{item.productName}}</view>
						<view class="home_fresh_item_price flex jc ac">
							<span>¥{{Number(item.price).toFixed(2)}}</span>
 						</view>
					</view> 
				</view>
			</view>
			<!-- 人气推荐 -->
			<view :style="{order:mobile['2'].index}" v-if="mobile&&mobile['2']&&mobile['2'].infoList.length" class="home_recommend_container model_container">
				<view @click="goList('model',mobile['2'].type)" class="model_title flex jw ac">
					<view class="model_title_left strong">{{mobile['2'].moduleName}}</view>
					<view class="model_title_right flex ac">更多推荐 <uni-icons type="right" size="12"></uni-icons> </view>
				</view>
				<view class="home_recommend_item_container">
					<view @click="navToDetailPage(item)"  v-for="item in mobile['2'].infoList" class="home_recommend_item  flex ac">
						<view class="model_item_img">
							<image mode="widthFix" :src="item.url">
							</image>
						</view>
						<view style="padding: 0 25rpx;box-sizing: border-box;"
							class="home_recommend_item_center oneflex">
							<view class="home_recommend_item_item_name">{{item.productName}}</view>
							<view class="model_item_price flex ac">
								<span>¥{{Number(item.price).toFixed(2)}}</span>
 							</view>
						</view>
						<view class="home_recommend_item_right flex ac jc">
							兑换
						</view>
					</view> 
				</view>
			</view>
			<!-- 猜你喜欢 -->
			<view :style="{order:mobile['3'].index}" v-if="mobile&&mobile['3']&&mobile['3'].infoList.length" class="home_guess_container model_container"> 
				<view class="home_guess_title flex jc strong">{{mobile['3'].moduleName}}</view>
				<view class="home_guess_item_container flex">
					<view @click="navToDetailPage(item)" v-for="item in mobile['3'].infoList" class="home_guess_item">
						<view style="width: 300rpx; height: 300rpx;" class="model_item_img">
							<image mode="widthFix"
								:src="item.url">
							</image>
						</view>
						<view class="home_guess_item_footer">
							<view class="model_item_name flex jc">{{item.productName}} </view>
							<view class="model_item_price flex jc">
								<span>¥{{Number(item.price).toFixed(2)}}</span>
								<!-- <span style="margin-left: 25rpx;text-decoration-line:line-through;color: #999999;font-size: 20rpx">¥89</span> -->
							</view>
						</view>
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from '@/api/home.js'
import homeApi from '@/api/home.js'
	import station from '@/api/station.js'
	import stationItem from "@/components/stationItem/stationItem.vue"
	import tool from '../../utils/tool.js'
	export default {
		components: {
			stationItem,
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {   
				productName:"",
				mobile:null,
				user: uni.getStorageSync('user'),  
				pageData: {
					currentPage: 1,
					stationName: '', 
					sortType: ''
				},
				viewData: null,
				titleStyle: {},
				selectOptions: 0, 
			}
		},
		created() {
			this.init()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.seach()
		},
		onShow() {
			this.getPosition()
		},
		methods: {
			async getPosition() { 
				await this.tool.userLocationChenk().then(res => {}).catch(err => {});
				await this.tool.getLocation().then(res => {  }).catch(err => {  });
			},
			//详情
			navToDetailPage(item) {
				console.log(item)
				//测试数据没有写id，用title代替
				let id = item.productId;
				uni.navigateTo({
					url: `/Product/pages/product?id=${id}`
				})
			},
			goList(type,data){
				if(type=='classify'){
					uni.navigateTo({
						url:`/Product/pages/list?categoryOneId=${data}`
					})
				}else if(type=='model'){
					uni.navigateTo({
						url:`/Product/pages/list?type=${data}`
					})
				}else{
					uni.navigateTo({
						url:"/Product/pages/list"
					})
				}
				
			},
			getMobile(){
				homeApi.getMobile({
					productName:this.productName
				}).then(res=>{
					if(res.code==20000){
						this.mobile = Object.fromEntries(res.data.map((item,index)=> [item.type,Object.assign(item,{index:index+1})]));
					} 
				}).finally(()=>{ 
					uni.stopPullDownRefresh();
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			showInit() {},
			refresherrefresh() {
				this.refresherTriggered = true;
				this.seach()
			},
			seach() {
				this.pageData.currentPage = 1;
				this.getMobile()
			},
			scrolltolower() {
				this.pageData.currentPage += 1;
				this.getList()
			},
			async init() {
				this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度  
				// await this.getPosition();
				// this.getList();
				this.getMobile()
			},
			async getPosition() {
				// if(!this.user){ 
				// 	return  Promise.resolve();
				// }
				await this.tool.userLocationChenk().then(res => {}).catch(err => {});
				await this.tool.getLocation().then(res => {
					this.location = uni.getStorageSync('location')
				}).catch(err => {
					this.location = null
				});
			},
			async getList() {
				if (this.location) {
					this.pageData.stationLat = this.location.latitude;
					this.pageData.stationLng = this.location.longitude;
				}
				station[this.token ? 'getNearbySites' : 'getTouristSites'](this.pageData).then(res => {
					if (res.data.length == 0) {
						setTimeout(() => {
							uni.showToast({
								title: '到底了',
								icon: 'none'
							})
						}, 500)
					}
					if (res.code == 20000) {
						this.tool.difTags(res);
						if (this.pageData.currentPage !== 1) {
							let data = new this.tool.Anticorrosive(res, page);
							this.viewData.list = this.viewData.list.concat(data.list)
						} else {
							this.viewData = new this.tool.Anticorrosive(res, page);
							// this.viewData.list = [...this.viewData.list]
						}
					}
					this.refresherTriggered = false
				})
			}
		}
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	::v-deep .is-input-border {
		border: none !important;
		border-radius: 25rpx !important;
	}

	@import 'index.scss';
	@import '../index/index.scss';
</style>