import withLayout from '@/layouts'

import CustomNav from "@/components/CustomNav"
import Popup from '@/components/Popup'
import { useState, useEffect } from 'react'
import LocationBig from '@/assets/icons/UserCenter/LocationBig.png'
import Perfection from '@/assets/icons/UserCenter/Perfection.png'
import Check_OK from '@/assets/icons/UserCenter/Check_OK.png'
import Check_NO from '@/assets/icons/UserCenter/Check_NO.png'
import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import image from '@/assets/icons/ProCard/8kb.jpg'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
import { Button, Icon, Text, Textarea } from '@tarojs/components'
import './style.less'


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

  const [showDialog, setShowDialog] = useState(false)
  //核销
  const [Consumption, setConsumption] = useState(false)

  const ShowMoldeOn = () => {
    setShowDialog(true)
  }
  const ButtonCancel = () => {
    setShowDialog(false)
  }
  const ButtonOK = (e) => {
    // setShowDialog(false)
    if (showDialog === true) {
      setShowDialog(false)
      setConsumption(true)
    }

  }

  const PerfectionOK = () => {
    setConsumption(false)
  }


  return (
    <view className='shop-Eat' >
      <CustomNav title='到店核销' />
      <Popup show={showDialog} maskClosable={false}>
        <view className='Consumption-Now' >您即将核销1张套餐券！</view>
        <text className='Consumption-text' >核销后套餐券不退不换</text>
        <text className='Consumption-text' >请核对无误后再点击确认！</text>
        <view className='buy-button-box' >
          <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
          <button className='button-OK' onClick={ButtonOK} >确定</button>
        </view>
      </Popup>
      <Popup show={Consumption} maskClosable={false}>
        <view className='Perfection-image-view' >
          <image src={Perfection} className='Perfection-image' />

        </view>
        <text>核销完成！请与店铺确认！</text>
        <view className='buy-button-box' >
          <button className='button-OK' onClick={PerfectionOK} >完成</button>
        </view>
      </Popup>
      <view className='position-header' >
        <image className='position-LocationBig' src={LocationBig} />
        <text cla='position-LocationBig-text'>当前所在店铺：SEOUL·创意韩国料理</text>
      </view>
      <view className='shop-image'>
        <image mode='scaleToFill' className='shop-title-image-cup' src={BlackSpot} />
        <text className='shop-title-title' >请选择你要核销的套餐</text>
      </view>

      {/* 卡片 */}
      <view class='wrapper'>
        <view class='left-complete-one'>
          <view className='Check_OK-box' >
            <image className='Check_OK-image' src={Check_OK} />
          </view>
          <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'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</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>
        </view>
      </view>

      <view class='wrapper'>
        <view class='left-complete-one'>
          <view className='Check_OK-box' >
            <image className='Check_OK-image' src={Check_NO} />
          </view>
          <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'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</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>
        </view>
      </view>

      <view className='button-info'>
        <Button className='button-box' onClick={ShowMoldeOn} >确定核销</Button>
      </view>

    </view>
  )
})
