import React from 'react'
import { Image, Swiper, SwiperItem, Text, View, Button } 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 { mallDetail } from '../../utils/api';
import { ImagePreview } from '@nutui/nutui-react-taro';



function Index() {

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

  const [swiperProgress, setSwiperProgress] = useState(1)
  const [thumbnails, setThumbnails] = useState([])
  const [info, setInfo] = useState({})
  const [showReview, setShowReview] = useState(false)
  const [imageNum, setImageNum] = useState(1)



  useEffect(() => {
    if (!id) {
      return
    }
    detail(id)

  }, [id])


  const detail = async () => {
    const re = await mallDetail(id)
    if (!re) return
    setInfo(re)
    if (re.thumbnails?.length) {
      let images = re.thumbnails
      if (!!re.cover_image) {
        images.shift(re.cover_image)
      }
      setThumbnails(images)
    }

  }




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

  return (
    <View className='home-container' catchMove>
      <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)
            }}
          >
            {thumbnails.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: thumbnails.length ? ((swiperProgress / thumbnails.length) > 1 ? 1 : (swiperProgress / thumbnails.length)) * 100 + '%' : 0 }}></View>
          </View>
        </View>
        <View className='goods-content'>
          <View className='line-clamp-2 goods-name'>
            {info.name}
          </View>
          {/* <View className='goods-desc line-clamp-2'>
          <View>规格</View>
        </View> */}
          <View className='goods-item-price'>
            <Text className='goods-item-price-sale'>¥{info.price}</Text>
            {/* <Text className='goods-item-price-origin'>原价888</Text> */}
          </View>

          <View className='goods-content-box'>
            {
              info.content_images?.map((item, index) => {
                return (
                  <Image src={item} alt="" key={item} style={{ width: '100%' }} onClick={() => {
                    setImageNum(index + 1)
                    // setShowReview(true)
                  }} />
                )
              })
            }
          </View>
        </View>
      </View>
      <Button className='buy-btn flex-center border-none' onClick={navDetailFn}>立即购买</Button>

    </View>
  )
}

export default Index
