import React, { useState, useEffect } from 'react'
import Taro, { Current } from '@tarojs/taro'
import request, { apis } from '@/utils/request'
import { useModel } from '@/store'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function ShangPinXiangQing () {

  const { user } = useModel('user')
  const [CurrnetId] = useState(Current.router.params.id) // 当前id
  const [GoodsDetail, setGoodsDetail] = useState(null) // 商品详情

  useEffect(() => {
    Init()
  }, [])

  const Init = () => {
    request({ ...apis.getGoodsDetail, args: { id: CurrnetId } }).then((res) => {
      setGoodsDetail(res)
    })
  }

  return (
    <view className='ShangPinXiangQing'>
      <view className='Info'>
        <view className='Img'>
          <image mode='aspectFill' src={GoodsDetail === null ? null : GoodsDetail.imgUrl} className='centerLabel'></image>
        </view>
        <view className='Title'>
          <text>{GoodsDetail === null ? '' : GoodsDetail.goodsName}</text>
        </view>
        <view className='flex-h'>
          <text>{GoodsDetail === null ? '' : GoodsDetail.pointPrice}</text>
          <text className='flex-item'>积分</text>
          <text>剩余数量</text>
          <text>{GoodsDetail === null ? '' : GoodsDetail.inventory}</text>
        </view>
      </view>
      <view className='Detail'>
        <view className='Title'>
          <view className='Line'></view>
          <text>产品详情</text>
          <image mode='widthFix' src={GoodsDetail === null ? null : GoodsDetail.detailImgUrl} style={{width: `100%`}}></image>
        </view>
        <view className='BottomBtn'>
          <text className='active' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinDuiHuan/index?id=${CurrnetId}` }) }}>立即兑换</text>
        </view>
      </view>
    </view>
  )
}
