import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import { View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
import KindList from "./components/kindList";
import Remark from "./components/remark";
import styles  from './comfirm.module.scss'
import { getParam } from "@/common/system";
import useLogin from "@/use/useLogin";
import { alert, goLink } from "@/common/common";
import ShipmentMode from "../editOrder/components/shipmentMode";
import SubmitOrderBtn from "./components/submitOrderBtn";
import AddressInfoDetail from "./components/addressInfoDetail";
 
 export default () => {
    
    const [showDesc, setShowDesc] = useState(false)
    //下单信息
    type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
    const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()

    //获取购物车传过来的id
    type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
    const param = getParam()
    const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
    useDidShow(async () => {
        idsAndSaleModel.current = {shopping_cart_product_color_list:[], sale_mode:0} //初始化
        idsAndSaleModel.current.sale_mode =  Number(param?.sale_mode)
        param?.ids?.split('-')?.map(item => {
            return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
                shopping_cart_product_color_id: Number(item)
            })
        })
        getSaleOrderPreView()
        setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
    })

    //获取销售预览订单
    const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
    const {fetchData} = SaleOrderPreViewApi()
    const getSaleOrderPreView = async () => {
        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
            let res = await fetchData(idsAndSaleModel.current)
            setPreViewOrder(res.data)
        }       
    }

    //监听获取到的数据
    useEffect(() => {
        if(preViewOrder) {
            formatData()
            getDataList()
            setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2}))
        }
    }, [preViewOrder])

    //格式化数据格式
    const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
    const formatData = () => {  
        setFormatPreViewOrder({
            estimate_amount: preViewOrder.estimate_amount, //预估金额
            sale_mode: preViewOrder.sale_mode,
            sale_mode_name: preViewOrder.sale_mode_name, 
            total_colors: preViewOrder.total_colors, //总颜色数量
            total_number: preViewOrder.total_number, //总数量
            total_fabrics: preViewOrder.total_fabrics, //面料数量
            unit: preViewOrder.sale_mode == 0?'条':'m', //单位
            list: preViewOrder.product_list,
            total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
            total_sale_price: preViewOrder.total_sale_price //合计金额
        })
    }
    const formatPreViewOrderMemo = useMemo(() => {
        return formatPreViewOrder
    }, [formatPreViewOrder])

    //格式化初始地址
    const defaultAddress = useMemo(() => {
        const address = preViewOrder?.default_address
        return  {
            province_name: address?.province_name,
            city_name: address?.city_name,
            district_name: address?.district_name,
            address_detail: address?.address_detail,
            id: address?.id,
            name: address?.name,
            phone: address?.phone,
            shipment_mode: address?.shipment_mode
        }
    }, [preViewOrder])

    //获取提交格式数据列表
    const getDataList = () => {
        let list:{shopping_cart_product_color_id:number}[] = []
        preViewOrder.product_list?.map(item => {
            item.product_colors?.map(colorItem => {
                list.push({shopping_cart_product_color_id:colorItem.id})
            })
        })
        setSubmitOrderData((val) => ({...val, list}))
    }

    //获取地址
    const getAddress = (e) => {
        setSubmitOrderData((val) => ({...val, address_id:e.id}))
    }

    const selectShipmentMode = useCallback((value) => {
        setSubmitOrderData((val) => ({...val, shipment_mode:value}))
    }, [])

    //获取备注
    const getRemark = useCallback((e) => {
        setSubmitOrderData((val) => ({...val, remark:e}))
        setShowDesc(() => false)
    }, [])

    //提交按钮是否可用
    const btnStatus = useMemo(() => {
        return  submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
    }, [submitOrderData])

    //数量格式
    const numText = useMemo(() => {
        if(formatPreViewOrder) {
            let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100)
            return `${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${total_number}${formatPreViewOrder?.unit}`
        }
    }, [formatPreViewOrder])

    //提交订单
    const {fetchData: saleOrderFetchData} = SaleOrderApi()
    const submitOrderEven =  () => {
        if(!submitOrderData?.shipment_mode) {
            alert.error('请选择收货方式')
            return false
        }
        if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) {
            alert.error('请选择地址')
            return false
        }
        
        Taro.showModal({
            title: '确定提交？',
            success: async function (res) {
              if (res.confirm) {
                const res = await saleOrderFetchData(submitOrderData)
                if(res.success) {
                    goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
                } else {
                    alert.none(res.msg)
                }
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
        })
    }

    //页面下拉刷新
    usePullDownRefresh(() => {
        getSaleOrderPreView()
    })
    return (
        <View className={styles.order_main}>
            <AddressInfoDetail orderInfo={defaultAddress}  onSelect={getAddress} onChangeShipmentMode={selectShipmentMode}  status={1}/>
            <KindList order={formatPreViewOrderMemo} comfirm={true}/>
            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
                <View className={styles.order_desc_con}>订单备注</View>
                {
                    submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
                    <View className={styles.order_desc_text_hint}>填写备注</View>
                }
                <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
            </View>
            <View className={styles.submit_order}>
                <View className={styles.submit_order_number}>
                    <SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(preViewOrder?.sale_mode == 1?formatPreViewOrder?.total_should_collect_money:formatPreViewOrder?.estimate_amount)} priceTitle={preViewOrder?.sale_mode == 1?'合计金额':'预估金额'}/>    
                    <View className={styles.order_number_desc}>{numText}</View>
                </View>
                <View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>    
            </View>        
            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                <Remark onSave={(e) => getRemark(e)}/>
            </Popup>
            <View className="common_safe_area_y"></View>
        </View>
    )
 }