import { useState,useEffect } from 'react';

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 './ToggleRoul.less'
import { useModel } from '@/store'


export default ( props)=>{
  const {showCutover, onClose }=props
  const {getRoul}=useModel('person')
  const goToPerson=()=>{
    getRoul('normal')
  }
  const goToHotel=()=>{
    getRoul('hotel')
  }
  const goToShop=()=>{
    getRoul('shop')
  }

    return (      
      <Popup show={showCutover} onClose={onClose}>
          <view className='User-box-sths' >
            <view className='User-box-selectUser'>请选择身份：</view>
            <view className='User-box-tourist' onClick={goToPerson}>
              <image className='Ubs-tourist-image' src={touristOFF} />
              <text className='Ubs-tourist-text'>游客</text>
            </view>
            <view className='User-box-hotelBoss' onClick={goToHotel}>
              <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
              <text className='Ubs-hotelBoss-text'>民宿老板</text>
            </view>
            <view className='User-box-shopBoss' onClick={goToShop}>
              <image className='Ubs-shopBoss-image' src={shopBossON} />
              <text className='Ubs-shopBoss-text'>店铺老板</text>
            </view>
          </view>
        </Popup>
    )  
}