import { Button, Image, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
import classnames from 'classnames'
import { useMemo } from 'react'
import styles from './index.module.scss'
import namedPng from '@/styles/image/user_header.png'
import price_bg from '@/styles/image/price_bg.png'
import LabAndImg from '@/components/LabAndImg'
import { useSelector } from '@/reducers/hooks'
import { alert, goLink } from '@/common/common'
import { formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import { userassets, userorderStatistics } from '@/api/mine'
import useLogin from '@/use/useLogin'
import IconFont from '@/components/iconfont/iconfont'

export default () => {
  const userInfo = useSelector(state => state.userInfo)
  const { fetchData: Apiassets, state: priceState } = userassets()
  const { fetchData: ApigetTotal, state: orderState } = userorderStatistics()
  const { getAdminUserInfo, getPhoneNumber } = useLogin()

  useDidShow(() => {
    ApigetTotal()
    getAdminUserInfo()
    Apiassets()
  })

  const priceList = useMemo(() => {
    console.log('priceState::', priceState.data)
    return [
      {
        label: '预存货款(元)',
        value: formatPriceDiv(priceState?.data?.wallet_money || 0, 100, true),
      },
      {
        label: '账期货款(元)',
        value: formatPriceDiv(priceState?.data.credit_line || 0, 100, true),
      },
    ]
  }, [priceState])

  const orderList = useMemo(() => {
    return [
      { label: '待配布', icon: 'icon-daipeibu2', url: '/pages/order/orderList/index?status=0', number: orderState?.data?.wait_match > 99 ? '99+' : orderState?.data?.wait_match },
      { label: '待付款', icon: 'icon-daifukuan2', url: '/pages/order/orderList/index?status=1', number: orderState?.data?.wait_pay > 99 ? '99+' : orderState?.data?.wait_pay },
      { label: '待发货', icon: 'icon-daifahuo2', url: '/pages/order/orderList/index?status=2', number: orderState?.data?.wait_shipped > 99 ? '99+' : orderState?.data?.wait_shipped },
      { label: '待收货', icon: 'icon-daishouhuo2', url: '/pages/order/orderList/index?status=3', number: orderState?.data?.already_shipped > 99 ? '99+' : orderState?.data?.already_shipped },
      { label: '退款/售后', icon: 'icon-tuikuan-shouhou', url: '/pages/salesAfter/salesAfterList/index', number: orderState?.data?.after_return > 99 ? '99+' : orderState?.data?.after_return },
    ]
  }, [orderState])

  const menuList = [
    { label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
    { label: '码单管理', icon: 'icon-yanseduibi', callback: () => goLink('/pages/weightList/index') },
    { label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
    { label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', type: 'customer' },
  ]

  const mGetPhoneNumber = (ev) => {
    if (ev.detail?.code) {
      getPhoneNumber(ev.detail.code)
    }
    else {
      alert.none('绑定失败!')
    }
  }

  const integral = () => {
    alert.none('【积分】暂未对外开放 敬请期待')
  }

  usePullDownRefresh(async() => {
    await ApigetTotal()
    await getAdminUserInfo()
    await Apiassets()
    Taro.stopPullDownRefresh()
  })

  return <View className={styles.user_main}>
    {!userInfo?.adminUserInfo?.phone && <Button className={styles.getPhoneButton} openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}></Button>}
    <View className={styles.user_main__header}>
      <View className={styles.header_img_name}>
        <View className={styles.header_img}>
          <Image className={styles.header_img_src} mode="aspectFill" src={`${userInfo?.adminUserInfo?.avatar_url}`} />
        </View>
        <View className={styles.header_name}>
          <Text>{userInfo?.adminUserInfo?.phone ? userInfo?.adminUserInfo?.user_name : '点击登录'}</Text>
          <View className={styles['arcd-info-left-phone']}>
            <View className={styles.header_title}> {userInfo?.adminUserInfo?.phone || 'Hi,欢迎来到陆盈商城'}</View>
          </View>
          <View className={styles.header_picture} ><IconFont name="icon-renzhengchenggong" size={30} /><View className={styles.header_picture_name}>{userInfo?.adminUserInfo?.company_name}</View></View>
        </View>
        <View className={styles.header_setting} onClick={() => goLink('/pages/userEdit/index')}>
          <IconFont name="icon-shezhi" size={50} />
        </View>
      </View>
      <View className={styles.header_count}>
        <View className={styles.header_count__item} onClick={() => goLink('/pages/collection/index')}>
          <Text>{userInfo?.adminUserInfo?.collection_quantity || 0}</Text>
          <Text>商品收藏</Text>
        </View>
        <View className={styles.header_count__item} onClick={integral}>
          <Text>0</Text>
          <Text>活动积分</Text>
        </View>
        <View className={styles.header_count__item}>
          <IconFont name="icon-erweima" size={50} />
          <Text>邀请码</Text>
        </View>
      </View>
      {userInfo?.adminUserInfo?.order_access_status == 3 && <View className={styles.price_count}>
        <View className={styles.price_count_list}>
          {priceList?.map((item, index) => {
            return <View key={index} className={styles.list_item} >
              <Text className={styles.list_item_title}>{item.label}</Text>
              <View className={styles.list_item_number}><Text>¥</Text> {item.value}</View>
            </View>
          })}
          <Image className={styles.price_bg} src={formatImgUrl('/mall/price_bg.png', '')} mode="aspectFit"></Image>
        </View>
      </View>}
      <Image className={styles.header_bg} src={formatImgUrl('/mall/user_header_bg.png', '')} mode="aspectFit"></Image>
    </View>
    <View className={styles.order_count}>
      <View className={styles.order_count__title}>
        <Text className={styles.title_text}>我的订单</Text>
        <View className={styles.title__more} onClick={() => goLink('/pages/order/orderList/index')}>
          <Text>全部订单</Text>
          <View className={styles.title_more_icon}><IconFont name="icon-xiala" size={35} /></View>
        </View>
      </View>
      <View className={styles.order_count__list}>
        {orderList?.map((item, index) => {
          return <View key={index} className={styles.order_count__item} onClick={() => goLink(item.url)}>
            <IconFont name={item.icon as any} size={70} />
            <Text className={styles.item_img}>{item.label}</Text>
            {!!item.number && <Text className={styles.order_number}>{item.number}</Text>}
          </View>
        })}

      </View>
    </View>
    <View className={styles.nav_list}>
      <View className={styles.nav_list__title}>
        <Text className={styles.title_text}>我的服务</Text>
      </View>
      <View className={styles.list_con}>
        {menuList.map((item, index) => {
          return <View key={index} className={styles.list_item} onClick={item?.callback}>
            <IconFont name={item.icon as any} size={70} />
            <View className={styles.list_item_con}>
              <Text>{item.label}</Text>
              <View className={styles.title_more_kf}>
                <Text>{item.text}</Text>
                <View className={styles.title_more_icon}><IconFont name="icon-xiala" size={40} /></View>
              </View>
            </View>
            {item.type == 'customer' && <Button openType="contact" className={styles.customer} />}
          </View>
        })}
      </View>
    </View>
  </View>
}
