import { SaleOrderPreViewApi } from "@/api/order";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles  from './index.module.scss'
 
 export default () => {
    const [price, setPrice] = useState(123000.33)
    const [showDesc, setShowDesc] = useState(false)
    const clipboardData = () => {
        Taro.setClipboardData({
            data: '123123121321',
            success: function (res) {
                Taro.showToast({
                    icon: 'none',
                    title: '复制成功'
                })
            }
        })
    }
    //获取购物车传过来的id
    type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
    const router = useRouter()
    const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
    useEffect(() => {
        idsAndSaleModel.current.sale_mode =  Number(router.params.sale_mode)
        router.params.ids?.split('-')?.map(item => {
            return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
                shopping_cart_product_color_id: Number(item)
            })
        })
        getSaleOrderPreView()
    }, [])

    //获取销售订单预览图
    const {fetchData} = SaleOrderPreViewApi()
    const getSaleOrderPreView = async () => {
        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
            let res = await fetchData(idsAndSaleModel.current)
            console.log('res::', res)
        }       
    }

    return (
        <View className={styles.order_main}>
            <OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
            <View className={styles.order_title}>
                <Text>收货方式</Text>
                <View className={styles.order_status}>物流</View>                
                <View className={styles.order_status}>上门自提</View>                
            </View>
            <AddressInfo/>
            <KindList/>
            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
                <View className={styles.order_desc_con}>订单备注</View>
                <View className={styles.order_desc_text}>点击填写</View>
                <View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
            </View>
            <View className={styles.order_info} >
                <View className={styles.order_info_title}>订单备注</View>
                <SearchInput showBorder={false} title='单号'>
                    <View className={styles.order_num}>
                        <Text>13535359535</Text>
                        <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
                    </View>
                </SearchInput>
                <SearchInput showBorder={false} title='下单时间'>
                    <Text>2022-4-5 10:11:55</Text>
                </SearchInput>
            </View>
            <View className={styles.submit_order}>
                <View className={styles.submit_order_number}>
                    <EstimatedAmount style={{color:'#007AFF'}} number={price}/>    
                    <View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
                </View>
                <View className={styles.order_btn}>提交订单</View>    
            </View>        
            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                <Remark onSave={(e) => console.log(e)}/>
            </Popup>
            <View className="common_safe_area_y"></View>
        </View>
    )
 }