
import { Button, Canvas, Navigator, ScrollView, Text, View } from '@tarojs/components'
import Taro, { setClipboardData } from '@tarojs/taro'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import { depositInfoApi } from '@/api/deposit'
import { formatPriceDiv, toDecimal2 } from '@/common/fotmat'
import Message from '@/components/Message'
import useLogin from '@/use/useLogin'
import Dialog from '@/components/Dialog'
import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common'

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

  const [showModal, setShowModal] = useState(false)

  const handleClick = () => {
    setShowModal(true)
  }
  const handleCloseModal = () => {
    setShowModal(false)
  }
  const handleChangeModal = (val: boolean) => {
    setShowModal(val)
  }
  const userInfo = useSelector(state => state.userInfo)
  // 联系业务经理
  const handleCallPhone = () => {
    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
    Taro.makePhoneCall({
      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
    })
    handleCloseModal()
  }
  return (
    <View className={styles['deposit-beforehand']}>
      <Message text="汇款成功后，1-5分钟自动到账。" />
      <View className={styles['deposit-beforehand-card']}>
        <View className={styles['deposit-beforehand-balance']}>
          <View className={styles['deposit-beforehand-balance-title']}>余额 (元)</View>
          <Text className={styles['deposit-beforehand-balance-price']}>{toDecimal2(formatPriceDiv(state.data?.amount)).toLocaleString()}</Text>
          <View className={styles['deposit-beforehand-balance-button']} onClick={handleClick}>转出</View>
        </View>
      </View>
      <View className={styles['deposit-beforehand-card']}>
        <View className={styles['deposit-beforehand-info']}>
          <View className={styles['deposit-beforehand-info-title']}>
            <View className={styles['deposit-beforehand-info-title-left']}><Text></Text> 预存款充值</View>
            <View className={styles['deposit-beforehand-info-title-copy']} onClick={handleCopy}>复制</View>
          </View>
          <View className={styles['deposit-beforehand-info-content']}>
            <View className={styles['deposit-beforehand-info-list']}>
              <View className={styles['deposit-beforehand-info-list-left']}>开户名称</View>
              <View className={styles['deposit-beforehand-info-list-right']}>{state.data?.account_name}</View>
            </View>
            <View className={styles['deposit-beforehand-info-list']}>
              <View className={styles['deposit-beforehand-info-list-left']}>开户银行</View>
              <View className={styles['deposit-beforehand-info-list-right']}>{state.data?.bank_of_deposit}</View>
            </View>
            <View className={styles['deposit-beforehand-info-list']}>
              <View className={styles['deposit-beforehand-info-list-left']}>专属汇款账号</View>
              <View className={styles['deposit-beforehand-info-list-right']}>{state.data?.transfer_remittance_account}</View>
            </View>
          </View>
        </View>
      </View>
      <View className={styles['deposit-beforehand-card']}>
        <View className={styles['deposit-beforehand-particulars']}>
          <View className={styles['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>
      <Dialog show={showModal} onClose={handleCloseModal} onChange={handleChangeModal}>
        <View className={styles['deposit-beforehand-dialog']}>
          <View className={styles['deposit-beforehand-dialog-title']}>提示</View>
          <View className={styles['deposit-beforehand-dialog-content']}>若需提现，请联系业务经理进行转出</View>
          <View className={styles['deposit-beforehand-dialog-bottom']}>
            <View className={classNames(styles['deposit-beforehand-dialog-button'], styles['deposit-beforehand-dialog-button-cancel'])} onClick={handleCloseModal}>取消</View>
            <View className={classNames(styles['deposit-beforehand-dialog-button'], styles['deposit-beforehand-dialog-button-confirm'])} onClick={handleCallPhone}>联系业务经理</View>
          </View>
        </View>
      </Dialog>
    </View>
  )
}

export default DepositBeforehand
