<script setup lang="ts">
import { useToast } from 'wot-design-uni'

definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    'navigationStyle': 'custom',
    'navigationBarTitleText': '%tabbar.explore%',
    'backgroundColor': '#F8FAFB',
    // 'enablePullDownRefresh': true,
    // 'app-plus': {
    //   pullToRefresh: {
    //     style: 'circle',
    //     range: '30%',
    //     height: '10%',
    //     offset: '60px',
    //   },
    // },
    'app-plus': {
      bounce: 'none',
    },
  },
})

const toast = useToast()

onPullDownRefresh(() => {
  // uni.showToast({
  //   title: '刷新成功',
  // })
  uni.showToast({
    icon: 'error',
    title: '刷新成功111',
  })
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})

const productWikiList = ref([
  {
    name: '【教程】超详细教程，手把手教你组装Fifty 5穿越机整机，跟着视...',
    imageUrl: '/static/images/fifty5@m.webp',
    url: '/pages/product-wiki/product-wiki.vue',
  },
  {
    name: '【教程】超详细教程，手把手教你组装Fifty 5穿越机整机，跟着视...',
    imageUrl: '/static/images/fifty5@m.webp',
    url: '/pages/product-wiki/product-wiki.vue',
  },
])

const specialList = ref([
  {
    name: 'Volador II VX5 O4 Pro FPV Freesty',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
    oriPrice: 488,
  },
  {
    name: 'Volador II VX5 O4 Pro FPV Freesty',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
    oriPrice: 488,
  },
  {
    name: 'Volador II VX5 O4 Pro FPV Freesty',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
    oriPrice: 488,
  },

])
const productRecommendList = ref([
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
])

const productNewList = ref([
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
])

const productPeripheryList = ref([
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },
  {
    name: 'Fifty 5穿越机',
    imageUrl: '/static/images/fifty5@m.webp',
    price: 388,
  },

])
const paging = ref<ZPagingInstance>()
function onRefresh() {
  // uni.showToast({
  //   icon: 'error',
  //   title: '刷新成功111111111111111111111111',
  // })

  toast.show({
    msg: '刷新成功',
    direction: 'vertical',
  })

  setTimeout(() => {
    paging.value.complete()
  }, 1000)
}
</script>

