import { useState, useEffect } from 'react';
import SpinBox from "@/components/Spin/SpinBox";

import touristON from '@/assets/icons/UserCenter/touristON.png'
import touristOFF from '@/assets/icons/UserCenter/touristOFF.png'
import hotelBossON from '@/assets/icons/UserCenter/hotelBossON.png'
import hotelBossOFF from '@/assets/icons/UserCenter/hotelBossOFF.png'
import shopBossON from '@/assets/icons/UserCenter/shopBossON.png'
import shopBossOFF from '@/assets/icons/UserCenter/shopBossOFF.png'

import Popup from '@/components/Popup'
import './ToggleRole.less'
import { useModel } from '@/store'


export default (props) => {
  const { showCutover, onClose, maskClosable, role } = props
  const { getRole, loading } = useModel('person')
  // const [loading, setLoading] = useState(false)

  const goToPerson = () => {
    getRole('normal')
  }
  const goToHotel = () => {
    getRole('hotel')

  }
  const goToShop = () => {
    getRole('shop')
  }
  return (

    <Popup show={showCutover} maskClosable={maskClosable} onClose={onClose}>
      <SpinBox loading={loading} className='index-container' >
        <view className='User-box-sths' >
          <view className='User-box-selectUser'>请选择身份：</view>
          <view className='User-box-tourist' onClick={goToPerson}>
            <image className='Ubs-tourist-image' src={role === 'normal' ? touristON : touristOFF} />
            <text className='Ubs-tourist-text'>我是用户</text>
          </view>
          <view className='User-box-hotelBoss' onClick={goToHotel}>
            <image className='Ubs-hotelBoss-image' src={role === 'hotel' ? hotelBossON : hotelBossOFF} />
            <text className='Ubs-hotelBoss-text'>我是房东</text>
          </view>
          <view className='User-box-shopBoss' onClick={goToShop}>
            <image className='Ubs-shopBoss-image' src={role === 'shop' ? shopBossON : shopBossOFF} />
            <text className='Ubs-shopBoss-text'>我是商铺</text>
          </view>
        </view>
      </SpinBox>


    </Popup >


  )
}