import Taro from "@tarojs/taro"
import { View,Image,Text } from "@tarojs/components"
import { useState } from "react"


import './style.less'


export default (props) => {
  const { ico, textNext, onSelected, nextQuestio } = props

  const YES = 'https://yz-shigongli.oss-cn-shanghai.aliyuncs.com/images/RandomIIcon/YES.png'
  const No = 'https://yz-shigongli.oss-cn-shanghai.aliyuncs.com/images/RandomIIcon/No.png'

  const [imageOne, setImageOne] = useState(false)
  const [imageTow, setImageTow] = useState(false)

  const handleYES = () => {
    setImageOne(true)
    setImageTow(false)
    onSelected()
    setTimeout(() => {
      nextQuestio()
    }, 500);
  }

  const handleNo = () => {
    setImageOne(false)
    setImageTow(true)
    onSelected()//未选择不给到下一题
    setTimeout(() => {
      nextQuestio()
    }, 500);
  }

  return (
    <View >
      <View style='font-size: 20px;font-weight: bold;color: #140F0F;marginLeft:10px;;'>
        2<Text style='font-size: 13px;font-weight: bold;color: #140F0F;'> / 5 </Text>你是单身吗？
      </View>
      <View className='Girl-Conste-box' onClick={handleYES}  >
        <View className='Girl-box-imageContent'>
          <Image className={`Girl-box-image  imageTwo ${imageOne && 'Girl-imageLess'} `} src={YES} />
        </View>
        <View className='Girl-box-content' >
          <View className='Girl-box-C-title' >
            YES
          </View>
          <View className='Girl-box-C-moon' >
            是
          </View>
        </View>
      </View>
      <View className='Girl-Conste-box' onClick={handleNo} >
        <View className='Girl-box-imageContent'>
          <Image className={`Girl-box-image ${imageTow && 'Girl-imageLess'} `} src={No} />
        </View>
        <View className='Girl-box-content' >
          <View className='Girl-box-C-title' >
            No
          </View>
          <View className='Girl-box-C-moon' >
            否
          </View>
        </View>
      </View>
    </View>
  )
}