import React from 'react'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
// import { Swiper, SwiperItem } from '@nutui/nutui-react-taro';
import './index.scss'
import TabbarAction from '@/components/action';
import { Infiniteloading } from '@nutui/nutui-react-taro';
import { useEffect } from 'react';
import { useState } from 'react';
import backNav from '@/images/backNav.png'
import Taro from '@tarojs/taro';
import { useRouter } from '@tarojs/taro';
import { useDidShow } from '@tarojs/taro';
import { Button } from '@nutui/nutui-react-taro';



function Index() {

  const param = useRouter().params
  const [id] = useState(param.id)

  const [swiperProgress, setSwiperProgress] = useState(1)
  const list = [
    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg'
  ]

  useDidShow(() => {
    console.log(12)

  })



  useEffect(() => {


  }, [id])




  // 跳转
  const navDetailFn = () => {
    Taro.navigateTo({
      url: `/pages/settle/index?id=${id}`
    })
  }
  // 返回页面
  const backFn = () => {
    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
  }

  return (
    <View className='home-container'>
      <View className='goods-detail-title'>
        <Image src={backNav} className="square-35 absolute left-10 " onClick={backFn} />
        商品详情
      </View>

      <View className='goods-body' catchMove>
        <View catchMove className='relative'>
          <Swiper
            loop={true}
            current={0}
            autoplay={true}
            className='goods-swiper'
            interval={3000}
            circular
            indicatorActiveColor='#F67952'
            displayMultipleItems={1}
            adjustHeight
            onChange={(e) => {
              setSwiperProgress(x => x % 3 + 1)
            }}
          >
            {list.map((item) => {
              return (
                <SwiperItem key={item} className='goods-swiper-item'>
                  <Image src={item} alt="" />
                </SwiperItem>
              )
            })}
          </Swiper>
          <View className='goods-swiper-progress'>
            <View style={{ backgroundColor: '#F67952', height: '100%', width: list.length ? ((swiperProgress / list.length) > 1 ? 1 : (swiperProgress / list.length)) * 100 + '%' : 0 }}></View>
          </View>
        </View>
        <View className='goods-content'>
          <View className='line-clamp-2 goods-name'>
            银美孚1号 全合成油5w全合成油 5W-30 SN级 4L
          </View>
          <View className='goods-desc line-clamp-2'>
            <View>规格</View>
          </View>
          <View className='goods-item-price'>
            <Text className='goods-item-price-sale'>¥199</Text>
            <Text className='goods-item-price-origin'>原价888</Text>
          </View>

          <View className='goods-content-box'>
            图文内容专区
          </View>
        </View>
      </View>
      <Button className='buy-btn' onClick={navDetailFn}>立即购买</Button>
    </View>
  )
}

export default Index