<template>
	<view class="headlth">
		<view class="swiper">
			<swiper>
				<swiper-item>
					<image src="https://static.hshuishang.com/doorToDoor/door_img.png" mode="" />
				</swiper-item>
			</swiper>
		</view>

		<view class="tabList">
			<view class="tabItem" v-for="(item, index ) in cateList" :key="index" @click="jump(item.cate_id)">
				<view class="tabImg">
					<image :src="item.photo" mode="heightFix" />
				</view>
				<view class="tabName">
					{{item.cate_name}}
				</view>
			</view>
		</view>

		<view class="gray"></view>

		<view class="tit">
			热门服务
		</view>

		<view class="serviceTag">
			<view class="serviceTagItem" @click="jump">
				<view class="serviceTagItem_name">家政保洁</view>
				<view class="serviceTagItem_img1">
					<image src="https://static.hshuishang.com/doorToDoor/hot1.png" mode="widthFix" />
				</view>
			</view>
			<view class="serviceTagItem item2" @click="jump">
				<view class="serviceTagItem_name">专业保姆</view>
				<view class="serviceTagItem_img2">
					<image src="https://static.hshuishang.com/doorToDoor/hot2.png" mode="widthFix" />
				</view>
			</view>
			<view class="serviceTagItem item3" @click="jump">
				<view class="serviceTagItem_name">家电维修</view>
				<view class="serviceTagItem_img3">
					<image src="https://static.hshuishang.com/doorToDoor/hot3.png" mode="widthFix" />
				</view>
			</view>
			<view class="serviceTagItem item4" @click="jump">
				<view class="serviceTagItem_name">搬家拉货</view>
				<view class="serviceTagItem_img4">
					<image src="https://static.hshuishang.com/doorToDoor/hot4.png" mode="widthFix" />
				</view>
			</view>
		</view>

		<view class="gray"></view>

		<view class="tabs">
			<view :class="['tab', tabIndex == '0' ? 'active' : '']" @click="changeTab" data-tab="0">服务列表</view>
			<view :class="['tab', tabIndex == '1' ? 'active' : '']" @click="changeTab" data-tab="1">商户列表</view>
		</view>

		<view class="list" v-if="tabIndex == 0">
			<view :class="['list_item', index  === serverList.length - 1 && 'no_border']" v-for="(item, index) in serverList" :key="index">
				<view class="item_tit">
					<view class="item_tit_left">{{item.cate_name}}</view>
					<view class="item_tit_right" @click="jump(item.cate_id)">
						更多
						<image src="https://static.hshuishang.com/water_filter/filter_more.png" mode="" />
					</view>
				</view>
				<view class="item_goodsList">
					<scroll-view scroll-x="true" class="scrollView">
						<view class="item_goodsItem" v-for="(items, index) in item.appoints" :key="index" @click.stop="headerItemClick" :data-id="items.appoint_id">
							<view class="item_goodsItem_tit">
								<image :src="items.photo" mode="aspectFill" />
							</view>
							<view class="item_goodsItem_name">{{items.title}}</view>
							<view class="item_goodsItem_msg">
								￥
								<view>{{items.price}}</view>
								<text>/{{items.unit}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

		<view class="merchantList" v-if="tabIndex == 1">
			<view class="merchantItem" v-for="(item, index) in goodsList" :key="index" @click="headerShopClick(item.shop_id)">
				<view class="merchantItem_left">
					<view class="merchantItem_left_img">
						<image :src="item.photo" mode="widthFix" />
					</view>
					<view class="merchantItem_left_msg">
						<view class="merchantItem_left_msg_tit">{{item.shop_name}}</view>
						<view class="merchantItem_left_msg_add">{{item.addr}}</view>
						<view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view>
						<view class="merchantItem_left_msg_tag">{{item.tags}}</view>
					</view>
				</view>
				<view class="merchantItem_right" @click.stop="call(item.tel)">
					电话询价
				</view>
			</view>
		</view>

		<nav-footer />

	</view>



</template>

<script>
	import { NavgateTo, picUrl, request } from '../../../utils/index';
	import { apiArr } from '../../../api/communityService';
	
	export default {
		data() {
			return {
				tabList:[{
              name:"服务中心",
              img:'https://static.hshuishang.com/doorToDoor/door_icon1.png',
              url:"../ServiceMore/ServiceMore",
          },
          {
              name:"家政保洁",
              img:'https://static.hshuishang.com/doorToDoor/door_icon2.png',
              url:"../ServiceMore/ServiceMore",
          },
          {
              name:"衣物洗护",
              img:'https://static.hshuishang.com/doorToDoor/door_icon3.png',
              url:"../ServiceMore/ServiceMore",

          },
          {
              name:"家电维修",
              img:'https://static.hshuishang.com/doorToDoor/door_icon4.png',
              url:"../ServiceMore/ServiceMore",

          },
          {
              name:"跑腿服务",
              img:'https://static.hshuishang.com/doorToDoor/door_icon5.png',
              url:"../ServiceMore/ServiceMore",
          },
          {
              name:"养车用车",
              img:'https://static.hshuishang.com/doorToDoor/door_icon6.png',
              url:"../ServiceMore/ServiceMore",
          },
          {
              name:"保姆月嫂",
              img:'https://static.hshuishang.com/doorToDoor/door_icon7.png',
              url:"../ServiceMore/ServiceMore",
          },
          {
              name:"家电清洗",
              img:'https://static.hshuishang.com/doorToDoor/door_icon8.png',
              url:"../ServiceMore/ServiceMore",

          },
          {
            name:"搬家拉货",
            img:'https://static.hshuishang.com/doorToDoor/door_icon9.png',
            url:"../ServiceMore/ServiceMore",
					},
					{
							name:"家装维修",
							img:'https://static.hshuishang.com/doorToDoor/door_icon10.png',
							url:"../ServiceMore/ServiceMore",
					}, 
				],
				tabIndex:"0",
				page_num:1,
				page_size:10,
				flag:false,
				flag2:false,
				serverList:[],//服务列表
				cateList:[],
				flag:false,
				HotCate:'',

				goodsList:[],//商家列表
			}
		},
		methods: {
			async getCateList() {
				const res = await request(apiArr.getCateList, 'POST', {
					page_num: this.page_num,
					page_size: this.page_size,
					area: uni.getStorageSync('city')
				})
				let flag = false
				console.log(res, 'res');
				if (res.rows && res.rows.length == this.page_size) {
					flag = true
				} else {
					flag = false
				}
				res.rows && res.rows.forEach(item => {
					item.photo = item.photo ? picUrl + item.photo : '';
					item.appoints.forEach(items => {
						items.photo = picUrl + items.photo
					})
				})
				console.log(res, 'reresss');
				this.serverList = this.serverList.concat(res.rows || []);
				this.cateList = res.rows || [];
				this.flag = flag;
				this.page_num = this.page_num + 1;
			},
			
			// 热门服务模块， 目前改接口并未使用，热门模块写死展示
			async getHotCate(){
				const res = await request(apiArr.getHotCate, 'POST', {});
				console.log('getHotCategetHotCate', res);
				this.HotCate = res;
			},
			
			// 获取同城服务列表
			async getAllList(){
				const res = await request(apiArr.getAllList, 'POST', {
					cate_id: 0,
					page_num: 1,
					page_size: 50,
					area: uni.getStorageSync('city')
				})
				
				let flag = false
				if(res.rows && res.rows.length == this.page_size){
				  flag = true
				}else{
				  flag = false
				}
				if(res.rows){
					res.rows.forEach(item=>{
							item.photo = picUrl +  item.photo
					})
				}
				this.tabList = res.rows;
				this.flag = flag;
				this.page_num = this.page_num + 1;
			},
			
			// 获取商家列表
			async getShopList(){
				const res = await request(apiArr.getShopList, 'POST', {
					page_num: this.page_num,
					page_size: this.page_size
				});
			  if(res?.list){
					let flag2 = false
					if(res.list.length == this.page_size){
						flag2 =  true
					}else{
						flag2 = false
					}
					res.list.forEach(item=>{
						item.photo = picUrl + item.photo
					});
					this.goodsList = this.goodsList.concat(res.list || []);
					this.flag2 = flag2;
					this.page_num = this.page_num + 1;
			  }
			},
			
			jump(id){
				NavgateTo(`/packages/communityService/serviceMore/index?id=${id}`);
			},
			
			
			// tab 切换
			changeTab(e){
				const { tab } = e.currentTarget.dataset;
				this.tabIndex = tab;
				this.page_num = 1;
				this.flag = false;
				this.flag2 = false;
				this.serverList = [];
				this.goodsList = [];
			
				if(tab == 0){
					this.getCateList()
				}else{
					this.getShopList()
				}
			},
			
			headerItemClick(e) {
				const { id } = e.currentTarget.dataset;
				NavgateTo(`/packages/communityService/reservation/index?id=${id}`);
			},
			
			headerShopClick(id){
				NavgateTo(`/packages/communityService/shopDetail/index?id=${id}`);
			},
			
			
			call(e){
				console.log('11111', e);
				uni.makePhoneCall({
					phoneNumber: e,
					fail(err) {
						console.log('取消拨打', err)
					}
				})
			},

		},
		onLoad() {
			this.getCateList(); // 获取同城服务分类列表
			this.getAllList(); // 获取同城服务列表
			this.getHotCate(); // 热门服务模块
			this.getShopList(); // 获取商家列表
		},
		onReachBottom() {
			if(this.tabIndex == 0){
				 if(this.flag){
					this.getCateList()
				}
			}else{
				if(this.flag2){
					this.getShopList()
				}
			}
		},
	}
</script>

<style>
	@import url("./index.css");
</style>