import React, {Component} from 'react';
import { View, Text, StyleSheet, TextInput, SafeAreaView, ScrollView, Image } from "react-native";
import QRCode from 'react-native-qrcode-svg';
import { RetrieveData } from "../../data/storage";
import public_css from '../../source/css/public_css';
import login_css from "../login/login_css";

export default class invoice_qrcode extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      product_number_total: 0,
      amount_total: 0.0,
      tax_rate_total: 0.0,
      text: '2132132132',
      companyTaxId: '',
      companyName: '',
      userName: '',
      headImage: '',
      sex: '',
    };
  }
  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <View style={styles.container}>
              <View style={{marginTop: 10, flexDirection: 'row'}}>
                {this.state.headImage === '' || this.state.headImage === null ? (
                  this.state.sex === 'F' ? (
                    <View style={{marginLeft: 20, justifyContent: 'center'}}>
                      <Image
                        source={require('../../source/img/personal/woman.png')}
                        style={{
                          width: 65,
                          height: 65,
                          borderRadius: 50,
                        }}
                      />
                    </View>
                  ) : (
                    <View style={{marginLeft: 20, justifyContent: 'center'}}>
                      <Image
                        source={require('../../source/img/personal/man.png')}
                        style={{
                          width: 65,
                          height: 65,
                          borderRadius: 50,
                        }}
                      />
                    </View>
                  )) : (
                  <View style={{marginLeft: 20, justifyContent: 'center'}}>
                    <Image
                      source={{uri: this.state.headImage}}
                      style={{
                        width: 65,
                        height: 65,
                        borderRadius: 50,
                      }}
                    />
                  </View>
                )}
                <View style={{flex: 1, justifyContent: 'center', marginLeft: 10}}>
                  <Text style={{fontSize: 16, color: '#414141'}}>{this.state.userName}</Text>
                  <Text style={{color: '#747474'}}>{this.state.companyName}</Text>
                </View>
              </View>
              <View style={{backgroundColor: '#F5F5F5'}}>
                <Image
                  source={require('../../source/img/qrcode.png')}
                  resizeMode={'contain'}
                  style={{height: 46, width: 320}}
                />
              </View>
              <View style={{marginTop: 10, marginBottom: 10}}>
                <QRCode
                  size={200}
                  value={
                    'https://www.chtax.cn/qrcode/#/titleTodo?entTaxId=' +
                    this.state.companyTaxId +
                    '&entName=' +
                    this.state.companyName
                  }
                  logoSize={30}
                  logoBackgroundColor="transparent"
                />
              </View>
              <View style={{height: 50, justifyContent: 'center'}}>
                <Text style={{color: '#8D8D8D'}}>
                  购方扫码并添加抬头便可进行开票
                </Text>
              </View>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    let userHeadImg = JSON.parse(await RetrieveData('userHeadImg'));
    let company = JSON.parse(await RetrieveData('company'));
    let userName = await RetrieveData('userName');
    this.setState({
      companyTaxId: company.entTaxId,
      companyName: company.entName,
      userName: userName,
      headImage: userHeadImg.headImage,
      sex: userHeadImg.sex,
    });
  }
}

const styles = StyleSheet.create({
  container: {
    // height: 90,
    backgroundColor: '#ffffff',
    zIndex: 1,
    // top: -50,
    position: 'relative',
    // flexDirection: 'row',
    elevation: 20, // 适配android的
    shadowOffset: {width: 0, height: 0},
    shadowColor: 'black',
    shadowOpacity: 0.15,
    shadowRadius: 5,
    flex: 1,
    // backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 30,
    width: 320,
  },

  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    borderRadius: 5,
    padding: 5,
  },
});