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';

export default class buyer_qrcode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      product_number_total: 0,
      amount_total: 0.0,
      tax_rate_total: 0.0,
      companyTaxId: '',
      companyName: '',
      userName: '',
      amount: this.props.route.params.amount,
      url: this.props.route.params.url,
    };
  }
  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <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>
                  <Text style={{color: '#656565', justifyContent: 'center'}}>
                    发票含税价：<Text style={{color: '#3B3B3B', fontWeight: 'bold', fontSize: 16}}>¥{this.state.amount}</Text>
                  </Text>
                </View>
                <View style={{marginTop: 10, marginBottom: 10}}>
                  <QRCode
                    size={200}
                    value={this.state.url}
                    logoSize={30}
                    logoBackgroundColor="transparent"
                  />
                </View>
                <View style={{height: 50, justifyContent: 'center'}}>
                  <Text style={{color: '#8D8D8D'}}>
                    购方扫码并添加抬头便可进行开票
                  </Text>
                </View>
              </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,
  },
});