
import { Button, Canvas, Navigator, ScrollView, Text, View } from '@tarojs/components'
import './index.scss'
import { setClipboardData } from '@tarojs/taro'
import { useEffect } from 'react'
import { depositInfoApi } from '@/api/deposit'
import { formatPriceDiv, toDecimal2 } from '@/common/fotmat'
import Message from '@/components/Message'
import useLogin from '@/use/useLogin'

const DepositBeforehand = () => {
  useLogin()
  const { fetchData, state } = depositInfoApi()
  const getData = async() => {
    fetchData()
  }
  useEffect(() => {
    getData()
  }, [])
  // 复制
  const handleCopy = () => {
    setClipboardData({ data: state.data?.transfer_remittance_account })
  }

  return (
    <View className="deposit-beforehand">
      <Message text="汇款成功后，1-5分钟自动到账。" />
      <View className="deposit-beforehand-card">
        <View className="deposit-beforehand-balance">
          <View className="deposit-beforehand-balance-title">余额 (元)</View>
          <Text className="deposit-beforehand-balance-price">{toDecimal2(formatPriceDiv(state.data?.amount)).toLocaleString()}</Text>
          <View className="deposit-beforehand-balance-button">转出</View>
        </View>
      </View>
      <View className="deposit-beforehand-card">
        <View className="deposit-beforehand-info">
          <View className="deposit-beforehand-info-title">
            <View className="deposit-beforehand-info-title-left"><Text></Text> 预存款充值</View>
            <View className="deposit-beforehand-info-title-copy" onClick={handleCopy}>复制</View>
          </View>
          <View className="deposit-beforehand-info-content">
            <View className="deposit-beforehand-info-list">
              <View className="deposit-beforehand-info-list-left">开户名称</View>
              <View className="deposit-beforehand-info-list-right">{state.data?.account_name}</View>
            </View>
            <View className="deposit-beforehand-info-list">
              <View className="deposit-beforehand-info-list-left">开户银行</View>
              <View className="deposit-beforehand-info-list-right">{state.data?.bank_of_deposit}</View>
            </View>
            <View className="deposit-beforehand-info-list">
              <View className="deposit-beforehand-info-list-left">专属汇款账号</View>
              <View className="deposit-beforehand-info-list-right">{state.data?.transfer_remittance_account}</View>
            </View>
          </View>
        </View>
      </View>
      <View className="deposit-beforehand-card">
        <View className="deposit-beforehand-particulars">
          <View className="deposit-beforehand-particulars-left">收支明细</View>
          <Navigator hoverClass="none" url="/pages/depositList/index" className="deposit-beforehand-particulars-right">
            全部 <Text className="iconfont icon-a-moreback"></Text>
          </Navigator>
        </View>
      </View>
    </View>
  )
}

export default DepositBeforehand
