import withLayout from '@/layouts'
import image from '@/assets/icons/ProCard/8kb.jpg'
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 CustomNav from '@/components/CustomNav'
import OrderMolded from '@/components/OrderMolded'
import Popup from '@/components/Popup'

import './style.less'

export default withLayout((props) => {
  const { router, person } = props

  const [showDialog, setShowDialog] = useState(false)

  const [BuyNumber, setBuyNumber] = useState(1)
  const [DisabledBool, setDisabledBool] = useState(false)

  const ShowMoldeOn = () => {
    setShowDialog(true)
  }
  const ButtonCancel = () => {
    setShowDialog(false)
  }
  const ButtonOK = (e) => {
    setShowDialog(false)

  }



  const NumberAdd = () => {
    setBuyNumber(BuyNumber + 1)
    console.log(BuyNumber);

  }

  const NumberCut = () => {
    setBuyNumber(BuyNumber - 1)
    console.log(BuyNumber);

  }

  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'>
      <CustomNav title='订单' />
      <Popup show={showDialog} maskClosable={false}>
        <OrderMolded />
        <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'>
              返现￥16.00
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={image}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>【橘里橘气咖啡店】新鲜出炉啦!</view>
              </view>
              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
              <view className='title-time' >有效期：2021/06/21-2021/12/31</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 class='wrapper'>
          <view class='left-complete-one'>
            <image className='left-image-1' src={ProCard_hot}></image>
            <view className='left-viewText'>
              返现￥16.00
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={image}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>【橘里橘气咖啡店】新鲜出炉啦!</view>
              </view>
              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
            </view>
          </view>
          <view class='right-complete-two'>
            <view className='right-content'>
              <view className='right-number'>×1</view>
              <view className='right-title'>数量</view>
            </view>
          </view>
        </view>

        <view class='wrapper'>
          <view class='left-complete-one'>
            <image className='left-image-1' src={ProCard_hot}></image>
            <view className='left-viewText'>
              返现￥16.00
            </view>
            <view className='title-image'>
              <image className='image-1' mode='scaleToFill' src={image}></image>
              <image className='image-2' src={food}></image>
            </view>
            <view className='title-content'>
              <view className='Pro-title'>
                <view className='title-text'>【橘里橘气咖啡店】新鲜出炉啦!</view>
              </view>
              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
            </view>
          </view>
          <view class='right-complete-two'>
            <view className='right-content'>
              <view className='right-number'>×1</view>
              <view className='right-title'>数量</view>
            </view>
          </view>
        </view>

      </view>
      <view className='view-button'>
        <view className='Card-number-box'>
          <view className='Card-number'>
            <text style='left:29px;position: absolute; padding-top:20px'>手机号码:</text>
            <text style='right:29px;position: absolute;padding-top:20px'>16161312125</text>
          </view>
          <view className='Card-user'>
            <Radio style='padding-left:20px; position: relative; top:24px;' value='我已阅读知晓并同意' >我已阅读知晓并同意 <text style='color:#274190;text-decoration:underline;font-weight:400'>《平台用户服务协议》</text></Radio>
          </view>
        </view>
        <view className='button-box-button-box'>
          <view className='button-text-image' >
            <text className='button-text-money-hot'>返现￥2.18</text>
            <image className='button-image' src={ProCard_hot}>123123</image>
            <view className='button-text-money'>门店市面价：230元</view>
          </view>
          <Button className='button-box-one'>￥170元 <text className='button-text-one'>支付订单</text> </Button>
        </view>

      </view>
    </view>


  )
})
