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


export default (props) => {
  const { showCutover, onClose, maskClosable, role } = props
  const { getRole } = useModel('person')
  const goToPerson = () => {
    getRole('normal')
  }
  const goToHotel = () => {
    getRole('hotel')

  }
  const goToShop = () => {
    getRole('shop')
  }
  return (
    <Popup show={showCutover} maskClosable={maskClosable} 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={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>
    </Popup>
  )
}