import withLayout from '@/layouts'
import useSave from "@/utils/hooks/useSave"
import image from '@/assets/icons/ProCard/8kb.jpg'
import AuthPage from '@/components/AuthPage'
import moment from 'moment'
import { useState, useEffect } from 'react'
import { Button, Radio, Input } from '@tarojs/components'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
import OrderMolded from '@/components/OrderMolded'
import Popup from '@/components/Popup'



import './style.less'

export default (props) => {
  const { item, onShopContent, onShopNumber } = props
  const [showDialog, setShowDialog] = useState(false)
  const [BuyNumber, setBuyNumber] = useState(1)
  const [DisabledBool, setDisabledBool] = useState(false)



  const ShowMoldeOn = () => {
    setShowDialog(true)
  }
  const ButtonCancel = () => {
    setShowDialog(false)
    setBuyNumber(1)
  }
  const ButtonOK = (e) => {
    setShowDialog(false)
    const itemList = [{ ...item }]
    const itemListNumber = itemList.map(x => {
      return { ...x, BuyNumber: BuyNumber }
    })
    const handeItemList = itemListNumber.map(shoPnumber => {
      onShopContent(shoPnumber)
    })
    onShopNumber()
    // console.log("🚀 ~ file: index.jsx ~ line 38 ~ ButtonOK ~ handeItemList", handeItemList)


  }
  const NumberAdd = () => {
    setBuyNumber(BuyNumber + 1)

  }

  const NumberCut = () => {
    setBuyNumber(BuyNumber - 1)

  }

  const onInput = (e) => {
    let values = e.detail.value
    setBuyNumber(values - 0)


  }


  useEffect(() => {
    if (BuyNumber < 2) {
      setDisabledBool(true)

    } else {
      setDisabledBool(false)

    }

  }, [BuyNumber])

  return (

    <view class='container'>
      <Popup show={showDialog} maskClosable={false}>
        <OrderMolded item={item} />
        <view className='item-center-Number' >
          <view className='buy-num-minus' disabled={DisabledBool} onClick={NumberCut} > - </view>
          <Input className='buy-num-input' type='number' min={1} onInput={onInput} value={BuyNumber} />
          <view className='buy-num-add' onClick={NumberAdd} >+</view>
        </view>
        <view className='buy-button-box' >
          <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
          <button className='button-OK' onClick={ButtonOK} >确定</button>
        </view>
      </Popup>
      <view class='coupon-list'>
        <view class='wrapper'>
          <view class='left-complete-one'>
            <image className='left-image-1' src={ProCard_hot}></image>
            <view className='left-viewText'>
              返现￥{item.cashback / 100}
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={item.poster}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>{item.description}</view>
              </view>
              <text className='title-money' >￥{item.actualPrice / 100}<text className='title-money-2'>{item.standardPrice / 100}</text></text>
              <view className='title-time' >有效期：<text>{moment(item.startTimeal).format('YYYY/MM/DD')}</text> - <text>{moment(item.endTime).format('YYYY/MM/DD')}</text></view>
            </view>
          </view>
          <view class='right-complete-two' onClick={ShowMoldeOn} >
            <view className='right-content'>
              <view className='right-number'>×{BuyNumber}</view>
              <view className='right-title'>数量</view>
            </view>
          </view>
        </view>
      </view>
    </view>


  )
}
