
import { useState, useRef, useEffect } 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 girl from '@/assets/icons/UserCenter/girl.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 [userState] = useRef({})
  const [userLogin, setUserLogin] = useState('NotLogin')

  const [userImage, setUserImage] = useState(UserImages)
  const [userName, setUserName] = useState('请点击登陆')
  const [userSex, setUserSex] = useState(girl)



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

  useEffect(() => {
    if (userImage === UserImages) {
      Taro.showToast({
        title: '未登陆，请先登陆',
        icon: 'error',
        duration: 2000
      })
    } else {
      setUserLogin('Login')
    }
  }, [userName, userImage])


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




  // 通过getUserProfile获取微信用户信息
  const handleGetUserProfile = () => {
    if (userImage === UserImages && userName === '请点击登陆') {
      Taro.getUserProfile({
        lang: 'zh_CN',
        desc: "获取你的昵称、头像、地区及性别",
        success: res => {
          const avatarUrl = res.userInfo.avatarUrl
          const nickName = res.userInfo.nickName
          const gender = res.userInfo.gender
          setUserImage(avatarUrl)
          setUserName(nickName)
          if (gender === 0) {

          } else {
            setUserSex(boy)

          }
          console.log('getUserProfile', res);

        },
        fail: () => {
          //拒绝授权
          console.error("您拒绝了请求");
          return;
        }
      })
    } else {

    }


  };
  // --------------头-----------
  //#region 
  // 待支付
  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' })
  }
  //#endregion
  // --------------尾-----------


  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'>
              <image className='Ubs-tourist-image' src={touristON} />
              <text className='Ubs-tourist-text'>游客</text>
            </view>
            <view className='User-box-hotelBoss'>
              <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
              <text className='Ubs-hotelBoss-text'>民宿老板</text>

            </view>
            <view className='User-box-shopBoss'>
              <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={userImage} className='User-photos' />
          </view>
          <view className='User-info-all'>
            <view onClick={() => handleGetUserProfile()} className='User-name'>{userName}</view>
            <view className='User-phone'>136****9434</view>
            <image className='User-sex' src={userSex} />
          </view>
          {/* 切换身份 */}
          <view onClick={ShowMoldeOn} className='User-info-cutover'>
            <image className='User-info-cutover-image' src={cutoverUser} />
          </view>
        </view>
        {
          userLogin === 'Login' &&
          <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={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>

        }

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