<template>
  <wd-toast />
  <view>
    <z-paging ref="paging" refresher-only :refresher-end-bounce-enabled="false" @on-refresh="onRefresh">
      <template #top>
        <view class="top-bar" />
      </template>
      <!-- 自定义下拉刷新view -->
      <template #refresher="{ refresherStatus }">
        <view class="refresher">
          <view v-if="refresherStatus === 'default'">
            继续下拉
          </view>
          <view v-if="refresherStatus === 'release-to-refresh'">
            释放刷新
          </view>
          <view v-if="refresherStatus === 'loading'">
            刷新中...
          </view>
          <view v-if="refresherStatus === 'complete'">
            刷新完成
          </view>
        </view>
      </template>
      <view class="explore">
        <view class="explore-header">
          <view class="title">
            发现智能飞行日常
          </view>
          <image class="explore-header-image" src="/static/images/fifty5@m.webp" mode="aspectFill" />
        </view>
        <view class="explore-content">
          <!-- 产品百科 -->
          <view class="explore-content-section">
            <view class="title">
              <view class="main-title">
                产品百科
              </view>
              <view class="all">
                全部
              </view>
            </view>
            <view class="product-wiki">
              <view v-for="item in productWikiList" :key="item.name" class="product-wiki-item">
                <image :src="item.imageUrl" mode="aspectFill" />
                <view class="wiki-title">
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <!-- 特价商品 -->
          <view class="explore-content-section">
            <view class="title">
              <view class="main-title">
                特价商品
              </view>
              <view class="all">
                全部
              </view>
            </view>
            <view class="product-special">
              <view v-for="item in specialList" :key="item.name" class="product-special-item">
                <image :src="item.imageUrl" mode="aspectFill" />
                <view class="product-name">
                  {{ item.name }}
                </view>
                <view class="product-price">
                  <view class="special-price">
                    ￥{{ item.price }}
                  </view>
                  <view class="ori-price">
                    ￥{{ item.oriPrice }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 精选推荐 -->
          <view class="explore-content-section not-padding">
            <view class="title">
              <view class="main-title">
                精选推荐
              </view>
              <view class="all">
                全部
              </view>
            </view>
            <view class="product-recommend">
              <view v-for="item in productRecommendList" :key="item.name" class="product-recommend-item">
                <image :src="item.imageUrl" mode="aspectFill" />
                <view class="product-name">
                  {{ item.name }}
                </view>
                <view class="product-price">
                  ￥{{ item.price }}
                </view>
              </view>
            </view>
          </view>
          <!-- 新品上市 -->
          <view class="explore-content-section">
            <view class="title">
              <view class="main-title">
                新品上市
              </view>
              <view class="all">
                全部
              </view>
            </view>
            <view class="product-new">
              <view v-for="item in productNewList" :key="item.name" class="product-new-item">
                <image :src="item.imageUrl" mode="aspectFill" />
                <view class="product-name">
                  {{ item.name }}
                </view>
                <view class="product-price">
                  ￥{{ item.price }}
                </view>
              </view>
            </view>
          </view>

          <!-- 专属周边 -->
          <view class="explore-content-section">
            <view class="title">
              <view class="main-title">
                专属周边，为热爱加冕
              </view>
              <view class="all">
                全部
              </view>
            </view>
            <view class="product-periphery">
              <view v-for="item in productPeripheryList" :key="item.name" class="product-periphery-item">
                <image :src="item.imageUrl" mode="aspectFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style lang="scss" scoped>
.top-bar {
  height: 120rpx;
  background-color: #f8fafb;
}

.refresher {
  padding: 20px 0;
  height: 100rpx;
  > view {
    font-size: 32rpx;
    line-height: 1.2;
    text-align: center;
    padding: 20rpx 0;
  }
}
.explore {
  // padding-top: 120rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8fafb;

  .explore-header {
    display: flex;
    flex-direction: column;
    row-gap: 58rpx;
    padding: 0 28rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      color: #24272c;
      font-weight: 500;
    }

    .explore-header-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 12px 12px 12px 12px;
    }
  }

  .explore-content {
    padding: 0;

    .explore-content-section {
      display: flex;
      flex-direction: column;
      margin-bottom: 28rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .title {
        padding: 32rpx 28rpx;
        font-size: 32rpx;
        color: #24272c;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .main-title {
          font-weight: 500;
        }

        .all {
          font-size: 28rpx;
          color: #999999;

          &::after {
            content: '';
            display: inline-block;
            height: 12rpx;
            width: 12rpx;
            border-top: 1px solid #aaaaaa;
            border-right: 1px solid #aaaaaa;
            transform: rotate(45deg) translateY(0rpx);
            margin-left: auto;
          }
        }
      }

      .product-wiki {
        display: flex;
        flex-direction: column;
        border-radius: 28rpx;
        overflow: hidden;
        margin: 0 28rpx;

        &-item {
          display: flex;
          background-color: #ffffff;
          column-gap: 16rpx;
          padding: 24rpx;
          align-items: center;

          image {
            flex-shrink: 0;
            width: 112rpx;
            height: 112rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }

          .wiki-title {
            font-size: 28rpx;
            color: #333333;
          }
        }
      }

      .product-recommend {
        overflow-x: auto;
        display: flex;
        column-gap: 16rpx;
        padding: 0 28rpx;

        &-item {
          display: flex;
          flex-direction: column;
          row-gap: 17rpx;
          background-color: #ffffff;
          overflow: hidden;
          border-radius: 8rpx;
          align-items: flex-start;
          width: 271rpx;
          height: 324rpx;
          flex-shrink: 0;
          padding-bottom: 32rpx;

          image {
            width: 100%;
          }

          .product-name {
            font-size: 28rpx;
            padding: 0 12rpx;
            color: #333333;
          }

          .product-price {
            font-size: 28rpx;
            padding: 0 12rpx;
            color: #ea4141;
          }
        }
      }

      .product-new {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16rpx;
        row-gap: 16rpx;
        padding: 0 28rpx;

        .product-new-item {
          display: flex;
          flex-direction: column;
          row-gap: 17rpx;
          border-radius: 8rpx;
          align-items: flex-start;
          flex-shrink: 0;
          padding-bottom: 28rpx;

          image {
            // width: 100%;
            max-width: 100%;
            width: 100%;
            height: 300rpx;
            border-radius: 8rpx;
          }

          .product-name {
            font-size: 28rpx;
            padding: 0 12rpx;
            color: #333333;
          }

          .product-price {
            font-size: 32rpx;
            padding: 0 12rpx;
            color: #ea4141;
          }
        }
      }

      // 特价商品
      .product-special {
        display: flex;
        column-gap: 16rpx;
        overflow: auto;
        padding: 0 28rpx;

        .product-special-item {
          display: flex;
          flex-direction: column;
          row-gap: 17rpx;
          border-radius: 8rpx;
          overflow: hidden;
          align-items: flex-start;
          flex-shrink: 0;
          width: 300rpx;
          background-color: #fff;
          padding-bottom: 28rpx;

          image {
            width: 100%;
            height: 300rpx;
          }

          .product-name {
            font-size: 28rpx;
            color: #333333;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 12rpx;
          }

          .product-price {
            display: flex;
            align-items: center;
            padding: 0 12rpx;

            .special-price {
              font-size: 28rpx;
              color: #ea4141;
            }

            .ori-price {
              font-size: 24rpx;
              color: #86909c;
              text-decoration: line-through;
            }
          }
        }
      }

      // 专属周边
      .product-periphery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16rpx;
        padding: 0 28rpx;

        &-item {
          image {
            border-radius: 8rpx;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
