import { Icon, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import classNames from 'classnames'
import { useState } from 'react'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import { alert } from '@/common/common'
import { GetRebateDetail } from '@/api/user'
import { formatPriceDiv } from '@/common/fotmat'
import Divider from '@/components/divider'

export default () => {
  const openMsg = () => {
    Taro.showModal({
      title: '提示',
      showCancel: false,
      content: '每笔订单产生的返佣，在已收货14天后会自动到账账户余额中，期间中途产生的退货条数会自动扣除，每天9:00自动更新收益。',
      confirmColor: '#337fff',
      confirmText: '我知道了',
    })
  }

  const openWithdraw = () => {
    alert.none('若需提现，请联系线上客服进行处理')
  }

  const { fetchData, state } = GetRebateDetail()

  useReady(() => {
    fetchData()
  })

  return (
    <View className={styles.main}>
      <View className={styles.header}>
        <View className={styles.header_balance_total}>
          <View className={styles.balance}>
            <View>账户余额（元）</View>
            <View className={styles.balance_num}>{formatPriceDiv(state.data.balance).toLocaleString()}</View>
            <View className={styles.accumulative_count}>累计收益<Text>{formatPriceDiv(state.data.total_income).toLocaleString()}</Text>元</View>
          </View>
          <View className={styles.withdraw} onClick={openWithdraw}>
            <IconFont name="icon-lijitixian" size={37} />
            <Text>立即提现</Text>
            <IconFont name="icon-rukou" color="#fff" size={35} />
          </View>
        </View>
        <Divider direction="horizontal" customStyles={{ margin: '0', opacity: '0.6', transform: 'translateY(1px) scaleY(0.6)' }}></Divider>
        <View className={styles.price_list}>
          <View className={styles.price_list_item}>
            <Text>今日收益（元）</Text>
            <Text>{formatPriceDiv(state.data.today_income).toLocaleString()}</Text>
          </View>
          <Divider direction="vertical" customStyles={{ margin: '0', height: '100rpx', opacity: '0.6', transform: 'scaleX(0.6)' }}></Divider>
          <View className={styles.price_list_item}>
            <Text>近14日收益（元）</Text>
            <Text>{formatPriceDiv(state.data.recently_fourteen_day_income).toLocaleString()}</Text>
          </View>
        </View>
      </View>
      <View className={styles.con}>
        <View className={styles.toBeSettled}>
          <View className={styles.text} onClick={openMsg}>
            <Text>待结算收益（元）</Text>
            <IconFont name="icon-tishi" size={30}></IconFont>
          </View>
          <View className={styles.price}>{formatPriceDiv(state.data.wait_settle_income).toLocaleString()}</View>
        </View>
        <View className={styles.card}>
          <View className={styles.title}>
            <Text></Text>
            <Text>主动收益</Text>
          </View>
          <View className={styles.card_list}>
            <View className={styles.card_item}>
              <Text>{state.data.wait_settle_bulk_roll}条</Text>
              <Text>大货条数</Text>
            </View>
            <View className={styles.card_item}>
              <Text>{formatPriceDiv(state.data.wait_settle_bulk_income).toLocaleString()}元</Text>
              <Text>大货收益</Text>
            </View>
          </View>
        </View>
        <View className={styles.card}>
          <View className={styles.title}>
            <Text></Text>
            <Text>被动收益</Text>
          </View>
          <View className={styles.card_list}>
            <View className={styles.card_item}>
              <Text>{state.data.passive_wait_settle_bulk_roll}条</Text>
              <Text>大货条数</Text>
            </View>
            <View className={styles.card_item}>
              <Text>{formatPriceDiv(state.data.passive_wait_settle_bulk_income).toLocaleString()}元</Text>
              <Text>大货收益</Text>
            </View>
            <View className={styles.card_item}>
              <Text>{state.data.passive_wait_settle_user_nums}元</Text>
              <Text>下单用户</Text>
            </View>
            <View className={styles.card_item}>
              <Text>{state.data.passive_wait_settle_bulk_order_nums}元</Text>
              <Text>订单数量</Text>
            </View>
          </View>
        </View>
      </View>

    </View>
  )
}