import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import Taro from '@tarojs/taro'
import { Button, Icon, Text, Textarea } from '@tarojs/components'

import { useState } from 'react'
import withLayout from '@/layouts'

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 CustomNav from '@/components/CustomNav'
import './style.less'

export default withLayout((props) => {
  const [view, setView] = useState(true)
  const [view2, setView2] = useState(false)
  const [view3, setView3] = useState(false)
  const [view4, setView4] = useState(false)
  const [view5, setView5] = useState(false)
  const [view6, setView6] = useState(false)
  const { router, person } = props

  let value = view
  let list = [
    {
      className: `Refund-star-view4 ${!value ? 'bg2' : 'Refund-star-view2'}`,
      name: '预约不上',
      value: false,
    }
  ]

  const viewOK = () => {
    setView(!view)
  }

  const view2OK = () => {
    setView2(!view2)
  }

  const view3OK = () => {
    setView3(!view3)
  }

  const view4OK = () => {
    setView4(!view4)
  }
  const view5OK = () => {
    setView5(!view5)
  }

  const view6OK = () => {
    setView6(!view6)
  }



  return (

    <view className='box-content'>
      <CustomNav title='售后退款' />
      <view className='Refund-Content-box'>
        <view className='title-image'>
          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
          <text className='title-title-boss' >商品信息</text>
        </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'>【米啊糯】新街口店 <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='Refund-Content-box'>
        <view className='title-image'>
          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
          <text className='title-title-boss' >退款原因</text>
        </view>
        {/* 退款结束 */}
      </view>
      <view className='Refund-content'>
        <text className={`Refund-star-view ${view ? 'bg2' : 'Refund-star-view'}`} onClick={() => viewOK()} >计划有变,没时间消费</text>
        <text className={`Refund-star-view2 ${view2 ? 'bg2' : 'Refund-star-view2'}`} onClick={() => view2OK()}  >误认为是外卖</text>
        <text className={`Refund-star-view3 ${view3 ? 'bg2' : 'Refund-star-view3'}`} onClick={() => view3OK()} >没看清楚使用规则,要用时才发现限制很多</text>
        <text className={`Refund-star-view4 ${view4 ? 'bg2' : 'Refund-star-view4'}`} onClick={() => view4OK()} >预约不上</text>
        <text className={`Refund-star-view5 ${view5 ? 'bg2' : 'Refund-star-view5'}`} onClick={() => view5OK()} >店里更优惠</text>
        <text className={`Refund-star-view6 ${view6 ? 'bg2' : 'Refund-star-view6'}`} onClick={() => view6OK()} >网友/朋友评价不好</text>
        {/* 
        <view>
          {
            list.map(item => {
              return <text onClick={() => view4OK()} key={item.value} className={item.className}>
                {item.name}
              </text>

            })
          }
        </view> */}
      </view>

      <view className='Refund-Content-box'>
        <view className='title-image'>
          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
          <text className='title-title-boss' >退款说明</text>
        </view>
      </view>
      <view class='section'>
        <Textarea placeholder='请补充退款说明（选填）!' confirm-type='done' />
      </view>
      <view className='money-title' >实付金额: <text className='money-name' >58元</text></view>
      <view className='money-title' >已获返现: <text className='money-name' >1.88元</text></view>
      <view className='money-title' >退款金额: <text className='money-name' >56.12元</text></view>
      <view className='ul-li-text'>
        <view className='ul-li-view' ></view>
        <text className='ul-li-textname'>退款金额不可修改</text>
      </view>
      <view className='ul-li-text'>
        <view className='ul-li-view' ></view>
        <text className='ul-li-textname'>下单获得返现金额，会在退款时被扣除；</text>
      </view>
      <view className='ul-li-text'>
        <view className='ul-li-view' ></view>
        <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
      </view>

      <view className='button-info'>
        <Button className='button-box'>提交申请</Button>
      </view>
    </view>
  )
})
