import { 
    GetSaleOrderDetailApi, 
    EditSaleOrderRemarkApi, 
    CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { AddShoppingCartApi } from "@/api/shopCart";
import { SubscriptionMessageApi } from "@/api/user";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS, SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum";
import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import ShopCart from "@/components/shopCart";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import dayjs from "dayjs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfoDetail from "./components/addressInfoDetail";
import AdvanceOrderState from "./components/advanceOrderState";
import ApplyRefund from "./components/applyRefund";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Payment from "./components/payment";
import Remark from "./components/remark";
import styles  from './index.module.scss'
 
 export default () => {
    const [showDesc, setShowDesc] = useState(false)
    const router = useRouter()
    const orderId = useRef<number>(Number(router.params.id))
    useDidShow(() => {
        getSaleOrderPreView()
    })

    //订单状态枚举
    const {
        SaleOrderStatusWaitingReceipt, // 待收货
        SaleOrderStatusAlreadyReceipt, // 已收货
        SaleOrderStatusComplete, // 已完成
        SaleOrderStatusRefund, // 已退款
        SaleOrderStatusCancel, // 已取消
        SaleorderstatusWaitingPrePayment, // 预付款
    } = ORDER_STATUS

    //获取订单详情
    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
    const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
    const getSaleOrderPreView = async () => {
        if(orderId.current) {
            let res = await getOrderFetchData({id: orderId.current})
            setOrderDetail(res.data)
            setOrderRemark(res.data.remark)
        }
        Taro.stopPullDownRefresh()
        Taro.hideToast()       
    }

    //监听获取到的数据
    useEffect(() => {
        if(orderDetail)
            formatData()
    }, [orderDetail])

    //格式化数据格式
    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
    const formatData = () => {  
        setFormatDetailOrder({
            estimate_amount: orderDetail.estimate_amount, //预估金额
            sale_mode: orderDetail.sale_mode,
            sale_mode_name: orderDetail.sale_mode_name, 
            total_colors: orderDetail.total_colors, //总颜色数量
            total_number: orderDetail.total_number, //总数量
            total_fabrics: orderDetail.total_fabrics, //面料数量
            unit: orderDetail.sale_mode == 0?'条':'m', //单位
            list: orderDetail.product_list,
            status: orderDetail.status, //订单状态
            total_sale_price: orderDetail.total_sale_price, //销售金额
            total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
            total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
            actual_amount: orderDetail.actual_amount, //实付金额
            the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态

        })
    }
    const formatPreViewOrderMemo = useMemo(() => {
        return formatDetailOrder
    }, [formatDetailOrder])

    //复制功能
    const clipboardData = () => {
        Taro.setClipboardData({
            data: orderDetail?.order_no||'',
            success: function (res) {
                Taro.showToast({
                    icon: 'none',
                    title: '复制成功'
                })
            }
        })
    }

    //初始地址数据
    const defaultAddress = useMemo(() => {
        return  {
            province_name: orderDetail?.province_name,
            city_name: orderDetail?.city_name,
            district_name: orderDetail?.district_name,
            address_detail: orderDetail?.address_detail,
            name: orderDetail?.target_user_name,
            phone: orderDetail?.target_user_phone,
            shipment_mode: orderDetail?.shipment_mode,
            id: orderDetail?.id,
            sale_mode: orderDetail?.sale_mode,
            status: orderDetail?.status
        }
       
    }, [orderDetail])

    //订单备注
    const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
    const [orderRemark, setOrderRemark] = useState('')
    const getRemark = useCallback(async (e) => {
        setOrderRemark(() => e)
        let res = await remarkFetchData({remark:e, id: orderId.current})
        if(res.success) {
            getSaleOrderPreView()
            alert.success('提交成功')
        } else {
            alert.error(res.msg)
        }
        setShowDesc(() => false)
    }, [])
    const noCanOpenDescList = useRef([
        SaleOrderStatusWaitingReceipt.value, // 待收货
        SaleOrderStatusAlreadyReceipt.value, // 已收货
        SaleOrderStatusComplete.value, // 已完成
        SaleOrderStatusRefund.value, // 已退款
        SaleOrderStatusCancel.value, // 已取消
    ])
    const descOpen = () => {
        if(noCanOpenDescList.current.includes(orderDetail?.status)) return false
        setShowDesc(() => true)
    }

    //去付款
    const [payMentShow, setPayMentShow] = useState(false)
    const toPay = () => {
        setPayMentShow(true)
    }

    //打开地址修改
    const addressRef = useRef<any>(null)

    //修改收货方式
    const getShipmentMode = useCallback(() => {
        getSaleOrderPreView()
    }, [orderDetail])

    //修改地址
    const getAddress = useCallback(() => {
        getSaleOrderPreView()
    }, [orderDetail])

    //获取底部按钮点击, 获取按钮状态
    const orderStateClick = useCallback((val) => {
        console.log('123456789',val)
        if(val == 1 || val == 6) {
            //取消订单
            getSaleOrderPreView()
        }else if(val == 2) {
            //待付款
            toPay()
        } else if(val == 3) {
            //申请退款
            if(!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款')
            setRefundShow(true)
        } else if(val == 7) {
            //再购
            addShopCart()
        }
        
    }, [orderDetail])

    //页面下拉刷新
    usePullDownRefresh(() => {
        getSaleOrderPreView()
    })

    //支付成功
    const onPaySuccess = useCallback(() => {
        getSaleOrderPreView()
        closePayShow()
    }, [orderDetail])

    //关闭支付弹窗
    const closePayShow = useCallback(() => {
        setPayMentShow(() => false)
    }, [orderDetail])

    //按钮所需数据
    const orderInfo = useMemo(() => {
        return {
            status: orderDetail?.status, //订单状态
            orderId: orderDetail?.id,
            settle_mode: orderDetail?.settle_mode,
            actual_amount: orderDetail?.actual_amount, //实付金额
            wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
            sale_mode: orderDetail?.sale_mode, //订单类型
            av_return_roll: orderDetail?.av_return_roll //可退条数
        }
    }, [orderDetail])



    //刷新页面
    const refresh = useCallback(() => {
        alert.loading('刷新中')
        getSaleOrderPreView()
    }, [orderDetail])

    //退款申请
    const [refundShow, setRefundShow] = useState(false)
    const applyRefundClose = useCallback(() => {
        setRefundShow(false)
    }, [])

    //查看物流
    const getLogistics = useCallback(() => {
        const list = orderDetail?.delivery_appendix_url.map(item => {
            return formatImgUrl(item)
        })
        Taro.previewImage({
            current: list[0], // 当前显示
            urls: list // 需要预览的图片http链接列表
        })
    }, [orderDetail])
    
    //添加购物车
    const [showCart, setShowCart] = useState(false)
    const {fetchData:addFetchData} = AddShoppingCartApi()
    const addShopCart =  async () => {
        let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
        orderDetail?.product_list.map(pitem => {
            pitem?.product_colors.map(citem => {
                if(orderDetail?.sale_mode == 0) {
                    return color_list.push({product_color_id: citem.id, roll: citem.roll})
                } else {
                    return color_list.push({product_color_id: citem.id, length: citem.length})
                }
            })
        })
        const state =  await addFetchData({
            sale_mode: orderDetail?.sale_mode,
            color_list
        })
        if(state.success) {
            Taro.showToast({
                title:'已加入购物车'
            })
            setShowCart(true)
        } else {
            Taro.showToast({
                icon:'none',
                title: state.msg
            })
        }
        
    }

    return (
        <View className={styles.order_main}>
            {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&<OrderState orderInfo={orderDetail}/>||
            <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh}/>}
            <View>
                <AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} />
            </View>
            <KindList order={formatPreViewOrderMemo}/>
            <View className={styles.order_info} >
                <View className={styles.order_info_title}>订单信息</View>
                <SearchInput showBorder={false} title='单号' height={50}>
                    <View className={styles.order_num}>
                        <Text>{orderDetail?.order_no}</Text>
                        <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
                    </View>
                </SearchInput>
                <SearchInput showBorder={false} title='下单时间' height={50}>
                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
                </SearchInput>
                {(orderDetail?.payment_time)&&<SearchInput showBorder={false} title='付款时间' height={50}>
                    <Text>{formatDateTime(orderDetail?.payment_time)}</Text>
                </SearchInput>}
            </View>
            <View className={styles.order_desc} onClick={descOpen}>
                <View className={styles.order_desc_con}>订单备注</View>
                {
                    orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
                    <View className={styles.order_desc_text_hint}>填写备注</View>
                }
                <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
            </View>
            {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order_con}>
                <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
                <View className="common_safe_area_y"></View>
            </View> }       
            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
                <Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark}/>
            </Popup>
            <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
            <ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id}/>
            <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
            <View className="common_safe_area_y"></View>
        </View>
    )
 }