import React,{Component} from 'react';
import { StyleSheet, Text, View ,Image} from 'react-native';
import QRCode from 'react-native-qrcode';
import {connect} from 'react-redux'
import Device from '../../../tool/Device';

class QrCode extends Component {
    constructor(props){
        super(props)
    }
    static navigationOptions ={
      title:'我的二维码'
    }
    render(){
      const {UserAction} = this.props
      const {id,username,head} = UserAction
      if(head){
            source = {
              uri:head,
              cache: 'force-cache'
          }
      }else{
          source = require('../../../../assets/icon.png')
      }

        return (
            <View style={styles.box}>
            <Image style={styles.bgImage} source={require('../../../../assets/2x/code-bg.png')}/>
              <View style={styles.bgImage}>
                <View style={styles.headBox}>
                   <Image style={styles.head} source={source}/>
                   <View style={styles.headTille}>
                     <Text style={styles.nickName}>{username}</Text>
                     <Text style={styles.ID}>ID:{id}</Text>
                   </View>
                 </View>
              
                 <View style={styles.QRBox}>
                 <QRCode
                    value={id}
                    size={Device.scale(225)}
                    bgColor='black'
                    fgColor='white'/>
                 </View>
                 <View style={styles.info}>
                     <Text style={styles.info1}>扫一扫上面的二维码，加我汇聊</Text>
                 </View>
                </View>
            </View>
        )
    }
}

const mapStateToProps = ({UserAction} )=> {
  return {UserAction}
}
export default connect(mapStateToProps)(QrCode);

const styles = StyleSheet.create({
    view:{
      backgroundColor:"#000",
      height:Device.scale(50),
    },
  
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    box:{
      flex:1,
      justifyContent: 'center',
      
    },
    bgImage:{
      position:"absolute",
      top:Device.scale(65),
      width:Device.scale(328),
      height:Device.scale(443),
      left:'50%',
      marginLeft:-Device.scale(164)
    },
    headBox:{
      flexDirection:"row",
      alignItems: 'center',
      paddingLeft:Device.scale(39),
      paddingTop:Device.scale(42),
    },
    head:{
      width:Device.scale(64),
      height:Device.scale(64),
      borderRadius:Device.scale(9),
    },
    headTille:{
      marginLeft:Device.scale(15)
    },
    nickName:{
      lineHeight:Device.scale(31),
      fontSize:Device.scale(16),
    },
    ID:{
      lineHeight:Device.scale(29),
      fontSize:Device.scale(14),
      color:"#000",
      opacity:0.5,
    },
    QRBox:{
      flexDirection:"row",
      alignItems: 'center',
      justifyContent:'center',
      // marginLeft:54,
      marginTop:Device.scale(41),
    },
    qrCode:{
      width:Device.scale(255),
      height:Device.scale(255),
    },
    info:{
      alignItems: 'center',
      marginTop:Device.scale(25),
    },
    info1:{
     fontSize:Device.scale(12),
     color:"#000",
     opacity:0.5,
    }
  
    
    
  });