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

export default ()=>{
  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>
  )
}