import { View, Image, Text, Navigator, Button } from '@tarojs/components'
import { memo, useEffect, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { useSelector } from '@/reducers/hooks'
import { alert, goLink } from '@/common/common'
import useLogin from '@/use/useLogin'
import { BASE_URL } from '@/common/constant'
import Taro, { useShareAppMessage } from '@tarojs/taro'
import { userassets, userorderStatistics } from '@/api/mine'
import { formatPriceDiv } from '@/common/fotmat'
import { useDidShow } from '@tarojs/taro'
import { GetAdminUserInfoApi } from '@/api/user'

export default () => {
  // 用户信息
  const { getSelfUserInfo, getAdminUserInfo } = useLogin()
  const { adminUserInfo } = useSelector((state) => state.userInfo)

  const [current_version, setCurrent_version] = useState(CURRENT_VERSION)
  const [current_githash, setCurrent_githash] = useState(CURRENT_GITHASH)
  const [current_env, setCurrent_env] = useState(CURRENT_ENV)

  const handleAuth = async () => {
    console.log('授权面版')
    if (adminUserInfo?.is_authorize_name) return false
    getSelfUserInfo()
      .then()
      .catch(() => {
        alert.none('授权失败，请授权后再使用')
      })
  }
  const { fetchData: Apiassets, state } = userassets()
  const { fetchData: ApigetTotal, state: stateData } = userorderStatistics()

  useDidShow(() => {
    ApigetTotal()
    getAdminUserInfo()
    Apiassets()
  })
  const checkGo = async () => {
    if (adminUserInfo?.authentication_status !== 4) {
      let res = await Taro.showModal({
        title: '提示',
        content: '你暂未开通授信，目前仅支持线下申请，开通后可使用账期采购。',
        cancelText: '稍后认证',
        confirmText: '联系客服',
      })
      if (res.confirm) {
        Taro.showModal({
          content: '联系电话:0757-8270 6695',
          cancelText: '取消',
          confirmText: '拨打',
          success: function (res) {
            if (res.confirm) {
              Taro.makePhoneCall({
                phoneNumber: '(0757)82706695',
              })
            }
          },
        })
      }
    } else {
      Taro.navigateTo({
        url: '/pages/creditLine/index',
      })
    }
  }
  return (
    <View className={styles.main}>
      <Header data={adminUserInfo} MenuData={stateData} />
      <Assets data={state} checkShow={() => checkGo()} userInfo={adminUserInfo} />
      <Main />
      {/* {(adminUserInfo as any)?.authentication_status==1&&<Modal data={adminUserInfo}/>} */}
      {/* 测试暂时添加 */}
      <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{current_version}</View>
      {current_env === 'development' && <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{BASE_URL}</View>}
      {!adminUserInfo?.is_authorize_name && <View onClick={handleAuth} catchMove className={styles['auth-suspension']}></View>}
    </View>
  )
}
// 提示弹窗
const Modal = memo((props: any) => {
  const { data } = props
  const [modalShow, setModalShow] = useState(true)
  const handleouter = () => {}
  return (
    <>
      {modalShow && (
        <View onClick={handleouter} catchMove className={styles['tips-modal']}>
          <View className={styles['tips-modal-content']} onClick={(e) => e.stopPropagation()}>
            <View className={styles['tips-modal-title']}>首次登录提醒</View>
            <View className={styles['tips-modal-letter']}>
              <View className={styles['tips-modal-letter-beginn']}>To: 万丰园纺织科技</View>
              <View className={styles['tips-modal-letter-text']}>
                尊敬的老朋友，欢迎你使用小程序商城；由于您是我们长期合作的伙伴，你的组织已自动为你生成，关联后可查看历史订单哟。
              </View>
              <View className={styles['tips-modal-letter-end']}>信息错误请联系客服</View>
            </View>
            <View className={styles['tips-modal-button']}>
              <Button hoverClass='none' openType='contact'>
                联系客服
              </Button>
              <View onClick={() => setModalShow(false)}>我知道</View>
            </View>
          </View>
        </View>
      )}
    </>
  )
})

// 头部 | 订单
const Header = memo((props: any) => {
  const { data } = props
  console.log(props, 'propsprops')
  let menu = [
    { text: '待配布', icon: 'icon-daipeibu', url: '/pages/order/orderList/index?status=0' },
    { text: '待付款', icon: 'icon-daifukuan', url: '/pages/order/orderList/index?status=1' },
    { text: '待发货', icon: 'icon-daifahuo', url: '/pages/order/orderList/index?status=2' },
    { text: '待收货', icon: 'icon-yifahuo', url: '/pages/order/orderList/index?status=3' },
    { text: '退款/售后', icon: 'icon-a-tuikuanshouhou', url: '/pages/salesAfter/salesAfterList/index' },
  ]
  const { getPhoneNumber } = useLogin()
  const mGetPhoneNumber = (ev) => {
    if (ev.detail?.code) {
      getPhoneNumber(ev.detail.code)
    } else {
      alert.none('绑定失败!')
    }
  }
  const navTo = () => {
    Taro.navigateTo({
      //   url: '/pages/certification/index',
      url: '/pages/userEdit/index',
    })
  }
  return (
    <View className={styles.header} onClick={props.onClick}>
      <View className={`${styles.crad} ${styles['header-card']}`}>
        <View className={styles['card-info']}>
          <View className={styles['arcd-info-left']}>
            <View className={styles['arcd-info-left-portrait']}>
              <Image src={data?.avatar_url} />
            </View>
            <View className={styles['arcd-info-left-desc']}>
              <View className={styles['arcd-info-left-nickname']}>
                {/* {state.data.user_name} */}
                {data?.user_name}
              </View>
              <View className={styles['arcd-info-left-phone']}>
                {data?.phone ? (
                  data?.phone?.replace(data?.phone?.substring(3, 7), '****')
                ) : (
                  <Button openType='getPhoneNumber' onGetPhoneNumber={mGetPhoneNumber}>
                    绑定手机号码
                  </Button>
                )}
              </View>
            </View>
          </View>
          <View className={styles['card-info-right']}>
            <Navigator hoverClass='none' url='/pages/userEdit/index' className={styles['setup-icon']}>
              <View className={classnames(styles['icon-wrapper'], 'iconfont', 'icon-shezhi')}></View>
              <View className={styles['icon-point']}></View>
            </Navigator>
          </View>
        </View>
        <View className={styles['auth']}>
          {(data?.authentication_status == 0 || data?.authentication_status == 1) && data?.order_access_status == 3 && (
            <View className={styles['auth-box']} onClick={() => navTo()}>
              <View className={styles['auth-left-box']}>
                <View className={styles['auth-tag']}>未认证</View>
                <View className={styles['auth-cont']}>{data?.company_name || '暂未加入或注册组织'}</View>
              </View>
              <Text className='iconfont icon-a-moreback'></Text>
            </View>
          )}
          {data?.authentication_status == 3 && data?.order_access_status == 3 && (
            <View className={styles['auth-box']} onClick={() => navTo()}>
              <View className={styles['auth-left-box']}>
                <View className={styles['auth-tagthree']}>认证失败</View>
                <View className={styles['auth-cont']}>{data?.company_name || '暂未加入或注册组织'}</View>
              </View>
              <Text className='iconfont icon-a-moreback'></Text>
            </View>
          )}
          {data?.authentication_status == 2 && data?.order_access_status == 3 && (
            <View className={styles['auth-box']} onClick={() => navTo()}>
              <View className={styles['auth-left-box']}>
                <View className={styles['auth-tagone']}>认证中</View>
                <View className={styles['auth-contone']}>{data?.company_name || '暂未加入或注册组织'}</View>
              </View>
              <Text className='iconfont icon-a-moreback'></Text>
            </View>
          )}
          {data?.authentication_status == 4 && data?.order_access_status == 3 && (
            <View className={styles['auth-box']} onClick={() => navTo()}>
              <View className={styles['auth-left-box']}>
                <View className={styles['auth-tagtwo']}>
                  <View className={styles['iconFont-color']}>
                    <Text className='iconfont icon-xtianzhangqi'></Text>
                  </View>
                  <View className={styles['auth-font']}>已认证</View>
                </View>
                <View className={styles['auth-contone']}>{data?.company_name}</View>
              </View>
              <Text className='iconfont icon-a-moreback'></Text>
            </View>
          )}
          {/* <View className={`${styles['auth-top']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
						<View className={`${styles['auth-status']} ${data?.authentication_status==2&&styles['auth-status-ongoing']} ${data?.authentication_status==4&&styles['auth-status-adopt']}`}>
							<Text>1</Text>
							{data?.authentication_status==1&&"未认证"}
							{data?.authentication_status==2&&"认证中"}
							{data?.authentication_status==3&&"认证不通过"}
							{data?.authentication_status==4&&"已认证"}
						</View>
						{data?.authentication_status==1&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>认证通过后，解锁更多权限 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==2&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>1-3个工作日，审核完成 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==3&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==4&&<View className={styles['auth-tips']}>认证通过，可以下单啦 <Text className="iconfont icon-a-moreback"/></View>}
					</View> */}
          {/* <View className={`${styles['auth-company']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
						{data?.authentication_status==1&&"暂未加入或注册组织"}
						{data?.authentication_status==2&&data?.company_name}
						{data?.authentication_status==3&&data?.company_name}
						{data?.authentication_status==4&&data?.company_name}
					</View> */}
        </View>
        <View className={styles['card-main']}>
          <View className={styles['card-main-title']}>
            <View className={styles.card_main_title_order}>订单</View>
            <View className={styles.order_more} onClick={() => goLink('/pages/order/orderList/index')}>
              全部<Text className='iconfont icon-a-moreback'></Text>
            </View>
          </View>
          <View className={styles['card-main-title-content']}>
            {menu.map((item, index) => {
              return (
                <Navigator hoverClass='none' url={item.url} className={styles['card-main-title-content-item']}>
                  <Text className={`iconfont ${item.icon}`}></Text>
                  <View>{item.text}</View>
                  {index == 0 && props.MenuData.data.wait_match !== 0 && (
                    <View className={styles['card-main-title-content-item-badge']}>
                      {props.MenuData.data.wait_match > 99 ? '99+' : props.MenuData.data.wait_match}
                    </View>
                  )}
                  {index == 1 && props.MenuData.data.wait_pay !== 0 && (
                    <View className={styles['card-main-title-content-item-badge']}>
                      {props.MenuData.data.wait_pay > 99 ? '99+' : props.MenuData.data.wait_pay}
                    </View>
                  )}
                  {index == 2 && props.MenuData.data.wait_shipped !== 0 && (
                    <View className={styles['card-main-title-content-item-badge']}>
                      {props.MenuData.data.wait_shipped > 99 ? '99+' : props.MenuData.data.wait_shipped}
                    </View>
                  )}
                  {index == 3 && props.MenuData.data.already_shipped !== 0 && (
                    <View className={styles['card-main-title-content-item-badge']}>
                      {props.MenuData.data.already_shipped > 99 ? '99+' : props.MenuData.data.already_shipped}
                    </View>
                  )}
                  {index == 4 && props.MenuData.data.after_return !== 0 && (
                    <View className={styles['card-main-title-content-item-badge']}>
                      {props.MenuData.data.after_return > 99 ? '99+' : props.MenuData.data.after_return}
                    </View>
                  )}
                </Navigator>
              )
            })}
          </View>
        </View>
      </View>
    </View>
  )
})
// 我的资产
const Assets = (props: any) => {
  return (
    <>
      {(props?.userInfo?.order_access_status == 3 && (
        <View className={`${styles.assets} ${styles.crad} ${styles['main-card']}`}>
          <View className={`${styles['assets-title']}`}>我的资产</View>
          <View className={`${styles['assets-content']}`}>
            <Navigator hoverClass='none' url='/pages/depositBeforehand/index'>
              <View className={`${styles['assets-content-item-top']}`}>
                <Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
                <Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.wallet_money || 0, 100, true)}</Text>
                {/* <Text className={`${styles['assets-content-item-top-after']}`}>{props.wallet_money || 0}</Text> */}
              </View>
              <Text className={`${styles['assets-content-item-tips']}`}>预存款</Text>
            </Navigator>
            {/* <View>
						<View className={`${styles['assets-content-item-top']}`}>
							<Text className={`${styles['assets-content-item-top-content']}`}>{props.data.data.coupon_count || 0}</Text>
							<Text className={`${styles['assets-content-item-top-after']}`}>张</Text>
						</View>
						<Text className={`${styles['assets-content-item-tips']}`}>优惠券</Text>
					</View> */}
            <Navigator hoverClass='none' onClick={() => props.checkShow()}>
              <View className={`${styles['assets-content-item-top']}`}>
                <Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
                <Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.credit_line || 0, 100, true)}</Text>
                {/* <Text className={`${styles['assets-content-item-top-after']}`}>.-00</Text> */}
              </View>
              <Text className={`${styles['assets-content-item-tips']}`}>授信额度</Text>
            </Navigator>
          </View>
        </View>
      )) || <View className={styles['main-card']}></View>}
    </>
  )
}

