<template>
  <div class="container">
    <div class="local">
      <image
        id="local"
        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
        mode="aspectFill"
      ></image>
      {{ address }}
      <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
    </div>

    <div class="search">
      <div class="searchBox">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
          mode="aspectFill"
        ></image>
        <input type="text" placeholder="请输入您想搜索的内容" />
      </div>
    </div>

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

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

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

    <div class="merchantList">
      <div
        class="merchantItem"
        v-for="item in merchatList"
        :key="item.id"
        @click="Info(item)"
      >
        <div class="merchantItem_left">
          <image :src="picUrl + item.bigImg[0]" mode="aspectFill"></image>
        </div>
        <div class="merchantItem_right">
          <div class="merchantItem_right_tit">
            <div class="merchantItem_right_tit_left">
              {{ item.merchant_name }}
            </div>
            <div class="merchantItem_right_tit_right">
              {{ item.distances }}
            </div>
          </div>
          <div class="merchantItem_right_con">
            <div class="merchantItem_right_con_left">
              <div class="startList">
                <image
                  v-for="index in 5"
                  :src="
                    index < item.rating
                      ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png'
                      : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'
                  "
                  mode="aspectFill"
                ></image>
              </div>
              <div
                class="merchangtItem_tag"
                v-if="item.refund_property_fee_ratio"
              >
                买单反物业费
              </div>
              <div
                class="merchangtItem_tag"
                v-if="item.refund_user_points_ratio"
              >
                买单反积分
              </div>
            </div>
            <div class="merchantItem_right_con_right">
              <image
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
                mode="aspectFill"
              ></image>
              点评
            </div>
          </div>
          <div class="merchantItem_right_add">
            {{ item.comAddress }}
          </div>
        </div>
      </div>
    </div>

    <div class="btnList">
      <div class="btn_left">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png"
          mode="aspectFill"
        ></image>
        到店服务券
      </div>
      <div class="line"></div>
      <div class="btn_right">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png"
          mode="aspectFill"
        ></image>
        快捷支付记录
      </div>
    </div>
    <div class="btnList_after"></div>

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

<script>
import {
  request,
  picUrl,
  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: [],
    };
  },
  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);
  },

  onReachBottom() {
    if (this.flag) {
      this.getMechantList();
    }
  },

  methods: {
    swiperChange(e) {
      this.currentIndex = e.detail.current;
    },

    checkItem(index) {
      this.$set(this.checkedItems, index, !this.checkedItems[index]);
    },
    //查询商家分类
    async getCateList() {
      let that = this;
      await request(apiArr.getMerChantCateList, "POST").then((res) => {
        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));
        }
      });
    },
    //查询商家列表
    async getMechantList() {
      let that = this;
      await request(apiArr.getMerchantList, "POST", {
        page_num: that.page_num,
        page_size: that.page_size,
      }).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_num = this.page_num + 1;
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.merchatList = this.merchatList.concat(res.rows);
      });
    },
    //跳转商家详情
    Info(e) {
      uni.setStorageSync("merchantInfo", e);
      NavgateTo("../detail/index");
    },
  },
};
</script>

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