<!--
 * @Date: 2025-06-28 10:33:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-24 14:21:19
 * @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 { getRecommendVehicleAPI } from '@/api/car';
// 响应式数据
const searchValue = ref('')
const showSearchPopup = ref(false)

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

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

// Mock轮播图数据
const mockBannerData = [
  {
    id: 1,
    type: 'poster',
    image: 'https://picsum.photos/400/160?random=1',
    title: '海报图片'
  },
  {
    id: 2,
    type: 'article',
    image: 'https://picsum.photos/400/160?random=2',
    title: '电动车保养指南',
    content: '<h2>电动车保养指南</h2><p>电动车作为现代出行的重要工具，正确的保养方式能够延长其使用寿命。</p><h3>1. 电池保养</h3><p>• 避免过度充电和过度放电</p><p>• 定期检查电池连接线是否松动</p><p>• 保持电池清洁干燥</p><h3>2. 轮胎保养</h3><p>• 定期检查轮胎气压</p><p>• 检查轮胎磨损情况</p><p>• 及时更换磨损严重的轮胎</p><h3>3. 刹车系统</h3><p>• 定期检查刹车片厚度</p><p>• 检查刹车线是否正常</p><p>• 保持刹车系统清洁</p><p>通过以上保养措施，您的电动车将为您提供更安全、更持久的服务。</p><p>电动车作为现代出行的重要工具，正确的保养方式能够延长其使用寿命。</p><h3>1. 电池保养</h3><p>• 避免过度充电和过度放电</p><p>• 定期检查电池连接线是否松动</p><p>• 保持电池清洁干燥</p><h3>2. 轮胎保养</h3><p>• 定期检查轮胎气压</p><p>• 检查轮胎磨损情况</p><p>• 及时更换磨损严重的轮胎</p><h3>3. 刹车系统</h3><p>• 定期检查刹车片厚度</p><p>• 检查刹车线是否正常</p><p>• 保持刹车系统清洁</p><p>通过以上保养措施，您的电动车将为您提供更安全、更持久的服务。</p>'
  },
  {
    id: 3,
    type: 'vehicle',
    image: 'https://picsum.photos/400/160?random=3',
    title: '精品二手车'
  }
]

/**
 * 点击认证车源
 */
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 && res1.data.list.length) {
    // 将API数据转换为车辆类型的轮播图
    const vehicleBanners = res1.data.list.map(item => ({
      id: item.id,
      type: 'vehicle',
      image: item.front_photo,
      title: '精品二手车'
    }))
    bannerList.value = vehicleBanners
  } else {
    // 使用mock数据
    bannerList.value = mockBannerData
  }
})

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