// 功能
const Main = memo(() => {
  let menu = [
    { text: '我的客服', icon: 'icon-wodekefu', type: 'customer', label: '(0757) 8270 6695' },
    { text: '地址管理', icon: 'icon-daohang', url: '/pages/addressManager/index', type: 'url' },
    { text: '码单管理', icon: 'icon-a-yuanmadanmadanguanli', url: '/pages/weightList/index', type: 'url' },
    { text: '我的收藏', icon: 'icon-shoucang', url: '/pages/collection/index', type: 'url' },
    { text: '颜色对比', icon: 'icon-yanseduibi', url: '/pages/sampleComparison/index', type: 'url' },
    // { text: "分享推广", icon: "icon-fenxiang" },
    { text: '邀请码', icon: 'icon-yaoqingma', url: '/pages/bindSalesman/index', type: 'url' },
  ]
  const navigation = (item) => {
    if (item.type === 'url') goLink(item.url)
  }
  return (
    <View className={`${styles.crad} ${styles['card-main']} ${styles['card-feature']}`}>
      <View className={styles['card-main-list-content']}>
        {menu.map((item, index) => {
          return (
            <View hoverClass='none' onClick={() => navigation(item)} key={index} className={styles['card-main-list-content-item']}>
              <View className={styles['card-main-list-content-item-left']}>
                <Text className={`iconfont ${item.icon}`}></Text>
                <View>{item.text}</View>
              </View>
              <View className={styles.label}>{item.label}</View>
              <View className={styles['card-main-list-content-item-right']}>
                <Text className='iconfont icon-a-moreback'></Text>
              </View>
              {item.type === 'customer' && <Button openType='contact' className={styles.customer}></Button>}
            </View>
          )
        })}
      </View>
    </View>
  )
})