import React, { Component } from "react"
import { StyleSheet, TextInput, View, Image, Text } from "react-native"
import { unitWidth, unitHeight } from "../utils/AdapterUtil";
import MyButtom from '../component/MyButton'

export default class Suggestion extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.textArea}>
                    <TextInput
                        placeholder="请输入您的投诉建议内容，我们会为您更好的服务"
                        multiline={true}
                        placeholderTextColor={"#999999"}
                        style={styles.TextInput}
                    />
                    <Text style={{ textAlign: "right", fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 46 }}>0/200</Text>
                    <View style={styles.phoneArea}>
                        <Image
                            source={require("../../static/userPhone.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 28, color: "#333333"} }>照片</Text>
                    </View>
                </View>
                <View style={styles.bottomBtn}>
                    <MyButtom
                        text={"提交反馈"}
                        width={unitWidth * 502}
                        height={unitHeight * 84}
                        borderRadius={unitHeight * 84}
                        bgColor="#FA788A"
                        shadowBgc="rgba(250,120,138,1)"
                        style={{ fontSize: unitWidth * 32 }}
                    />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 23,
        alignItems: "center"
    },
    textArea: {
        width: "100%",
        height: unitHeight * 463,
        backgroundColor: "#fff",
        paddingLeft: unitWidth * 23,
        paddingTop: unitHeight * 30,
        borderRadius: unitHeight * 10,
        marginTop: unitHeight * 10,
    },
    TextInput: {
        width: "100%",
        height: unitHeight * 197
    },
    phoneArea: {
        width: unitWidth * 140,
        alignItems:"center"
    },
    imgIcon: {
        width: unitWidth * 140,
        height: unitHeight * 140,
        marginBottom:unitHeight * 12,
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 196,
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center'
    },
})