import { Button, Input, Textarea, View } from '@tarojs/components'
import Taro, { faceVerifyForPay, useDidShow, useRouter } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import dayjs from 'dayjs'
import styles from './index.module.scss'
import Form from './components/form'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
  MpCashManagementOrder,
} from '@/api/newCollection'
import smallToBig from '@/common/money'

const CollectionDetail = () => {
  const router = useRouter()
  const [Query, setQuery] = useState<any>({})
  const { fetchData: getFetch } = MpCashManagementOrder()

  const getDetail = async() => {
    Taro.showLoading({
      title: '请稍等',
      mask: true,
    })
    const res = await getFetch({ id: Number(router.params.id) })
    if (res.data) {
      // res.data?.payment_credential_url?.map(it => {
      //     it = IMG_CND_Prefix + it
      //     return it
      // })
      Taro.hideLoading()
      setQuery(res.data)
    }
  }

  useEffect(() => {
    setQuery(Query)
  }, [Query])

  const money = useMemo(() => {
    let res = 0
    res = Query.receipt_amount / 100
    return res
  }, [Query])
  useEffect(() => {
    getDetail()
  }, [])
  return (
    <>
      <View className={styles.topBox}>
        <View className={styles.topFont}>收款金额（元）</View>
        <View className={styles.topMon}>{money}</View>
        <View className={styles.topBigMon}>{smallToBig(typeof (money) == 'undefined' ? 0 : money)}</View>
      </View>
      <View className={styles.addBox}>
        <View className={styles.msgBox}>
          <View className={styles.msgLeft}>订单编号</View>
          <View className={styles.msgFlex}>
            <View className={styles.msgName}>{Query.order_no}</View>
            <View className={styles.msgTime} style={{ color: '#E42945' }}>{Query.auditor_status_name}</View>
          </View>
        </View>
        <Form
          title="客户名称"
          require={false}
          isInput
          disabled
          inputValue={Query.purchaser_name}
          showMore={false}
          showScan={false}
          styleNone
          showPic={false}
          showSizeFont={false}
        ></Form>
        {/* <Form
                    title={'收款金额'}
                    require={false}
                    isInput={true}
                    disabled={true}
                    inputType={'digit'}
                    showMore={false}
                    inputValue={money as any}
                    showScan={false}
                    styleNone={true}
                    showPic={false}
                    showSizeFont={true}
                    bigMoney={smallToBig(typeof (money) == 'undefined' ? 0 : money)}
                ></Form> */}
        <Form
          styleNone={false}
          title="收款凭证"
          require={false}
          PicList={Query?.payment_credential_url}
          isInput={false}
          showMore={false}
          showScan={false}
          onlyRead
          showPic
          showSizeFont={false}
        ></Form>
        <Form
          title="收款账户"
          require={false}
          isInput={false}
          disabled
          inputValue={Query.receiving_account}
          showMore={false}
          showScan={false}
          styleNone
          showPic={false}
          showSizeFont={false}
        ></Form>
        <View className={styles.textAreaBox}>
          <View className={styles.textAreaLeft}>备注信息</View>
          <View className={styles.textAreaRight}>
            {
              Query.remark !== '' && <Textarea
                disabled
                style={{ width: '70%' }}
                value={Query.remark}
                placeholderStyle="font-size: 28rpx;font-weight: 400;"
                autoFocus
                maxlength={64}
              ></Textarea>
            }

            {/* <View className={styles.numsTotal}>{`${typeof (Query.nums) == 'undefined' ? 0 : Query.nums}/64`}</View> */}
          </View>
        </View>
        <View className={styles.msgBox}>
          <View className={styles.msgLeft}>创建信息</View>
          <View className={styles.msgFlex}>
            <View className={styles.msgName}>{Query.creator_name}</View>
            <View className={styles.msgTime}>{formatDateTime(Query.create_time)}</View>
          </View>
        </View>
        <View className={styles.msgBox} style={{ borderBottom: 'none', paddingBottom: '10rpx' }}>
          <View className={styles.msgLeft}>审核信息</View>
          <View className={styles.msgFlex}>
            <View className={styles.msgName}>{Query.auditor_name}</View>
            <View className={styles.msgTime}>{formatDateTime(Query.audit_time)}</View>
          </View>
        </View>
      </View >
      <View className={styles.safeBox} style={{ height: '200rpx' }}></View>
    </>
  )
}

export default CollectionDetail