import Popup from "@/components/popup";
import TextareaEnhance from "@/components/textareaEnhance";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import ReasonPopup from "../reasonPopup";
import styles  from './index.module.scss'
import classnames from "classnames";
import { ApplyRefundApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";

type Param = {
    show?: true|false,
    onClose?: () => void,
    orderId?: number
}
export default memo(({show, onClose, orderId}:Param) => {

    //提交的数据
    const submitData = useRef({
        return_explain: 1,
        sale_order_id: 0,
        reason_describe: ''
    })

    useEffect(() => {
        if(orderId)
            submitData.current.sale_order_id = orderId
    }, [orderId])

    //申请退款
    const {fetchData} = ApplyRefundApi()
    const getApplyRefund = async () => {
        let res = await fetchData(submitData.current)
        if(!submitData.current.return_explain) return alert.error('请选择说明原因')
        if(res.success) {
            alert.error('申请成功')
        } else {
            alert.error('申请失败')
        }
        onClose?.()
    }

    //获取说明数据
    const [list, setList] = useState<any[]>([])
    

    //备注
    const getOtherReason = useCallback((val) => {
        submitData.current.reason_describe = val
    }, [])

    
    //显示说明
    const [showReason, setShowReason] = useState(false)
    const closeReason = useCallback(() => {
        setShowReason(false)
    }, [])


    //提交
    const onSubmit = (val) => {
        if(val == 2) {
            getApplyRefund()
        } else {
            onClose?.()
            submitData.current = {
                return_explain: 0,
                sale_order_id: 0,
                reason_describe: ''
            }
        }
    }

    

    return (
        <>
            <Popup show={show} title="申请退款" onClose={onClose} >
                <View className={styles.apply_after_sales_con}>
                    <View className={styles.returnSaleInput_item}>
                        <View className={styles.title}>退款说明</View>
                        <View className={styles.select} onClick={() => setShowReason(true)}>
                            <Text>请选择</Text>
                            <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                        </View>
                    </View>
                    <TextareaEnhance onChange={getOtherReason} title='备注' placeholder="请输入退款备注"/>
                    <View  className={styles.btns_con}>
                        <View  className={styles.btns_two}>
                            <View  className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
                            <View  className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
                        </View >
                    </View>
                </View>
            </Popup>
            <ReasonPopup show={showReason} onClose={closeReason} list={list} title="退款说明"/> 
        </>
    )
})