<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="bg-white overflow-hidden pt-2 px-4"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <!-- 顶部标题 -->
    <view class="text-xl font-bold text-center py-3 bg-white">达州农机优惠券</view>

    <wd-swiper
      :list="swiperList"
      autoplay
      v-model:current="current"
      :indicator="{ type: 'dots-bar' }"
      @click="handleSwiperClick"
      @change="handleSwiperChange"
    ></wd-swiper>

    <view class="pb-4">
      <!-- 网点地址标题 -->
      <view class="text-lg font-bold py-4 border-b border-gray-100">农机销售网点</view>

      <!-- 网点列表 -->
      <view class="divide-y divide-gray-100">
        <view
          v-for="(item, index) in locationList"
          :key="index"
          class="py-3 flex items-center justify-between"
        >
          <view class="flex items-start gap-2">
            <wd-icon name="location" class="text-green-500 mt-1" />
            <view>
              <view class="font-medium">{{ item.name }}</view>
              <view class="text-sm text-gray-500">{{ item.address }}</view>
            </view>
          </view>
          <view class="flex gap-2">
            <wd-icon
              name="call"
              class="p-4 mr-4 bg-green-500 text-white rounded-md"
              @tap="handleCall(item.phone)"
            />
            <wd-icon
              name="cart"
              class="p-4 bg-green-500 text-white rounded-md"
              @tap="handleGoods(item)"
            />
          </view>
        </view>
      </view>

      <!-- 申请记录 -->
      <view class="mt-4">
        <view class="flex items-center justify-between border-b border-gray-100 py-4">
          <text class="text-lg font-bold">最近申请</text>
          <view class="ml-auto">
            <wd-button type="success" size="small" round @tap="handleApply">我要申请</wd-button>
          </view>
        </view>
        <view class="bg-white border border-gray-200 rounded-lg p-2">
          <view
            v-for="(record, index) in applyRecords"
            :key="index"
            class="flex items-center gap-2 py-1"
          >
            <text class="text-sm">{{ record.name }}</text>
            <text class="text-xs text-green-500">申请</text>
            <text class="text-xs text-gray-400 ml-auto">
              {{ formatTimeText(record.time) }}已申请优惠劵
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import banner1 from '@/static/banner1.png'

import { ref } from 'vue'

const current = ref<number>(0)
const swiperList = ref([banner1, banner1, banner1])

// 获取安全区域距离
const { safeAreaInsets } = uni.getWindowInfo()

// 轮播图事件处理
function handleSwiperClick(e: any) {
  // console.log('轮播图点击', e)
}

function handleSwiperChange(e: any) {
  // console.log('轮播图切换', e)
}

// 网点数据
const locationList = ref([
  {
    name: '达川区农机服务站',
    address: '达州市达川区',
    phone: '0818-12345678',
    latitude: 31.209,
    longitude: 107.511,
  },
  {
    name: '达州市达区农机站',
    address: '达州市达区',
    phone: '0818-12345679',
    latitude: 31.209,
    longitude: 107.511,
  },
  {
    name: '达州市宣汉县农机推广中心',
    address: '达州市宣汉县',
    phone: '0818-12345670',
    latitude: 31.209,
    longitude: 107.511,
  },
])

// 格式化时间文本
function formatTimeText(time: Date) {
  const diffMinutes = Math.floor((Date.now() - time.getTime()) / (1000 * 60))
  if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`
  } else {
    const hours = Math.floor(diffMinutes / 60)
    return `${hours}小时前`
  }
}

// 申请记录
const applyRecords = ref([
  { name: '王思聪', time: new Date(Date.now() - 5 * 60 * 1000) },
  { name: '李美丽', time: new Date(Date.now() - 15 * 60 * 1000) },
  { name: '张三', time: new Date(Date.now() - 30 * 60 * 1000) },
  { name: '王五', time: new Date(Date.now() - 60 * 60 * 1000) },
  { name: '赵六', time: new Date(Date.now() - 2 * 60 * 60 * 1000) },
])

// 处理拨打电话
function handleCall(phone: string) {
  uni.makePhoneCall({
    phoneNumber: phone,
  })
}

// 处理导航
function handleNavigation(location: any) {
  uni.openLocation({
    latitude: location.latitude,
    longitude: location.longitude,
    name: location.name,
    address: location.address,
  })
}

// 处理跳转商品
function handleGoods(location: any) {
  // uni.navigateTo({
  //   url: '/pages/goods/index',
  // })
}

// 处理申请
function handleApply() {
  uni.navigateTo({
    url: '/pages/form/form',
  })
}
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>

<style lang="scss">
.wd-icon {
  font-size: 20px;
}
</style>
