<template>
  <view>
    <custom-navbar
      title="附近门店"
      :leftImg="'/static/images/whiteBack.png'"
      :showUser="true"
      backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)"
      titleColor="#fff"
	  borderBottom="none"
    ></custom-navbar>
    <searchBox placeholder="搜索门店" v-model="queryData.title" @confirm="searchConfrim" @search="searchConfrim"></searchBox>   
      <serviecFirstTab
      :tabs="tabs"
      :activeId="activeId"
      activeColor="#E8101E"
      @tab-click="tabClick"

    ></serviecFirstTab>
    <CommonList
      ref="groupRef"
      :apiUrl="'/user/getSearchList'"
      :initialQuery="queryData"
      :listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 360}rpx)`"
    >
      <template #listData="{ list }">
		   <shopCard :shop="item" v-for="(item, index) in list" :key="index"></shopCard>
      </template>

      <!-- 空数据状态 -->
      <template #empty>
        <noData></noData>
      </template>
    </CommonList>
    
  </view>
</template>

<script>
import request from "../../utils/request";
import serviecFirstTab from "@/components/common/service-first-tab.vue";
import searchBox from "./components/search-box.vue";
import FilterPanel from "./components/intmentFilter.vue";
import CommonList from "@/components/common/CommonList.vue";
import shopCard from "./components/shopCard.vue";
export default {
  components: {
    searchBox,
    serviecFirstTab,
    FilterPanel,
    CommonList,
    shopCard
  },
  data() {
    return {
      statusBarHeight: 0,
      queryData: {
        type: 2,
        userLngz:"",
        userLat:"",
      },
      activeId: "",
      tabs: [],
    };
  },
  onLoad() {
    this.getLocation();
	const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.getFirstClass();
  },
  methods: {
	  searchConfrim(e){
	  	this.search();
	  },
    getLocation(){
       let addressRes = {};
     let userAdrees = uni.getStorageSync("userAdrees");
        if (userAdrees) {
          addressRes = userAdrees.addressRes;
        } else {
          addressRes = getApp().globalData.addressRes;
        }
        this.queryData.userLat = addressRes.latitude;
      this.queryData.userLngz = addressRes.longitude;
    },
    search() {
      this.$refs.groupRef.manualRefresh(this.queryData);
    },
    tabClick(id) {
      this.activeId = id;
	  this.queryData.first_class =  id;
	  this.search();
    },
    getFirstClass() {
      // 加载一级类目
      request.post("/user/firstclass").then((res) => {
        this.queryData.first_class = res.data[0].id;
        this.activeId = res.data[0].id;
        this.tabs = res.data;
		this.search();
      });
    },
    handleFilter(data) {
      console.log("筛选结果：", data); // data包含date、distance的选中值
      // 此处可根据筛选结果请求数据、更新页面等
    },
  },
};
</script>

<style lang="less">
 page {
 	 background: linear-gradient(to bottom, #ffffff , #fafafa);
  }

//firstTab样式
.service-first-tab {
  border-bottom: none;
  padding-bottom: 27rpx;
  border-bottom: none;
  background-color: #fff!important;
  box-shadow:none;
}

//list样式
.common-list{
  background-color: #fafafa!important;
  padding-top: 20rpx;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  ::v-deep .list-container{
    padding: 0 20rpx;
  }
  ::v-deep .list-scroll{
	  margin-top: 0;
  }
}


</style>
