import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { memo, useCallback, useMemo, useState } from "react";
import classnames from "classnames";
import styles  from './index.module.scss'
import { formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
import ReasonPopup from "./components/reasonPopup";
import OtherReason from "./components/otherReason";
import Taro from "@tarojs/taro";
import useUploadCDNImg from "@/use/useUploadImage";

type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
    const [showDesc, setShowDesc] = useState(true)
    
    //退货选择弹窗
    const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1})
    const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
    const onShowReason = (status) => setShowReason({...showReason, status, show:true})

    

    //底部按钮
    const onSubmit = (val) => {

    }

    return (
        <View className={styles.apply_after_sales_main}>
            <View className={styles.apply_after_sales_con}>
                <View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
                <ScrollView scrollY className={styles.scroll}>
                    <View className={styles.scroll_con}>
                        <View className={styles.apply_after_sales_list}>
                            <View className={styles.apply_after_sales_item}>
                                <View className={styles.apply_after_sales_title}>
                                    <View className={styles.tag}>大货</View>
                                    <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
                                </View>
                                <View className={styles.color_list}>
                                    <View className={styles.color_item}>
                                        <View className={styles.image}><Image src={formatImgUrl('')}/></View>
                                        <View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
                                        <View className={styles.btn_count}>
                                            <Counter/>
                                        </View>
                                    </View>
                                    <View className={styles.color_item}>
                                        <View className={styles.image}><Image src={formatImgUrl('')}/></View>
                                        <View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
                                        <View className={styles.btn_count}>
                                            <Counter/>
                                        </View>
                                    </View>
                                </View>
                            </View>
                            <View className={styles.apply_after_sales_item}>
                                <View className={styles.apply_after_sales_title}>
                                    <View className={styles.tag}>大货</View>
                                    <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
                                </View>
                                <View className={styles.color_list}>
                                    <View className={styles.color_item}>
                                        <View className={styles.image}><Image src={formatImgUrl('')}/></View>
                                        <View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
                                        <View className={styles.btn_count}>
                                            <Counter/>
                                        </View>
                                    </View>
                                    <View className={styles.color_item}>
                                        <View className={styles.image}><Image src={formatImgUrl('')}/></View>
                                        <View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
                                        <View className={styles.btn_count}>
                                            <Counter/>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View className={styles.returnSaleInput}>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>退货原因</View>
                                <View className={styles.select} onClick={() => onShowReason(1)}>
                                    <Text>请选择</Text>
                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                </View>
                            </View>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>货物状况</View>
                                <View className={styles.select} onClick={() => onShowReason(2)}>
                                    <Text>请选择</Text>
                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                </View>
                            </View>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>退货说明</View>
                                <View className={styles.select} onClick={() => onShowReason(3)}>
                                    <Text>请选择</Text>
                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                </View>
                            </View>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>拍照上传</View>
                                <PictureItem/>
                                
                            </View>
                        </View>
                        <OtherReason/>
                    </View>
                </ScrollView>
                <View className="common_safe_area_y"></View>
            </View>
            <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 >
            <ReasonPopup show={showReason.show} onClose={closeReason} status={showReason.status}/>   
        </View>
    )
}

//图片列表
const PictureItem = memo(() => {
    const {uploadCDNImg} = useUploadCDNImg()

    //图片
    const uploadImage = () => {
        Taro.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], 
            sourceType: ['album', 'camera'], 
            success: function (res) {
                const file = res.tempFiles[0]
                uploadCDNImg(file, 'product', 'product')
            }
        })
    }
    return (
        <>
            <View className={styles.ImgItem}>
                <Image mode="aspectFill" src={formatImgUrl('')} ></Image>
                <View  className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
            </View>
            <View className={styles.uploadImg } onClick={uploadImage}>
                <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
                <Text className={styles.uploadText}>上传照片</Text>
            </View>
        </>
    )
})