import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { Slot } from '@tarojs/components'
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 DefaultImage from '@/assets/icons/UserCenter/DefaultImage.png'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import SwitchSelect from '@/components/SwitchSelect'
import { PaysOrder, getMineOrder } from '@/services/payOrder' //创建订单

import { useModel } from '@/store'
import './MineCss/style.less'



export default (props) => {
  const { person } = props


  const { getAvatar } = useModel('person')
  const [showCutover, setShowCutover] = useState(false)
  const hasAvatar = !!person.avatar
  const [orderNum, setOrderNum] = useState([])
  console.log("🚀 ~ file: Mine.jsx ~ line 34 ~ orderNum", orderNum)


  const ShowMoldeOn = () => {
    setShowCutover(!showCutover)
  }

  useEffect(() => {
    getMineOrder().then(res => setOrderNum(res))

  }, [])



  // 通过getUserProfile获取微信用户信息
  const handleGetUserProfile = () => {
    if (hasAvatar) return;

    Taro.getUserProfile({
      lang: 'zh_CN',
      desc: "获取你的昵称、头像、地区及性别",
      success: (res) => {
        const sessionKey = Taro.getStorageSync('sessionKey')
        const data = {
          ...res,
          sessionKey,
        }
        getAvatar(data)

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

  };
  //#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'>
        {/* 身份切换 */}
        <SwitchSelect show={showCutover} maskClosable />
        <view className='User-info'>
          <view className='User-photos-box'>
            <image src={person.avatar || { DefaultImage }} className='User-photos' />
          </view>
          <view className='User-info-all'>
            <view onClick={handleGetUserProfile} className='User-name'>{hasAvatar ? person.nickName : '点击授权头像'}</view>
            <view className='User-phone'>{person.phone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2") || ''}</view>
            <image className='User-sex' src={person.sex === 1 ? boy : girl} />
          </view>
          {/* 切换身份 */}
          <view onClick={ShowMoldeOn} className='User-info-cutover'>
            <image className='User-info-cutover-image' src={cutoverUser} />
          </view>
        </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'>{orderNum?.unPayNum}笔订单</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'>{orderNum?.unVerifiedNum}个订单</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'>{orderNum?.refundNum}笔订单</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>
  )
}