<!--
 * @Date: 2025-06-28 10:33:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-16 09:50:03
 * @FilePath: /jgdl/src/pages/index/index.vue
 * @Description: 捡个电驴首页
-->
<template>
  <view class="flex flex-col bg-orange-50 min-h-screen" style="background-color: #f6f6f6;">
    <!-- Header -->
    <nut-sticky>
      <view class="bg-orange-400 px-4">
        <nut-row type="flex" justify="center" align="center">
          <nut-col span="6">
            <view class="text-xl font-bold text-white">捡个电驴</view>
          </nut-col>
          <nut-col span="18">
            <!-- Search Bar -->
            <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle"
              shape="round" background="transparent" input-background="#ffffff">
              <template #leftin>
                <Search2 />
              </template>
            </nut-searchbar>
          </nut-col>
        </nut-row>
      </view>
    </nut-sticky>

    <!-- Banner -->
    <view class="px-4 pt-4" style="background: linear-gradient( 180deg, #fb923c 0%, rgba(255,203,53,0) 61%);">
      <nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#ffffff" auto-play="3000"
        class="rounded-lg overflow-hidden" height="160">
        <nut-swiper-item v-for="(image, index) in bannerImages" :key="index">
          <image :src="image" mode="aspectFill" class="w-full h-40 object-cover" />
        </nut-swiper-item>
      </nut-swiper>
    </view>

    <!-- Category Icons -->
    <view class="px-4 mt-2">
      <view class="flex justify-around py-4">
        <view class="flex flex-col items-center" @tap="onNewCarClick">
          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
            <Clock size="20" color="#f97316" />
          </view>
          <text class="text-xs mt-1 text-gray-700">最新上架</text>
        </view>
        <view class="flex flex-col items-center" @tap="onGoodCarClick">
          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
            <Star size="20" color="#f97316" />
          </view>
          <text class="text-xs mt-1 text-gray-700">特价好车</text>
        </view>
        <view class="flex flex-col items-center" @tap="onCertifiedClick">
          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
            <Shop size="20" color="#f97316" />
          </view>
          <text class="text-xs mt-1 text-gray-700">认证车源</text>
        </view>
      </view>
    </view>

    <!-- Featured Recommendations -->
    <FeaturedRecommendations />

    <!-- Latest Listings -->
    <LatestScooters style="margin-bottom: 150rpx;" />

    <!-- 自定义TabBar -->
    <TabBar />

    <!-- 搜索弹窗 -->
    <SearchPopup v-model:visible="showSearchPopup" />
  </view>
</template>

<script setup>
import Taro, { useShareAppMessage, useDidShow, useReady } from '@tarojs/taro'
import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突?
import { ref, onMounted } from 'vue'
import { Clock, Star, Search2, Shop } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import SearchPopup from '@/components/SearchPopup.vue'
import FeaturedRecommendations from '@/components/FeaturedRecommendations.vue'
import LatestScooters from '@/components/LatestScooters.vue'
import "./index.less";
// 导入接口
import { getRecommendVehicleAPI } from '@/api/car';
import { DEFAULT_COVER_IMG } from '@/utils/config'
// 响应式数据
const searchValue = ref('')
const showSearchPopup = ref(false)

const onSearchHandle = () => {
  // 显示搜索弹窗
  showSearchPopup.value = true
}

// Banner图片
const bannerImages = ref([])

/**
 * 点击认证车源
 */
const onCertifiedClick = () => {
  Taro.navigateTo({
    url: '/pages/authCar/index'
  })
}

/**
 * 点击特价好车
 */
const onGoodCarClick = () => {
  Taro.navigateTo({
    url: '/pages/goodCarList/index'
  })
}

/**
 * 点击最新上架
 */
const onNewCarClick = () => {
  Taro.navigateTo({
    url: '/pages/newCarList/index'
  })
}

// 生命周期钩子
useDidShow(() => {
  console.warn('index onShow')
})

useReady(async () => {
  // 版本更新检查
  if (!wx.canIUse("getUpdateManager")) {
    wx.showModal({
      title: "提示",
      content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
      showCancel: false,
    });
    return;
  }

  // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
  const updateManager = wx.getUpdateManager();

  updateManager.onCheckForUpdate((res) => {
    // 请求完新版本信息的回调
    if (res.hasUpdate) {
      updateManager.onUpdateReady(function () {
        Taro.showModal({
          title: "更新提示",
          content: "新版本已经准备好，是否重启应用？",
          success: function (res) {
            if (res.confirm) {
              // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
              updateManager.applyUpdate();
            }
          },
        });
      });

      updateManager.onUpdateFailed(function () {
        // 新版本下载失败
        Taro.showModal({
          title: "更新提示",
          content: "新版本已上线，请删除当前小程序，重新搜索打开",
        });
      });
    }
  });
})

onMounted(async () => {
  // 获取首页轮播
  const res1 = await getRecommendVehicleAPI({ section: 1 })
  if (res1.code) {
    bannerImages.value = res1.data.list.map(item => item.front_photo);
    if (!bannerImages.value.length) {
      bannerImages.value = [DEFAULT_COVER_IMG]
    }
  }
})

// 分享功能
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
});

// 分享功能
useShareAppMessage(() => {
  // 设置菜单中的转发按钮触发转发事件时的转发内容
  var shareObj = {
    title: '捡个电驴-分享给好友',    // 默认是小程序的名称(可以写slogan等)
    path: `pages/index/index`,    // 默认是当前页面，必须是以'/'开头的完整路径
    imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  }
  // 来自页面内的按钮的转发
  // if (options.from == 'button') {
  //   var eData = options.target.dataset;
  //   // 此处可以修改 shareObj 中的内容
  //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
  // }
  // 返回shareObj
  return shareObj;
})
</script>