<template>
  <view class="home-new">
    <!-- Header & Search -->
    <view class="header-fixed">
      <view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <view class="header-content">
        <!-- Location -->
        <view class="location-bar">
          <view class="location-inner" @click="getUserLocal">
            <view class="iconfont icon-dizhi location-icon"></view>
            <text class="location-text">{{ address }}</text>
            <view class="iconfont icon-xiangxia location-arrow"></view>
          </view>
        </view>

        <!-- Search Bar -->
        <view class="search-container">
          <input
            type="text"
            placeholder="请输入商家名称搜索"
            class="search-input"
            v-model="searchVal" />
          <view class="search-icon-left">
            <view class="iconfont icon-sousuo"></view>
          </view>
          <view class="search-btn" @click.stop="clickSearch">搜索</view>
        </view>
      </view>
    </view>

    <!-- Main Content -->
    <view class="main-content">
      <!-- Banner / Hero -->
      <view class="banner-hero">
        <!-- Background Pattern Decoration -->
        <view class="banner-decoration banner-decoration-top"></view>
        <view class="banner-decoration banner-decoration-bottom"></view>

        <view class="banner-inner">
          <view class="banner-title">
            玩赚积分<text class="banner-title-yellow">商城</text>
          </view>
          <view class="banner-subtitle-wrapper">
            <view class="banner-divider"></view>
            <text class="banner-subtitle">积分当钱花 · 兑换无上限</text>
            <view class="banner-divider"></view>
          </view>

          <view class="banner-buttons">
            <view class="banner-btn banner-btn-primary">
              <text class="banner-btn-icon">💎</text> 积分兑换
            </view>
            <view class="banner-btn banner-btn-secondary">同城兑换</view>
          </view>
        </view>
      </view>

      <!-- Quick Actions Grid -->
      <view class="nav-grid-wrapper">
        <view class="nav-grid">
          <view
            class="nav-item"
            v-for="(item, index) in navigationList"
            :key="index"
            @click="toPage(item)">
            <view class="nav-icon-wrapper">
              <image :src="item.icon" class="nav-icon" mode="aspectFit" />
            </view>
            <text class="nav-label">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- Store List -->
      <view class="store-section">
        <view class="store-header">
          <view class="store-header-line"></view>
          附近商家
        </view>

        <view class="store-list">
          <view
            class="store-item"
            v-for="(item, index) in merList"
            :key="index"
            @click="toMerDetails(item)">
            <view class="store-image-wrapper">
              <image
                :src="item.head_photo"
                class="store-image"
                mode="aspectFill" />
              <!-- <view class="store-badge" v-if="index < 3">严选</view> -->
            </view>
            <view class="store-info">
              <view class="store-name">{{ item.name }}</view>
              <view class="store-rating">
                <view class="rating-stars">
                  <text class="stars-text">★★★★★</text>
                  <text class="rating-score">5.0分</text>
                </view>
                <text class="rating-divider">|</text>
                <text class="rating-sales">月售 1000+</text>
              </view>
              <view class="store-distance">
                <text class="distance-placeholder">.</text>
                <text class="distance-text">
                  距离我{{
                    calculateDistance(
                      userLocalNum.t,
                      userLocalNum.l,
                      Number(item.lat),
                      Number(item.lon),
                    )
                  }}
                </text>
              </view>
            </view>
          </view>

          <!-- Empty State -->
          <view v-if="merList.length === 0" class="store-empty">
            暂无附近商家
          </view>
        </view>
      </view>
    </view>

    <Popup :imgArr="imgList" />
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { ref } from 'vue';
import { getHomeList } from '@/api/home';
import { getMerList } from '@/api/goods';
import { bindParent } from '@/api/user';
import { calculateDistance } from '@/utils';
import Popup from '@/components/Popup.vue';

const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight || 20;

const address = ref('获取位置中...');
const searchVal = ref('');
const navigationList = ref<any[]>([]);
const merList = ref<any[]>([]);
const pageVal = ref({
  page: 1,
  total: 0,
});
const userLocalNum = ref({
  l: 0,
  t: 0,
});

const imgList = ref([require('../../../static/zhenggai.png')]);

// Lifecycle
Taro.useLoad(() => {
  getPrivacy();
  getUserLocal();
  getNavLists();
  checkBindParent();
});

Taro.useShareAppMessage(() => ({
  title: '捷兑通',
  path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
  imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.jpg',
}));

