<template>
  <view class="container">
    <view class="localBox">
      <view class="localBoxItem">
        <view class="local">
          <image id="local"
            src="https://static.hshuishang.com/property-img-file/local_localIcon.png"
            mode="aspectFill"></image>
          {{ address }}
          <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
        </view>

        <view class="search">
          <view class="searchBox">
            <image
              src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
              mode="aspectFill"></image>
            <input type="text" v-model="searchText" placeholder="请输入您想搜索的内容" @confirm="handleSearch" />
          </view>
        </view>
      </view>
    </view>

    <view class="swiperBox">
      <swiper class="swiper" @change="swiperChange" :current="currentIndex">
        <swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
          <view class="navList">
            <view class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex" @click="changeNav(item)">
              <view class="navItemImg">
                <image :src="picUrl + item.cate_image" mode="widthFix"></image>
              </view>
              <view class="navName">{{ item.cate_name }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="dot">
        <view class="dotItem" v-for="(page, index) in swiperList" :key="index"
          :class="currentIndex == index ? 'actives' : ''"></view>
      </view>
    </view>

    <view class="lines"></view>
    <!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
            <view class="scrollView">
                <view class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
                    <image v-show="!checkedItems[index]" src="https://static.hshuishang.com/property-img-file/local_uncheck.png"
                        mode="aspectFill"></image>
                    <image v-show="checkedItems[index]" src="https://static.hshuishang.com/property-img-file/local-check.png"
                        mode="aspectFill"></image>
                    买单返岁银
                </view>
            </view>
        </scroll-view> -->

    <view class="merchantList">
      <view class="merchantItem" v-for="item in merchatList" :key="item.id" @click="Info(item)">
        <view class="merchantItem_left">
          <image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
        </view>
        <view class="merchantItem_right">
          <view class="merchantItem_right_tit">
            <view class="merchantItem_right_tit_left">
              {{ item.merchant_name }}
            </view>
            <view class="merchantItem_right_tit_right">
              {{ item.distances }}
            </view>
          </view>
          <view class="merchantItem_right_con">
            <view class="merchantItem_right_con_left">
              <view class="startList">
                <image v-for="index in 5" :key="index" :src="index < item.rating
                  ? 'https://static.hshuishang.com/property-img-file/local_start1.png'
                  : 'https://static.hshuishang.com/property-img-file/local_start2.png'
                  " mode="aspectFill"></image>
              </view>
              <view class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">
                买单返岁银
              </view>
              <view class="merchangtItem_tag" v-if="item.refund_user_points_ratio">
                买单返积分
              </view>
            </view>
            <view v-if="item.quick_purchase_enabled==1" class="merchantItem_right_con_right" @click.stop="toJump(item)">
              <image src="https://static.hshuishang.com/property-img-file/local_review.png"
                mode="aspectFill"></image>
              点评
            </view>
          </view>
          <view class="merchantItem_right_add">
            {{ item.comAddress }}
          </view>
        </view>
      </view>
    </view>

    <view class="btnList">
      <!-- <view class="btn_left">
        <image src="https://static.hshuishang.com/property-img-file/local_serverIcon.png"
          mode="aspectFill"></image>
        到店服务券
      </view> -->
      <view class="line"></view>
      <view class="btn_right" @click="toPayInfo">
        <image src="https://static.hshuishang.com/property-img-file/lcoal_payIcon.png"
          mode="aspectFill"></image>
        快捷支付记录
      </view>
    </view>
    <view class="btnList_after"></view>

    <!-- <nav-footer :current="2" /> -->
  </view>
</template>

<script>
import {
  request,
  picUrl,
  RequestUrl,
  uniqueByField,
  menuButtonInfo,
  calculateDistance,
  NavgateTo,
} from "../../../utils";

import { apiArr } from "../../../api/v2local";

export default {
  data() {
    return {
      picUrl,
      top: "",
      localHeight: "",
      swiperList: [],
      currentIndex: 0,
      checkedItems: [false, false, false, false],
      address: "",
      page_size: 10,
      page_num: 1,
      flag: false,
      merchatList: [],
      searchText: ''
    };
  },
  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    // this.top = meun.height + meun.top;
    this.localHeight = meun.height;
    this.getCateList();
    this.getMechantList();
    this.address = uni.getStorageSync("location").address;
    console.log(this.address);
  },

  onPullDownRefresh() {
    this.page_num = 1;
    this.merchatList = [];
    this.flag = false;
    this.searchText = '';
    this.getCateList();
    this.getMechantList().then(() => {
      uni.stopPullDownRefresh();
    });
  },

  onReachBottom() {
    if (this.flag) {
	  this.page_num += 1;
      this.getMechantList();
    }
  },

  methods: {
    // 跳转快捷支付记录
    toPayInfo(){
      NavgateTo("/packages/localLife/payInfo/index")
    },
    
    swiperChange(e) {
      this.currentIndex = e.detail.current;
    },

    changeNav(item) {
      NavgateTo(`/packages/localLife/classify/index?item=${JSON.stringify(item)}`)
    },


    checkItem(index) {
      this.$set(this.checkedItems, index, !this.checkedItems[index]);
    },
    //查询商家分类
    async getCateList() {
      let that = this;
      const params = {
        isShop: 1
      }
      await request(apiArr.getMerChantCateList, "POST", params).then((res) => {
        res.rows = res.rows.filter((item) => item.is_visible == 1)
        console.log(res);
        // 将数据分成每10个一组
        const chunkSize = 10;
        that.swiperList = [];
        for (let i = 0; i < res.rows.length; i += chunkSize) {
          that.swiperList.push(res.rows.slice(i, i + chunkSize));
        }
      });
    },
    //搜索商家
    handleSearch() {
      this.page_num = 1;
      this.merchatList = [];
      this.getMechantList();
    },
    //查询商家列表
    async getMechantList() {
      let that = this;
      await request(apiArr.getMerchantList, "POST", {
        page_num: that.page_num,
        page_size: that.page_size,
        merchant_name: that.searchText
      }).then((res) => {
        let latitude = uni.getStorageSync("location").lat;
        let longitude = uni.getStorageSync("location").lng;
        res.rows.forEach((item) => {
          item.bigImg = item.album_images.split(",");
          const distanceInKm = calculateDistance(
            latitude,
            longitude,
            item.latitude,
            item.longitude
          );
          item.distances =
            distanceInKm >= 1
              ? `${distanceInKm.toFixed(1)}km`
              : `${(distanceInKm * 1000).toFixed(1)}m`;

          if (item.ad) {
            item.comAddress = item.ad.ad_name.replace(/,/g, "") + item.address;
          } else {
            item.comAddress = item.address;
          }
        });
        res.rows.sort((a, b) => {
          const valueA =
            parseFloat(a.distances.replace("km", "").replace("m", "")) *
            (a.distances.includes("km") ? 1000 : 1);
          const valueB =
            parseFloat(b.distances.replace("km", "").replace("m", "")) *
            (b.distances.includes("km") ? 1000 : 1);
          return valueA - valueB;
        });

        if (res.rows.length == this.page_size) {
          this.page_size = this.page_size + 10;
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.merchatList = this.merchatList.concat(res.rows);
      });
    },
    //跳转商家详情
    Info(e) {
      uni.setStorageSync("merchantInfo", e);
      NavgateTo("../detail/index", { isLogin: false });
    },
    //跳转点评
    toJump(e) {
      NavgateTo('../comment/index');
    },

  },
};
</script>

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