import { useState, useEffect } from 'react'
import { Button, Radio, Input } from '@tarojs/components'
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 Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
import starOn from '@/assets/icons/GuideCheck/starOn.png'
import starOff from '@/assets/icons/GuideCheck/starOff.png'
import AlreadyUsedMolded from '@/components/AlreadyUsedMolded'
import Popup from '@/components/Popup'
import './style.less'


const scoreList = new Array(5).fill(0)
const score = '3.9'



export default (props) => {

  const [showDialog, setShowDialog] = useState(false)
  const [CollectNub, setCollectNub] = useState(1)

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

  }

  const Nuberr = () => {
    setCollectNub(+1)
  }

  return (

    <scroll-view scroll-y style='height: 90vh;'  >
      <view className='AlreadyUsed-box' >
        <Popup show={showDialog} maskClosable={false}>
          <AlreadyUsedMolded />
          <view className='item-center-Number' >
            {/* 评分 */}
            <view className='card-box-star'>
              <text className='card-box-star-text' onClick={Nuberr} >口味：</text>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
                  )
                })
              }
            </view>
            <view className='card-box-star'>
              <text className='card-box-star-text' onClick={Nuberr} >环境：</text>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
                  )
                })
              }
            </view>
            <view className='card-box-star'>
              <text className='card-box-star-text' onClick={Nuberr} >服务：</text>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
                  )
                })
              }
            </view>


          </view>
          <view className='buy-button-box' >
            <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
            <button className='button-OK' onClick={ButtonOK} >确定</button>
          </view>
        </Popup>
        {/* 已使用 */}
        <view className='OrderNumber'>订单编号：ABC123456789</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='card-box-star'>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + '0.1') < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} />
                  )
                })
              }
              <text className='card-star-text' >{score}</text>
            </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>
              <view className='title-time' >核销时间：2021/06/21  12:00</view>
            </view>
          </view>
          <view class='right-complete-two' onClick={ShowMoldeOn} >
            <view className='right-content'>
              <image className='right-image' src={Evaluation} />
              <view className='right-title'>评价</view>

            </view>
          </view>
        </view>
        {/* 已使用 */}
        <view className='OrderNumber'>订单编号：ABC123456789</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='card-box-star'>
              {
                scoreList.map((_, index) => {
                  console.log(index)
                  const src = (index + '0.1') < score ? starOn : starOff
                  return (
                    <image className='card-star-image' key={index} src={src} />
                  )
                })
              }
              <text className='card-star-text' >{score}</text>
            </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>
              <view className='title-time' >核销时间：2021/06/21  12:00</view>
            </view>
          </view>
          <view class='right-complete-two'>
            <view className='right-content'>
              <image className='right-image' src={Evaluation} />
              <view className='right-title'>评价</view>
            </view>
          </view>
        </view>
        <view className='foot'>
          已经到底了~
        </view>
      </view>
    </scroll-view>

  )
}
