import { useState } from 'react'
import Taro from '@tarojs/taro'
import withLayout from '@/layouts'
import Popup from '@/components/Popup'
import AuthPage from '@/components/AuthPage'
import boy from '@/assets/icons/UserCenter/boy.png'
import awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
import AllOrder from '@/assets/icons/UserCenter/AllOrder.png'
import Refund from '@/assets/icons/UserCenter/Refund.png'
import ToShop from '@/assets/icons/UserCenter/ToShop.png'
import HomeLogo from '@/assets/icons/UserCenter/HomeLogo.png'
import ContactMe from '@/assets/icons/UserCenter/ContactMe.png'
import collect from '@/assets/icons/UserCenter/collect.png'
import Rules from '@/assets/icons/UserCenter/Rules.png'
import UserImages from '@/assets/icons/ProCard/8kb.jpg'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
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 './MineCss/style.less'



export default withLayout((props) => {
  const { router, person } = props
  const [showCutover, setShowCutover] = useState(false)

  // // 我的行程 
  // const HomeLogo = () => {
  //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
  // }


  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const ok = () => {
    setShowCutover(false)
  }




  // 待支付
  const handleTobePaid = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=1' })
  }
  // 待核销
  const handleTobeWritten = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=2' })
  }
  // 我的订单全部
  const handleAllOrder = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=0' })
  }

  //退款
  const handleRefund = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/RefundMoney/index' })
  }
  //入住指引
  const handleHomeLogo = () => {
    Taro.navigateTo({ url: '/pages/index/index?tab=1' })
  }
  //收藏
  const handleCollect = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/Collect/index' })
  }
  //联系我们
  const handleContactMe = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/ContactMe/index' })
  }

  //条款
  const handleRules = () => {
    Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
  }
  
  const goToHotel = () => {
    Taro.redirectTo({ url: '/hotel/pages/landlord/landlord' })
  }
  const goToShop = () => {
    Taro.redirectTo({ url: '/shop/pages/spread/spreadIndex' })
  }

  return !person.phone ? <AuthPage /> : (
    <scroll-view scroll-y style='height: 77vh;' >
      <view className='User-box'>
        {/* 身份切换 */}
        <Popup show={showCutover} maskClosable={false}>
          <view className='User-box-sths' >
            <view className='User-box-selectUser'>请选择身份：</view>
            <view className='User-box-tourist' onClick={ok}>
              <image className='Ubs-tourist-image' src={touristON} />
              <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={shopBossOFF} />
              <text className='Ubs-shopBoss-text'>店铺老板</text>

            </view>
          </view>

        </Popup>
        <view className='User-info'>
          <view className='User-photos-box'>
            <image src={UserImages} className='User-photos' />
          </view>
          <view className='User-info-all'>
            <view className='User-name'>福西西<image className='User-sex' src={boy} /></view>
            <view className='User-phone'>136****9434</view>
          </view>
          {/* 切换身份 */}
          <view onClick={ShowMoldeOn} className='User-info-cutover'>
            <image className='User-info-cutover-image' src={cutoverUser} />
          </view>
        </view>
        {/* 用户信息结束 */}
        <view className='buy-list-box'>
          <view className='buy-list-Paybox' onClick={handleTobePaid} >
            <image className='buy-list-PayLogo' src={awaitPay} />
            <view className='buy-list-goPay'>待支付</view>
            <view className='buy-list-OrderNumber'>2笔订单</view>
          </view>
          <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
            <image className='buy-list-PayLogo' src={ToShop} />
            <view className='buy-list-goPay'>待核销</view>
            <view className='buy-list-OrderNumber'>1个订单</view>
          </view>
          <view className='buy-list-Paybox ' onClick={handleAllOrder} >
            <image className='buy-list-PayLogo' src={AllOrder} />
            <view className='buy-list-goPay'>全部订单</view>
            <view className='buy-list-OrderNumber'>查看详情</view>
          </view>
          <view className='buy-list-Paybox ' onClick={handleRefund} >
            <image className='buy-list-PayLogo' src={Refund} />
            <view className='buy-list-goPay'>退款/售后</view>
            <view className='buy-list-OrderNumber'>2笔订单</view>
          </view>
        </view>
        <view className='Badge-box'>
          <view className='Badge-list' onClick={handleHomeLogo}>
            <image className='Badge-list-logo' src={HomeLogo} />
            <text className='Badge-list-titme'> 入住指引</text>
            <text className='Badge-list-gt'>&gt;</text>
          </view>
          {/* <view className='Badge-list' onClick={handleRules}>
            <image className='Badge-list-logo' src={MyTravel} />
            <text className='Badge-list-titme'> 我的行程</text>
            <text className='Badge-list-gt'>&gt;</text>
          </view> */}


          <view className='Badge-list' onClick={handleCollect}>
            <image className='Badge-list-logo' src={collect} />
            <text className='Badge-list-titme'> 我的收藏</text>
            <text className='Badge-list-gt'>&gt;</text>
          </view>
          <view className='Badge-list' onClick={handleContactMe}>
            <image className='Badge-list-logo' src={ContactMe} />
            <text className='Badge-list-titme'> 联系我们</text>
            <text className='Badge-list-gt'>&gt;</text>
          </view>
          <view className='Badge-list' onClick={handleRules}>
            <image className='Badge-list-logo' src={Rules} />
            <text className='Badge-list-titme'> 协议声明</text>
            <text className='Badge-list-gt'>&gt;</text>
          </view>
        </view>

      </view>
    </scroll-view>
  )
})