import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import { navigate } from '../../NavigationService';
import { colors, px2dp, width } from '../../utils/base';
export interface Props {
    src: string
    index: number
    deleteImg: Function
}

export interface State {

}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {

    }

    deleteImg = () => {
        let { src, deleteImg, index } = this.props;
        deleteImg && deleteImg(index)
    }

    jumpImagePreView = () => {
        let { src, deleteImg, index } = this.props;
        navigate("ImagePreView", { "imageList": [{ url: src }] })
    }


    render() {
        let { src, deleteImg, index } = this.props;
        // console.log("src:", src)
        return (
            <View style={[styles.imagePcikerBox, { marginRight: px2dp(4) }]}>

                <View style={styles.deleteButtonContainer}>
                    <TouchableOpacity style={[styles.deleteButtonContent, {}]} onPress={this.deleteImg}>
                        {/* <TouchableOpacity
                            style={styles.deleteButton}
                            onPress={this.deleteImg}> */}
                        {/* <TouchableOpacity style={styles.deleteButton} onPress={()=>{console.log('这是图片几：',index);this.setState({isCheckClean:true });content.splice(index,1),console.log("现在的contenclean是：",this.contentClean),this.optionStatus()}}> */}
                        <Image source={require('./../../assets/clear-input-icon.png')} style={styles.deleteIcon} />
                        {/* </TouchableOpacity> */}
                    </TouchableOpacity>
                </View>
                <TouchableOpacity onPress={this.jumpImagePreView}>
                    <Image source={{ uri: src }} style={styles.mediaImage} />
                </TouchableOpacity>
            </View >
        );

    }
}
const styles = StyleSheet.create({
    main: {
        width: px2dp(110),
        height: px2dp(120),
    },

    iconStyle: {
        width: px2dp(16),
        height: px2dp(16),
        // backgroundColor: "#f6f6f6",
        alignSelf: "flex-end",
    },

    imageStyle: {
        width: px2dp(100),
        height: px2dp(100),
        backgroundColor: "#fff",
        // borderRadius: px2dp(12),
        borderColor: "#e6e6e6",
        borderWidth: px2dp(1) / 4
    },
    deleteButtonContainer: {
        position: 'absolute',
        top: 0,
        right: 0,
        zIndex: 999,
        width: px2dp(32),
        height: px2dp(32),
    },

    imagePcikerBox: {
        // position: 'relative',
        width: px2dp(112),
        height: px2dp(112),
        // borderWidth: onePx,
        // borderColor: 'rgb(227,228,229)',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: colors.bgColor,
        // borderRadius: px2dp(4),
        marginVertical: px2dp(2),
        overflow: 'hidden'
    },

    mediaImage: {
        width: px2dp(112),
        height: px2dp(112),
        backgroundColor: colors.bgColor,
        // borderRadius: px2dp(4),
    },

    deleteButtonContent: {
        width: '100%',
        height: '100%',
        // width: px2dp(112),
        // height: px2dp(112),
        justifyContent: 'flex-start',
        alignItems: 'flex-end',
    },

    deleteButton: {
        width: px2dp(24),
        height: px2dp(24),
        backgroundColor: 'rgba(0,0,0,0.36)',
        borderTopRightRadius: px2dp(4),
        justifyContent: 'center',
        alignItems: 'center'
    },

    deleteIcon: {
        width: px2dp(18),
        height: px2dp(18),
        tintColor: '#fff',

    },
})