import {useEffect, useState} from "react";
import Taro from '@tarojs/taro';
import {Button, Space} from '@nutui/nutui-react-taro'
import {TriangleDown,ArrowLeft} from '@nutui/icons-react-taro'
import {Popup, NavBar} from '@nutui/nutui-react-taro'
import {Image} from '@nutui/nutui-react-taro'
import {TenantId} from "@/utils/config";

const Header = (props: any) => {
  const [IsLogin, setIsLogin] = useState<boolean>(true)
  const [showBasic, setShowBasic] = useState(false)
  const [statusBarHeight, setStatusBarHeight] = useState<number>()

  // const onNav = () => {
  //   if (!IsLogin) {
  //
  //     return false;
  //   }
  //   Taro.switchTab({
  //     url: '/pages/user/user',
  //   })
  // }
  const reload = () => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
  }

  /* 获取用户手机号 */
  const handleGetPhoneNumber = ({detail}) => {
    const {code, encryptedData, iv} = detail
    Taro.login({
      success: function () {
        if (code) {
          Taro.request({
            url: 'https://server.gxwebsoft.com/api/wx-login/loginByMpWxPhone',
            method: 'POST',
            data: {
              code,
              encryptedData,
              iv,
              notVerifyPhone: true,
              refereeId: 0,
              sceneType: 'save_referee',
              tenantId: TenantId
            },
            header: {
              'content-type': 'application/json',
              TenantId
            },
            success: function (res) {
              Taro.setStorageSync('access_token', res.data.data.access_token)
              Taro.setStorageSync('UserId', res.data.data.user.userId)
              setIsLogin(true)
              // 重新加载小程序
              Taro.reLaunch({
                url: '/pages/index/index'
              })
            }
          })
        } else {
          console.log('登录失败！')
        }
      }
    })
  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
        onBackClick={() => {
        }}
        left={
          !IsLogin ? (
            <div style={{display: 'flex', alignItems: 'center'}}>
              <Button style={{color: '#000'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                <Space>
                  <Image
                    src={props.user?.avatar || 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMzAiIGZpbGw9IiNGNUY1RjUiLz4KPGNpcmNsZSBjeD0iMzAiIGN5PSIyNCIgcj0iMTAiIGZpbGw9IiNEOUQ5RDkiLz4KPHBhdGggZD0iTTEwIDUwQzEwIDQwIDIwIDM1IDMwIDM1QzQwIDM1IDUwIDQwIDUwIDUwIiBmaWxsPSIjRDlEOUQ5Ii8+Cjwvc3ZnPgo='}
                    style={{
                      width: '22px',
                      height: '22px',
                      borderRadius: '50%',
                      objectFit: 'cover'
                    }}
                    mode="aspectFill"
                  />
                  <span style={{color: '#000'}}>{props.user?.nickname}</span>
                </Space>
              </Button>
              <TriangleDown size={9}/>
            </div>
          ) : (
            <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}  onClick={() => Taro.switchTab({url: '/pages/index/index'})}>
              <Button icon={<ArrowLeft />} />
            </div>
          )}>
      </NavBar>
      <Popup
        visible={showBasic}
        position="bottom"
        style={{width: '100%', height: '100%'}}
        onClose={() => {
          setShowBasic(false)
        }}
      >
        <div style={{padding: '12px 0', fontWeight: 'bold', textAlign: 'center'}}>车辆信息</div>
      </Popup>
    </>
  )
}
export default Header
