<!--
 * @Date: 2025-06-28 10:33:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-05 11:11:06
 * @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" style="padding-right: 0;">
        <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="rgba(255,255,255,0.85)">
              <template #leftin>
                <Search2 />
              </template>
            </nut-searchbar>
          </nut-col>
        </nut-row>
      </view>
    </nut-sticky>

    <!-- Banner -->
    <BannerSwiper :banner-list="bannerList" />

    <!-- 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 BannerSwiper from '@/components/BannerSwiper.vue'
import "./index.less";
// 导入接口
import { getArticleListAPI } from '@/api/car';
// 响应式数据
const searchValue = ref('')
const showSearchPopup = ref(false)

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

// Banner数据
const bannerList = ref([])

/**
 * 点击认证车源
 */
const onCertifiedClick = () => {
  Taro.navigateTo({
    url: '/pages/authCar/index'
  })
  // 敬请期待弹框提示
  // Taro.showModal({
  //   title: '敬请期待',
  //   content: '认证车源功能暂未开放',
  //   showCancel: false
  // })
}

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

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

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

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

  // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
  const updateManager = Taro.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 { code, data } = await getArticleListAPI({ category: 'homepage' })
  if (code && data.list.length) {
    // 将API数据转换为轮播图格式
    const articleBanners = data.list.map(item => ({
      id: item.post_link || item.id, // 使用post_link作为车辆ID，如果没有则使用文章ID
      type: item.type || 'icon', // 使用接口返回的type字段
      image: item.icon, // 使用icon作为封面图
      title: item.post_title, // 使用post_title作为标题
      content: item.post_content // 使用post_content作为文章内容
    }))
    bannerList.value = articleBanners
  } else {
    // API调用失败时设置为空数组
    bannerList.value = []
    console.warn('获取轮播图数据失败')
  }
})

// 分享功能
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>