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

export default () => {

    const router = useRouter()
    const [Query, setQuery] = useState<any>({})
    const { fetchData: getFetch } = mpcashManagementOrder()
    useEffect(() => {
        getDetail()
    }, [])
    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])


    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={true}
                    disabled={true}
                    inputValue={Query.purchaser_name}
                    showMore={false}
                    showScan={false}
                    styleNone={true}
                    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={true}
                    showPic={true}
                    showSizeFont={false}
                ></Form>
                <Form
                    title={'收款账户'}
                    require={false}
                    isInput={false}
                    disabled={true}
                    inputValue={Query.receiving_account}
                    showMore={false}
                    showScan={false}
                    styleNone={true}
                    showPic={false}
                    showSizeFont={false}
                ></Form>
                <View className={styles.textAreaBox}>
                    <View className={styles.textAreaLeft}>备注信息</View>
                    <View className={styles.textAreaRight}>
                        {
                            Query.remark !== '' && <Textarea
                                disabled={true}
                                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>
        </>
    )
}