import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Image,
  TouchableOpacity,
} from 'react-native';
import Study from '../../Study';
import axios from 'axios';
import Axios from 'axios';
Axios.defaults.withCredentials = true;
const {width, height} = Dimensions.get('window');
class Settlement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.settle = this.settle.bind(this);
  }
  settle() {
    this.props.navigation.goBack();
    this.props.navigation.goBack();
    this.props.navigation.goBack();
    this.props.navigation.goBack();
  }
  componentDidMount() {
    const {params} = this.props.route;
    const _this = this;
    axios
      .post('http://www.tdms.xyz:8000/FZUStudy/study/alone/addRecord', {
        user_sno: '221900330',
        gmt_started: params.start,
        gmt_ended: params.end,
        type_id: params.id,
      })
      .then(function (response) {
        _this.setState({data: response.data.data});
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        console.log('finish');
      });
  }
  render() {
    const {params} = this.props.route;
    return (
      <View style={styles.container}>
        <View style={styles.s}>
          <Text style={styles.text}>本次自习结束</Text>
        </View>
        <View style={styles.t}>
          <Text style={styles.text1}>
            本次你一共学习了{this.state.data.minutes}分钟
            {'\n\n'}
            获得{this.state.data.experience}经验值{'\n\n'}
            请再接再厉
          </Text>
        </View>
        <View>
          <TouchableOpacity
            style={styles.button}
            onPress={this.settle.bind(this)}>
            <Text style={styles.text3}>结算</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    //opacity: 0.5,
    flex: 1,
  },
  text: {
    fontSize: parseInt(width) / 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#C5844A',
  },
  text1: {
    fontSize: parseInt(width) / 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#C5844A',
  },
  text3: {
    fontSize: parseInt(width) / 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#592202',
  },
  s: {
    backgroundColor: '#F4CB8C',
    width: parseInt(width) / 2.5,
    height: parseInt(width) / 8,
    position: 'absolute',
    top: parseInt(height) / 14,
    left: parseInt(width) / 3,
    justifyContent: 'center',
    borderWidth: parseInt(width) / 180,
    borderColor: '#C5844A',
  },
  t: {
    backgroundColor: '#F4CB8C',
    width: parseInt(width) / 1.5,
    height: parseInt(width) / 1.2,
    position: 'absolute',
    top: parseInt(height) / 4,
    left: parseInt(width) / 5,
    justifyContent: 'center',
    borderWidth: parseInt(width) / 180,
    borderRadius: 20,
    borderColor: '#C5844A',
  },
  button: {
    backgroundColor: '#e1c3a1',
    borderColor: '#BF7636',
    borderWidth: parseInt(width) / 180,
    position: 'absolute',
    top: parseInt(height) / 1.3,
    left: parseInt(width) / 2.8,
    justifyContent: 'center',
    borderRadius: 6,
    alignItems: 'center',
    width: parseInt(width) / 2.8,
    height: parseInt(width) / 7.4,
    elevation: 4,
  },
  button1: {
    backgroundColor: '#c48c5d',
    position: 'absolute',
    top: parseInt(height) / 2,
    left: parseInt(width) / 3,
    justifyContent: 'center',
    borderRadius: 3,
    width: parseInt(width) / 2.5,
    height: parseInt(width) / 8,
  },
  prompt: {
    position: 'absolute',
    top: parseInt(height) / 1.3,
    left: parseInt(width) / 3,
    justifyContent: 'center',
    borderRadius: 3,
    width: parseInt(width) / 2.5,
    height: parseInt(width) / 8,
  },
  showTime: {
    height: 100,
    position: 'absolute',
    top: parseInt(height) / 6,
    left: parseInt(width) / 2.6,
    alignItems: 'center',
  },
  timeText: {
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#592202',
    fontSize: 40,
  },
  icon1: {
    position: 'absolute',
    top: parseInt(height) / 3,
    left: parseInt(width) / 3,
    opacity: 0.5,
    width: parseInt(width) / 2.8,
    height: parseInt(width) / 2.8,
  },
  radio: {
    position: 'absolute',
    top: parseInt(height) / 1.8,
    left: parseInt(width) / 3,
  },
});

export default Settlement;