Taro.useReachBottom(() => {
  if (merList.value.length >= pageVal.value.total) {
    if (pageVal.value.total > 0) {
      Taro.showToast({ title: '没有更多了', icon: 'none' });
    }
    return;
  }
  pageVal.value.page += 1;
  fetchMerList();
});

// Methods
const checkBindParent = async () => {
  if (Taro.getStorageSync('token') && Taro.getStorageSync('bind_id')) {
    try {
      const res: any = await bindParent({
        uid: Taro.getStorageSync('bind_id'),
      });
      Taro.showToast({
        title: res.msg,
      });
      Taro.removeStorageSync('bind_id');
    } catch (error) {
      Taro.removeStorageSync('bind_id');
    }
  }
};

const getPrivacy = () => {
  Taro.getPrivacySetting({
    success: res => {
      if (res.needAuthorization) {
        Taro.requirePrivacyAuthorize({
          success: () => console.log('用户同意授权'),
          fail: () => {
            console.log('用户拒绝授权');
            // Taro.exitMiniProgram();
          },
        });
      }
    },
  });
};

const getUserLocal = () => {
  Taro.getLocation({
    type: 'wgs84',
    success: res => {
      userLocalNum.value.l = res.longitude;
      userLocalNum.value.t = res.latitude;
      fetchAddress(res.latitude, res.longitude);
      // Refresh list with location
      pageVal.value.page = 1;
      merList.value = [];
      fetchMerList();
    },
    fail: () => {
      address.value = '未能获取定位';
      // Load list anyway
      fetchMerList();
    },
  });
};

const fetchAddress = (lat, lon) => {
  Taro.request({
    url: `https://api.tianditu.gov.cn/geocoder?postStr={'lon':${lon},'lat':${lat},'ver':1}&type=geocode&tk=42db4f3dfd1a18d31e73ee90aa2ce054`,
    method: 'GET',
    success: res => {
      const { msg, result } = res.data;
      if (msg === 'ok') {
        address.value = `${result.addressComponent.county}${result.addressComponent.town}${result.addressComponent.address}`;
      }
    },
  });
};

const getNavLists = async () => {
  const defaults = [
    {
      type: 1,
      icon: '//p0.meituan.net/csc/f33ad2443a67e9f3474a1d5fd9d529db7504.png',
      url: '/pages/users/settled_mer/index',
      name: '商户入驻',
    },
    {
      type: 1,
      icon: '//p0.meituan.net/csc/0403cf37dd14a6b44b22ffccaa2878f95703.png',
      url: '/pages/allClassList/index',
      name: '全部服务',
    },
  ];

  try {
    const res = await getHomeList();
    const apiList = res.data.data.map(item => ({
      ID: item.ID,
      type: 2,
      icon: item.icon,
      url: item.url,
      name: item.name,
    }));
    navigationList.value = [...apiList, ...defaults];
  } catch (e) {
    console.error(e);
    navigationList.value = defaults;
  }
};

const fetchMerList = async () => {
  try {
    const res = await getMerList({
      PageNum: pageVal.value.page,
      PageSize: 10,
      // class_id: 0
    });
    pageVal.value.total = res.data.total;
    if (res.data.data) {
      merList.value.push(...res.data.data);
    }
  } catch (e) {
    console.error(e);
  }
};

const clickSearch = () => {
  if (!searchVal.value)
    return Taro.showToast({ title: '请输入商家名称', icon: 'none' });
  Taro.navigateTo({ url: `/pages/search/index?name=${searchVal.value}` });
  searchVal.value = '';
};

const toPage = item => {
  item.type !== 1
    ? Taro.navigateTo({
        url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
      })
    : Taro.navigateTo({ url: item.url });
};

const toMerDetails = item => {
  Taro.navigateTo({ url: `/pages/mer/mer_detail/index?bid=${item.bid}` });
};
</script>

<style lang="scss">
@import './home-new.scss';

/* 所有新版样式包裹在 .home-new 作用域下 */
.home-new {
/* Header Styles */
.header-fixed {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #eff6ff 0%, #f5f6f7 100%);
}

.header-content {
  padding: 10px 20px 10px;
}

.location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 22px;
  color: #6b7280;
}

.location-inner {
  display: flex;
  align-items: center;
  max-width: 90%;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

.location-icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  color: #374151;
}

.location-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.location-arrow {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: #9ca3af;
}

.search-container {
  position: relative;
  // margin: 10px auto;
  margin-top: 20px;
}

.search-input {
  height: 70px;
  background-color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 20px 10px 70px;
  font-size: 28px;
}

