import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  SafeAreaView,
  FlatList,
  ActivityIndicator,
  Alert,
  RefreshControl,
  ScrollView,
} from 'react-native';
import {
  Drawer,
  List,
  Provider,
  SwipeAction,
  Picker, WingBlank, WhiteSpace,
} from "@ant-design/react-native";
import public_css from '../../../source/css/public_css';
import {RetrieveData} from '../../../data/storage';
import {RequestNetwork} from '../../../data/encryption';
import {ToastShow} from '../../../components/toast/toast';
import {InvoiceType, Distribute} from '../../../utils/config';
import {CleanAll} from '../../../components/abnormalMessage/abnormal_message';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../../source/css/loading_css';
const Item = List.Item;

export default class invoice_monitor extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      spinner: false,
      type: '',
      companyName: '',
      entTaxId: '',
      deviceId: '',
      invoiceType: '',
      dateBeginDate: '',
      dataEndDate: '',
      invoiceEndDate: '',
      oneInvoiceAmount: '',
      numberInvoiceAmount: '',
      negativeInfo: '',
      newDate: '',
      upEndDate: '',
      offDate: '',
      offAmount: '',
      offNegativeAmount: '',
      device: {
        entTaxId: '',
        deviceType: '',
        taxDiscId: '',
        deviceLabel: '',
        deviceKey: '',
      },
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <Spinner
            visible={this.state.spinner}
            textContent={'Loading...'}
            textStyle={loading_css.spinnerTextStyle}
          />
          <View style={{backgroundColor: '#F7F7F7', height: 70, justifyContent: 'center'}}>
            <Text style={{color: '#000000', fontSize: 17, fontWeight: 'bold', marginLeft: 10}}>{this.state.companyName}</Text>
            <Text style={{color: '#333333', fontSize: 15, marginLeft: 10}}>{this.state.entTaxId}</Text>
          </View>
          <List style={{Opacity: 0.6, color: 'red'}}>
            <Item extra={<Text style={{color: '#2A67FE', fontSize: 16}}>{this.state.deviceId}</Text>} arrow="horizontal" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>税控设备编号：</Text>
            </Item>
            <Item extra={<Text style={{color: '#313131', fontSize: 16, fontWeight: 'bold'}}>{this.state.invoiceType}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>发票种类：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.dateBeginDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>数据报起始日期：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.dataEndDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>数据报终止日期：</Text>
            </Item>
            <View style={{height: 36, backgroundColor: '#F7F7F7', justifyContent: 'center', marginLeft: 14}}>
              <Text style={{color: '#888888', fontSize: 16}}>发票/报税信息</Text>
            </View>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.invoiceEndDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>开票截止日期：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.oneInvoiceAmount}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>单张发票开票金额(元)：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.numberInvoiceAmount}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>正数发票累计金额限额(元)：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.negativeInfo}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>负数发票标识：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.newDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>最新报税日期：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.upEndDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>上传截止日期：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.offDate}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>离线开票时长(小时)：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.offAmount}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>离线正数金额(元)：</Text>
            </Item>
            <Item extra={<Text style={{color: '#000000', fontSize: 16}}>{this.state.offNegativeAmount}</Text>} arrow="empty" onPress={() => {this.getDevice()}}>
              <Text style={{color: 'rgba(0, 0, 0, 0.6)', fontSize: 16}}>离线负数金额(元)：</Text>
            </Item>
          </List>
        </ScrollView>
        <WingBlank>
          <View style={[public_css.bottomStatus]}>
            <TouchableOpacity
              style={[public_css.statusBtn, public_css.statusRBtn]}
              onPress={() => this.refresh()}>
              <Text style={{color: '#fff'}}>刷新</Text>
            </TouchableOpacity>
          </View>
        </WingBlank>
        <WhiteSpace />
      </SafeAreaView>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    let company = await RetrieveData('company');
    if (company) {
      company = JSON.parse(company);
    }
    let type = this.props.route.params.type;
    this.setState({
      type: type,
      device: {
        entTaxId: company.entTaxId,
        deviceKey: company.defaultDeviceInfo.deviceKey,
        deviceType: company.defaultDeviceInfo.deviceType,
        taxDiscId: company.defaultDeviceInfo.taxDiscId,
        deviceLabel: company.defaultDeviceInfo.deviceLabel,
      },
      companyName: company.entName,
      entTaxId: company.entTaxId,
    });
    this.setLoadingStatus(true);
    await this.getMonitorInfo();
  }

  // 获取设备信息
  getDevice = async () => {
    this.props.navigation.navigate('device', {
      deviceKey: this.state.device.deviceKey,
      getDeviceInfo: (data) => {
        this.getDeviceInfo(data);
      },
    });
  };

  // 获取切换设备信息
  getDeviceInfo = async (data) => {
    console.log(data);
    this.setState({
      device: {
        entTaxId: data.entTaxId,
        deviceType: data.deviceType,
        taxDiscId: data.taxDiscId,
        deviceLabel: data.deviceLabel,
        deviceKey: data.deviceKey,
      },
      entTaxId: data.entTaxId,
      deviceId: data.deviceLabel,
    });
    await this.initData();
  };

  // 获取发票监控信息
  getMonitorInfo = async () => {
    console.log(this.state.device.entTaxId);
    const token = await RetrieveData('token');
    if (token) {
      const url = '/sys/entDevice/monitorInfo';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: this.state.device.entTaxId,
          deviceType: this.state.device.deviceType,
          taxDiscId: this.state.device.taxDiscId,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setLoadingStatus(false);
          this.setList(response.data);
        } else {
          this.setLoadingStatus(false);
          await this.abnormalMessage(response);
        }
      }
    }
  };

  //设置设备信息
  setList = (data) => {
    let invoiceType = '';
    if (this.state.type === 1) {
      invoiceType = '增值税普通电子发票';
    }
    if (this.state.type === 2) {
      invoiceType = '增值税电子专用发票';
    }
    if (this.state.type === 3) {
      invoiceType = '增值税普通纸质发票';
    }
    if (this.state.type === 4) {
      invoiceType = '增值税专用纸质发票';
    }
    let num = 0;
    data.map((_, i) => {
      if (data[i].invoiceCategory === this.state.type) {
        num++;
        this.setState({
          deviceId: this.state.device.deviceLabel,
          invoiceType: invoiceType,
          dateBeginDate: data[i].startDateSubmit,
          dataEndDate: data[i].endDateSubmit,
          invoiceEndDate: data[i].invoiceClosingTime,
          oneInvoiceAmount: data[i].singleInvoiceMoneyLimit,
          numberInvoiceAmount: data[i].cumulativeInvoiceMoneyLimit,
          negativeInfo: data[i].negativeInvoiceFlag,
          newDate: data[i].latestTaxDate,
          upEndDate: data[i].uploadDeadline,
          offDate: data[i].offlineInvoiceLength,
          offAmount: data[i].offlineCumulativeMoney,
          offNegativeAmount: data[i].negativeOfflineCumulativeMoney,
        });
      }
    });
    if (num === 0) {
      Alert.alert(
        '提示',
        '当前票种信息不存在！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
  };

  // 刷新
  refresh = async () => {
    await this.initData();
  };

  // 刷新数据
  initData = async () => {
    this.setState({
      invoiceType: '',
      dateBeginDate: '',
      dataEndDate: '',
      invoiceEndDate: '',
      oneInvoiceAmount: '',
      numberInvoiceAmount: '',
      negativeInfo: '',
      newDate: '',
      upEndDate: '',
      offDate: '',
      offAmount: '',
      offNegativeAmount: '',
    });
    this.setLoadingStatus(true);
    await this.getMonitorInfo();
  };

  //显示loading层
  setLoadingStatus(isLoading) {
    this.setState({
      spinner: isLoading,
    });
  }

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}