import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import { loadingToastHide, loadingToastShow, px2dp, toastShort, width } from '../../utils/base';
export interface Props {
    data?: any
}

export interface State {
    isCheck?: boolean
    num?: any
}

export default class CartItem extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        isCheck: false,
        num: 1
    }

    test = () => {
        console.log("test")
    }

    handleCheck = () => {
        let { isCheck } = this.state;
        this.setState({
            isCheck: !isCheck
        })
        // setTimeout(() => {
        //     loadingToastHide()
        // }, 2000);
    }

    handleMinus = () => {
        let { num } = this.state;
        if (num <= 1) {
            return toastShort("不能再减了")
        }
        num--
        this.setState({ num })
    }

    handleAdd = () => {
        loadingToastShow()

        let { num } = this.state;
        num++
        this.setState({ num })
        setTimeout(() => {
            loadingToastHide()
        }, 2000);
    }


    render() {
        console.log(this.props.data)
        let { isCheck, num } = this.state;
        return (
            <View style={styles.main}>
                <TouchableOpacity style={styles.containerLeft} onPress={this.handleCheck}>
                    {
                        isCheck ? <Image source={require("../../assets/checked-icon.png")} style={styles.checkIconStyle} /> : <View style={styles.checkIconStyle}></View>

                    }

                </TouchableOpacity>
                {/* <View style={styles.containerMiddle}></View> */}
                <Image source={{ uri: "https://" }} style={styles.imageStyle} />
                <View style={styles.containerRight}>
                    <View style={styles.containerRightTop}><Text>【有机种植】 香菜100g/份{this.props.data.index}</Text></View>
                    <View style={styles.containerRightMiddle}></View>
                    <View style={styles.containerRightBottom}>
                        <View style={styles.containerRightBottomLeft}>
                            <Text style={{ fontWeight: "bold", color: 'red', fontSize: 18 }}>￥ 55</Text>
                        </View>
                        <View style={styles.containerRightBottomRight}>
                            <TouchableOpacity onPress={this.handleMinus} style={styles.minusBtn}><View style={styles.lineStyle}>

                            </View>
                            </TouchableOpacity >
                            <View style={styles.catItemNumStyle}><Text style={{ textAlign: "center" }}>{num}</Text></View>
                            <TouchableOpacity style={styles.addBtn} onPress={this.handleAdd}>
                                <View style={[styles.lineStyle, { translateY: px2dp(2) }]}></View>
                                <View style={[styles.lineStyle, { transform: [{ rotateZ: '90deg' },] }]}></View>
                            </TouchableOpacity>
                        </View>
                    </View>

                </View>
            </View>
        );

    }
}
const styles = StyleSheet.create({
    main: {
        height: px2dp(130),
        width: width,
        flexDirection: "row",
        paddingVertical: px2dp(15),
        marginBottom: px2dp(10),
        backgroundColor: "#fff",
    },
    containerLeft: {
        width: px2dp(40),
        height: px2dp(100),
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "yellow"
    },
    checkIconStyle: {
        width: px2dp(24),
        height: px2dp(24),
        borderRadius: px2dp(12),
        borderWidth: px2dp(1.5),
        borderColor: "#f6f6f6",
        backgroundColor: "#fff"
    },
    containerMiddle: {

    },
    imageStyle: {
        width: px2dp(100),
        height: px2dp(100),
        borderRadius: px2dp(10),
        backgroundColor: "#fff",
        borderWidth: px2dp(1),
        borderColor: "#f6f6f6"
        // backgroundColor: "blue"
    },
    containerRight: {
        width: width - px2dp(120),
        height: px2dp(100),
        paddingHorizontal: px2dp(10),
        justifyContent: "center",
        overflow: "hidden"
        // justifyContent: ""
    },
    containerRightTop: {
        width: width - px2dp(160),
        height: px2dp(40),
        // backgroundColor: 'green'

    },
    containerRightMiddle: {
        width: width - px2dp(160),
        height: px2dp(25),
        // backgroundColor: "black"
    },
    containerRightBottom: {
        width: width - px2dp(160),
        height: px2dp(35),
        flexDirection: "row",
        // backgroundColor: "white"
    },
    containerRightBottomLeft: {
        width: "50%",
        height: "100%",
        justifyContent: "flex-end",
        // alignItems:",
        // backgroundColor: 'pink'

    },
    containerRightBottomRight: {
        width: "50%",
        height: "100%",
        flexDirection: "row",
        justifyContent: "flex-end",
        alignItems: "flex-end",
        // backgroundColor: "orange"
    },
    minusBtn: {
        width: px2dp(35),
        height: px2dp(35),
        justifyContent: "center",
        alignItems: "center",
        borderRadius: px2dp(15),
        borderColor: "white",
        borderWidth: px2dp(1.5),
        backgroundColor: "#f6f6f6"
    },
    lineStyle: {
        width: px2dp(12),
        height: px2dp(2),
        borderRadius: px2dp(1),
        backgroundColor: "#ff426e",
    },
    catItemNumStyle: {
        width: px2dp(36),
        height: px2dp(30),
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "red"
    },
    addBtn: {
        width: px2dp(35),
        height: px2dp(35),
        justifyContent: "center",
        alignItems: "center",
        borderRadius: px2dp(15),
        borderColor: "white",
        borderWidth: px2dp(1.5),

        backgroundColor: "#f6f6f6",

    }

})