.search-icon-left {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 30px;
}

.search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #fa2c19 0%, #ff5d45 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(250, 44, 25, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Main Content */
.main-content {
  padding: 0 20px 180px;
}

/* Banner Hero */
.banner-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  height: 280px;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.banner-decoration {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.banner-decoration-top {
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background-color: rgba(255, 255, 255, 0.3);
}

.banner-decoration-bottom {
  bottom: -60px;
  left: -60px;
  width: 180px;
  height: 180px;
  background-color: rgba(147, 197, 253, 0.3);
}

.banner-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}

.banner-title {
  font-size: 60px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 4px;
  font-style: italic;
  margin-bottom: 8px;
}

.banner-title-yellow {
  color: #fde047;
}

.banner-subtitle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  opacity: 0.95;
}

.banner-divider {
  width: 60px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner-subtitle {
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 2px;
}

.banner-buttons {
  display: flex;
  width: 100%;
  max-width: 600px;
  gap: 20px;
}

.banner-btn {
  flex: 1;
  border-radius: 50px;
  padding: 15px 0;
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  transform: scale(0.9);
}

.banner-btn-primary {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.banner-btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.banner-btn-icon {
  font-size: 36px;
  opacity: 0.8;
}

/* Navigation Grid */
.nav-grid-wrapper {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 30px;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nav-icon-wrapper {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nav-icon {
  width: 60px;
  height: 60px;
}

.nav-label {
  font-size: 22px;
  font-weight: 500;
  color: #374151;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Featured Section */
.featured-section {
  display: flex;
  gap: 20px;
  height: 280px;
  margin-top: 20px;
}

.featured-card {
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
}

.featured-card-left {
  flex: 1.2;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  border: 1px solid #fed7aa;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.featured-content {
  position: relative;
  z-index: 10;
}

.featured-title {
  font-size: 30px;
  font-weight: bold;
  color: #1f2937;
}

.featured-desc {
  font-size: 20px;
  color: #f97316;
  margin-top: 4px;
}

.featured-btn {
  margin-top: 20px;
  background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  display: inline-block;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.featured-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.1;
  pointer-events: none;
}

.featured-svg {
  width: 180px;
  height: 180px;
  color: #ea580c;
  transform: rotate(-12deg) translate(30px, 30px);
}

.featured-card-right {
  flex: 1;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.featured-image {
  height: 67%;
  position: relative;
}

.featured-img {
  width: 100%;
  height: 100%;
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.featured-overlay-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 26px;
}

.featured-footer {
  height: 33%;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
}

.featured-footer-left {
  display: flex;
  flex-direction: column;
}

.featured-footer-title {
  font-size: 22px;
  font-weight: bold;
  color: #1f2937;
}

.featured-footer-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eff6ff;
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Store Section */
.store-section {
  padding-bottom: 20px;
  margin-top: 20px;
}

.store-header {
  font-size: 30px;
  font-weight: bold;
  color: #1f2937;
  padding: 0 8px 15px;
  display: flex;
  align-items: center;
}

.store-header-line {
  width: 6px;
  height: 30px;
  background-color: #fa2c19;
  border-radius: 50px;
  margin-right: 15px;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.store-item {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #f9fafb;
}

.store-image-wrapper {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  background-color: #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.store-image {
  width: 100%;
  height: 100%;
}

.store-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eab308;
  color: #ffffff;
  font-size: 20px;
  padding: 4px 12px;
  border-bottom-right-radius: 16px;
  font-weight: bold;
}

.store-info {
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: space-between;
  padding: 8px 0;
}

.store-name {
  font-weight: bold;
  color: #1f2937;
  font-size: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.store-rating {
  display: flex;
  align-items: center;
  font-size: 22px;
  margin-top: 4px;
}

.rating-stars {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.stars-text {
  color: #fbbf24;
  font-size: 20px;
  margin-right: 8px;
}

.rating-score {
  color: #fa2c19;
  font-weight: bold;
}

.rating-divider {
  color: #d1d5db;
  margin: 0 10px;
}

.rating-sales {
  color: #6b7280;
}

.store-distance {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.distance-placeholder {
  font-size: 22px;
  color: transparent;
  user-select: none;
}

.distance-text {
  font-size: 22px;
  color: #9ca3af;
}

.store-empty {
  text-align: center;
  padding: 80px 0;
  color: #9ca3af;
  font-size: 26px;
}

.iconfont {
  font-size: inherit;
}

} /* .home-new 作用域结束 */
</style>
