<template>
  <view class="container">
    <!-- <navbar id="navbar" :config="config" backColor="#888888"></navbar> -->
    <uv-navbar
      title="本地生活"
      leftIconSize="0"
      :border="false"
      bgColor="#fbcd17"
      titleStyle="font-weight: 700;color: #1A1A1A;"
    ></uv-navbar>
    <uv-sticky>
      <view class="search-top">
        <view class="city-text" @click="addressShow = true">
          <!-- <image mode="widthFix" src="/static/shop/location-icon.png"></image> -->
          <uv-icon name="map" color="#000000" size="34"></uv-icon>
          <view>{{ cityName }}</view>
          <uv-icon name="arrow-right" color="#000000" size="30"></uv-icon>
        </view>
        <view class="searchBox">
          <uv-search
            v-model="param.shop_name"
            shape="round"
            :clearabled="false"
            :showAction="false"
            height="80"
            bg-color="#f7f7f7"
            border-color="#D9D9D9"
            placeholder-color="#CCCCCC"
            search-icon="/static/shop/search-icon.png"
            :customStyle="searchCustomStyle"
            :boxStyle="searchBoxStyle"
            :inputStyle="searchInputStyle"
            @search="onSearch"
            @custom="onSearch"
          >
            <template #suffix>
              <view class="search-action" @tap.stop="onSearch">搜索</view>
            </template>
          </uv-search>
        </view>
      </view>
    </uv-sticky>
    <!-- <view style="height: 110rpx;"></view> -->
    <view class="u-skeleton">
      <view class="banner" v-if="bannerList.length > 0 || skeletonShow">
        <!-- <image src="/static/shop/banner.png" mode="aspectFill"></image> -->
        <uv-swiper
          class="u-skeleton-fillet"
          :list="bannerList"
          name="cover"
          height="360"
          :mode="bannerList.length > 1 ? 'round' : 'none'"
          bg-color="transparent"
          @click="bannerClick"
        ></uv-swiper>
      </view>
      <view
        class="menu"
        v-if="iconList.length > 0 || skeletonShow"
      >
        <swiper
          class="swiper u-skeleton-fillet"
          :indicator-dots="true"
          :autoplay="false"
          :current="current"
          :style="{ height: menuHeight }"
          @change="swiperChange"
        >
          <swiper-item class="swiper-item" v-for="(el, k) in iconList" :key="k">
            <view class="item" v-for="(v, i) in el" :key="i" @click="goShop(v)">
              <view class="img">
                <image
                  class="u-skeleton-fillet"
                  :src="v.icon"
                  mode="widthFix"
                ></image>
              </view>
              <text class="u-skeleton-fillet">{{ v.name || "加载中" }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="con-box">
        <!-- <uv-section class="u-skeleton-fillet" title="附近门店" font-size="36" :bold="true" color="#333333" :show-line="false"
          sub-title="查看更多" sub-color="#333333" @click="goShop()">
        </uv-section> -->
        <view class="store-bg">
          <image class="store-bg-image" src="/static/store.png" mode="">
          </image>
          <view class="store-bg-btn" @click="goShop()">
            <text class="text">查看更多</text>
            <uv-icon name="arrow-right" color="#fbbd1c" size="24"></uv-icon>
          </view>
        </view>
        <view class="items">
          <view
            class="item"
            v-for="(v, index) in listData"
            :key="v.shop_id"
            @click="goDetails(v)"
          >
            <view class="shop-img">
              <image
                class="u-skeleton-fillet"
                :src="v.logo"
                mode="aspectFill"
              ></image>
            </view>
            <view class="right">
              <view class="title u-skeleton-fillet">{{
                v.shop_name || "加载中"
              }}</view>
              <view class="score-box u-skeleton-fillet">
                <view class="score">
                  <rate :value="Math.round(v.average || 0)"></rate>
                </view>
                <text class="score-text"
                  >{{ v.average ? v.average.toFixed(2) : "" }}分</text
                >
                <text class="ju"
                  >距离：{{
                    Math.round((v.distance / 1000) * 100) / 100
                  }}KM</text
                >
              </view>
              <view class="address-box u-skeleton-fillet">
                <view class="left">
                  <!-- <image class="location1" :src="$getImgPath('/static/shop/location-icon.png')" mode="widthFix">
                  </image> -->
                  <uv-icon name="map" color="#999999" size="34"></uv-icon>
                  <view class="district">{{
                    v.map_punctuation || "商户暂无地理位置"
                  }}</view>
                </view>
                <view class="goShopping">
                  <text class="iconfont3">&#xe787;</text>
                  <text class="text">去逛逛</text>
                </view>
              </view>
              <!-- <view class="location2-box">
              <image class="location2" src="/static/convenienceService/location2.png" mode="widthFix">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
            </view>
          </view>
        </view>
      </view>
      <view>
        <noData v-if="listData.length <= 0" :config="{ top: 2 }"></noData>
      </view>
      <!-- <uv-loadmore :status="loadStatus" /> -->
      <uv-skeleton
        :loading="skeletonShow"
        :animation="true"
        bgColor="#FFF"
      ></uv-skeleton>
    </view>
    <!-- 选择地区 -->
    <uv-select
      v-model="addressShow"
      mode="mutil-column-auto"
      :list="cityTree"
      @confirm="addressConfirm"
    >
    </uv-select>
    <!-- <entrepreneurship-zone-tabbar :current="2"></entrepreneurship-zone-tabbar> -->
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import throttle from "@/uni_modules/uv-ui-tools/libs/function/throttle.js";
import rate from "@/components/rate/rate.vue";
import noData from "@/components/noData/noData.vue";

const $http = uni.$http || {
  get: (url, params) => uni.$uv.http.get(url, { params }),
  post: (url, data) => uni.$uv.http.post(url, data),
};
const $mUtil = uni.$mUtil;

const listData = ref([]);
const cityName = ref("洪山区");
const addressShow = ref(false);
const param = reactive({
  shop_name: "",
  lon: "",
  lat: "",
  area_code: "",
  address: "",
});
const cityTree = ref([]);
const iconList = ref([]);
const bannerList = ref([]);
const current = ref(0);
const skeletonShow = ref(true);

const menuHeight = computed(() => {
  const items = iconList.value[current.value] || [];
  return items.length > 5 ? "350rpx" : "150rpx";
});

const chunk = (arr, size) => {
  const res = [];
  for (let i = 0; i < arr.length; i += size) res.push(arr.slice(i, i + size));
  return res;
};

const goShop = (item = {}) => {
  uni.navigateTo({
    url:
      "/pages/nearbyShop/list?id=" +
      (item.id || "") +
      "&cityName=" +
      cityName.value +
      "&address=" +
      (param.address || "") +
      "&area_code=" +
      (param.area_code || ""),
  });
};

const getBanner = () => {
  return $http.get("/ad/ad/getByCode/localMerchant-banner").then((res) => {
    if (res && res.code == 200) {
      bannerList.value = res.list || [];
    } else {
      bannerList.value = [];
    }
  });
};

const bannerClick = (index) => {
  const item = bannerList.value[index];
  if (!item) return;
  $mUtil?.imgLink?.(item);
};

const getCitys = () => {
  return $http.get("/cnarea/tree-lbs").then((res) => {
    if (res && res.code == 200) {
      const list = res.tree?.children || [];
      list.forEach((v) => {
        if (!v.children || v.children.length <= 0) v.children = [{}];
      });
      cityTree.value = list;
    }
  });
};

const getTypeList = () => {
  return $http.get("/union/business/classify/list").then((res) => {
    if (res && res.code == 200) {
      const list = res.list || [];
      iconList.value = chunk(list, 10);
      current.value = 0;
    } else {
      iconList.value = [];
    }
  });
};

const getLocation = () =>
  new Promise((resolve, reject) => {
    uni.getLocation({
      type: "gcj02",
      geocode: true,
      success: resolve,
      fail: reject,
    });
  });

const getList = () => {
  uni.showLoading({ title: "努力加载中...", mask: true });
  return $http
    .get("/service/goods/nearby", { ...param })
    .then((res) => {
      if (res && res.code == 200) {
        listData.value = res.list || [];
      } else {
        listData.value = [];
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const getLoca = async () => {
  try {
    const res = await getLocation();
    param.lon = res.longitude;
    param.lat = res.latitude;
  } catch (e) {
    param.lon = "";
    param.lat = "";
  }
  await getList();
};

const swiperChange = (e) => {
  if (!e) return;
  current.value = e.detail.current;
};

const addressConfirm = (e) => {
  const picked = [...(e || [])].reverse().find((i) => i && i.value) || e?.[0];
  cityName.value = picked?.label || cityName.value;
  param.area_code = picked?.value || "";
  param.address = "";
  getList();
};

const goDetails = (v) => {
  uni.navigateTo({
    url: "/pages/convenienceService/shopDetails?shopId=" + v.shop_id,
  });
};

const search = () => getList();
const onSearch = throttle(search, 1000);

const searchCustomStyle = {
  position: "relative",
};
const searchBoxStyle = {
  paddingLeft: "27rpx",
  borderRadius: "36rpx",
};
const searchInputStyle = {
  marginLeft: "22rpx",
  paddingRight: "20rpx",
};

const initPage = async () => {
  skeletonShow.value = true;
  await Promise.allSettled([getCitys(), getTypeList(), getBanner(), getLoca()]);
  skeletonShow.value = false;
};

onLoad(() => {
  initPage();
});

onPullDownRefresh(() => {
  Promise.allSettled([getTypeList(), getBanner(), getLoca()]).finally(() => {
    uni.stopPullDownRefresh();
  });
});
</script>

<style lang="scss" scoped>
.container {
  .search-top {
    // position: fixed;
    width: 100%;
    // height: 110rpx;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 0 30rpx 26rpx 30rpx;
    background-color: #fbcd17;
    // z-index: 3;
  }

  .city-text {
    margin-right: 12rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    view {
      max-width: 100rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: 700;
    }

    image {
      width: 26rpx;
      height: 36rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }

  .searchBox {
    position: relative;
    flex: 1;
    // width: 580rpx;
    height: 80rpx;

    image {
      width: 35rpx;
      height: 35rpx;
    }

    .search-action {
      width: 124rpx;
      height: 70rpx;
      background: #fbd415;
      border-radius: 35rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5rpx;
    }
  }
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  line-height: 90rpx;
  z-index: 9;
  background-color: #fff;

  .title {
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #1a1a1a;
  }

  .left {
    position: absolute;
    top: 50%;
    left: 30rpx;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #1a1a1a;
    transform: translateY(-50%);

    .city-icon {
      width: 19rpx;
      height: 12rpx;
      margin-left: 5rpx;
    }
  }
}

.banner {
  width: 100%;
  height: 350rpx;
  // padding: 0rpx 30rpx 0;
  margin-bottom: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }

  ::v-deep uni-swiper {
    height: 350rpx !important;
  }
}

.menu {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  flex-wrap: wrap;
  padding: 0 30rpx;
  margin: 22rpx 0;

  .swiper {
    width: 100%;
    height: auto;
    transition: all 0.3s;

    ::v-deep .uni-swiper-dots-horizontal {
      bottom: 0;

      .uni-swiper-dot-active {
        background-color: #fa6138;
      }
    }
  }

  .swiper-item {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin-bottom: 20rpx;

    .img {
      width: 94rpx;
      height: 94rpx;
      margin-bottom: 13rpx;
      // border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    text {
      width: 100%;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // .item:nth-child(5n) {
  //   margin-right: 0;
  // }
}

.con-box {
  // padding: 0 0;
  background: linear-gradient(180deg, #fff8e3, rgba(255, 249, 233, 0) 200rpx);

  .store-bg {
    width: 750rpx;
    height: 118rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    background: url("/static/store_bg.png") no-repeat;
    background-size: 100% 117rpx;

    .store-bg-image {
      width: 141rpx;
      height: 33rpx;
    }
    .store-bg-btn {
      width: 165rpx;
      height: 58rpx;
      background: #ffffff;
      border-radius: 29rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #fbbd1c;
    }
  }

  .u-section {
    margin-bottom: 27rpx;

    ::v-deep .uicon-arrow-right:before {
      color: #666;
    }
  }

  .items {
    padding: 0 30rpx;
    .item {
      display: flex;
      align-items: center;
      padding: 25rpx 0;
      // border-bottom: 1rpx solid #e6e6e6;

      .shop-img {
        width: 162rpx;
        height: 158rpx;
        margin-right: 40rpx;
        border-radius: 10rpx;
        overflow: hidden;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        width: 0;

        .score-box,
        .address-box,
        .location2-box {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
        }

        .location1,
        .location2 {
          width: 20rpx;
          height: 27rpx;
          flex-shrink: 0;
          margin-right: 9rpx;
        }

        .light-start,
        .startt {
          width: 30rpx;
          height: 30rpx;
          margin-right: 12rpx;
        }

        .title {
          margin-bottom: 18rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          color: #1a1a1a;
        }

        .score-box {
          display: flex;
          align-items: normal;
          margin-bottom: 10rpx;
          font-family: PingFang SC, PingFang SC-Semibold;
          color: #333333;

          .score {
            flex-shrink: 0;
          }

          .score-text {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: left;
            color: #333333;
            flex-shrink: 0;
          }

          .ju {
            margin-left: 23rpx;
            font-size: 24rpx;
            color: #808080;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .address-box {
          // margin-bottom: 10rpx;
          font-family: PingFang SC;
          color: #666666;
          justify-content: space-between;

          .left {
            flex: 1;
            width: 0;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
          }

          .goShopping {
            display: flex;
            align-items: center;
            font-size: 40rpx;
            color: #fa6138;
            flex-shrink: 0;

            .text {
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Medium;
              font-weight: 500;
              text-align: left;
              color: #666666;
            }
          }

          .district {
            color: #1a1a1a;
            margin-right: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .location2-box {
          color: #333333;

          view {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
