import React, {Component} from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  FlatList,
  RefreshControl,
} from 'react-native';
import {List, SwipeAction, Modal} from '@ant-design/react-native';

import {RetrieveData} from '../../../data/storage';
import {RequestNetwork} from '../../../data/encryption';

import invoice_inquiry_css from './invoice_inquiry_css';
import {ToastShow} from '../../../components/toast/toast';

let pageNo = 1; //当前第几页
let totalPage = 5; //总的页数
export default class invoice_inquiry_completed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      status: 0,
      search_data: '',
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
      isOpen: false,
      visible1: false,
    };
  }

  render() {
    return (
      <View style={invoice_inquiry_css.container}>
        <FlatList
          data={this.state.listData}
          renderItem={(item) => this.renderItem(item)}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#B7B7B7']} //此颜色无效
              tintColor={'#B7B7B7'}
              titleColor={'#B7B7B7'} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.initData();
              }}
            />
          }
          ListFooterComponent={this._renderFooter.bind(this)}
          onEndReached={this._onEndReached.bind(this)}
          onEndReachedThreshold={0.1}
        />
      </View>
    );
  }

  //显示红冲确认信息
  showAlert = (data) => {
    Modal.alert('发票红冲', '是否确认红冲此发票', [
      {
        text: '取消',
        // onPress: () => console.log('cancel'),
        style: 'cancel',
      },
      {text: '确认', onPress: () => this.invoice_red_rush(data)},
    ]);
  };

  //初始化数据
  initData = () => {
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
      status: 0,
    });
    pageNo = 1;
    this.getSearchData();
  };

  //上拉加载
  _onEndReached() {
    if (this.state.showFoot === 0) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 1});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 2});
        //获取数据
        this.getSearchData();
      }
    }
  }

  //列表尾部显示
  _renderFooter() {
    if (this.state.showFoot === 1) {
      return (
        <View
          style={{
            height: 30,
            alignItems: 'center',
            justifyContent: 'flex-start',
          }}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5,
            }}>
            没有更多数据了
          </Text>
        </View>
      );
    } else if (this.state.showFoot === 2) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <Text />
        </View>
      );
    }
  }

  //页面加载完后显示数据
  componentDidMount(): void {
    this.props.children.getCompletedRef(this);
    this.getSearchData();
  }

  //页面销毁
  componentWillUnmount(): void {
    pageNo = 1;
  }

  //获取查询数据
  getSearchData = async () => {
    let beginTime = '';
    let endTime = '';
    if (this.props.children.state.beginDateText !== undefined) {
      if (this.props.children.state.beginDateText !== '开始时间') {
        beginTime = this.props.children.state.beginDateText + ' 00:00:00';
      }
    }
    if (this.props.children.state.endDateText !== undefined) {
      if (this.props.children.state.endDateText !== '结束时间') {
        endTime = this.props.children.state.endDateText + ' 23:59:59';
      }
    }
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    let company = JSON.parse(await RetrieveData('company'));
    if (token && account) {
      let jason = {
        belongEntTaxId: company.entTaxId,
        mobile: account,
        reqChannel: 3,
        pageNum: pageNo,
        pageSize: 10,
        invoiceDateBegin: beginTime,
        invoiceDateEnd: endTime,
        invoiceCategory: this.props.children.state.invoiceCategory,
        customerName: this.props.children.state.customerName,
        customerEntTaxId: this.props.children.state.customerEntTaxId,
        invoiceCode: this.props.children.state.invoiceCode,
        invoiceNumber: this.props.children.state.invoiceNumber,
      };
      if (this.props.children.state.invoiceStatus !== null) {
        jason.status = this.props.children.state.invoiceStatus;
      }
      const url = '/sys/invoice/findPage';
      let res = await RequestNetwork(url, token, jason, false, 2);
      if (res) {
        console.log('完成');
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        }
      }
    }
  };

  //设置列表list数据
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].invoiceId,
      invoiceType: data[i].invoiceType,
      invoiceCategory: data[i].invoiceCategory,
      invoiceCode: data[i].invoiceCode,
      invoiceNumber: data[i].invoiceNumber,
      invoiceDate: data[i].invoiceDate,
      customerName: data[i].customerName,
      customerEntTaxId: data[i].customerEntTaxId,
      totalAmountTaxes: data[i].totalAmountTaxes,
      invoiceReqFlowNo: data[i].invoiceReqFlowNo,
      hongchongFlag: data[i].hongchongFlag,
      status: data[i].status,
      pdfUrl: data[i].pdfUrl,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //设置列表list数据
  renderItem = (data) => (
    <SwipeAction>
      <List.Item
        style={{backgroundColor: '#F7F7F7'}}
        onPress={() => {
          console.log(data.item);
          if (data.item.pdfUrl === null || data.item.pdfUrl === '') {
            this.props.children.props.navigation.navigate('invoice_info', {
              data: data.item,
            });
          } else {
            this.props.children.props.navigation.navigate('preview_pdf', {
              url: data.item.pdfUrl,
              number: data.item.invoiceReqFlowNo,
            });
          }
        }}>
        <View style={{backgroundColor: '#ffffff'}}>
          <View style={{flexDirection: 'row', marginLeft: 5, marginTop: 5, marginBottom: 5}}>
            <View style={{flex: 1}}>
              <Text style={invoice_inquiry_css.listHead}>
                {data.item.customerName}
              </Text>
            </View>
            {data.item.invoiceType === 0 ? (
              <View style={invoice_inquiry_css.listBlueHead}>
                <Text style={{color: '#ffffff'}}>蓝字发票</Text>
              </View>
            ) : data.item.invoiceType === 1 ? (
              <View style={invoice_inquiry_css.listRedHead}>
                <Text style={{color: '#ffffff'}}>红字发票</Text>
              </View>
            ) : data.item.invoiceType === 2 ? (
              <View style={invoice_inquiry_css.listInvalidHead}>
                <Text style={{color: '#ffffff'}}>空白作废发票</Text>
              </View>
            ) : (
              <View />
            )}
          </View>
          <View style={{marginLeft: 5}}>
            {data.item.invoiceCategory === 1 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税普通电子发票</Text>
              </View>
            ) : data.item.invoiceCategory === 2 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税电子专用发票</Text>
              </View>
            ) : data.item.invoiceCategory === 3 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税普通纸质发票</Text>
              </View>
            ) : data.item.invoiceCategory === 4 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税专用纸质发票</Text>
              </View>
            ) : (
              <View />
            )}
          </View>
          <View style={{flexDirection: 'row', margin: 5}}>
            <View style={{flex: 1}}>
              <View style={{marginTop: 5}}>
                {data.item.status === 1 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>开票中</Text>
                  </View>
                ) : data.item.status === 2 ? (
                  <View style={invoice_inquiry_css.listRedStatus}>
                    <Text style={{color: '#F06969'}}>开票失败</Text>
                  </View>
                ) : data.item.status === 3 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>正数开具成功</Text>
                  </View>
                ) : data.item.status === 4 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>负数开具成功</Text>
                  </View>
                ) : data.item.status === 5 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>正数已作废</Text>
                  </View>
                ) : data.item.status === 6 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>负数已作废</Text>
                  </View>
                ) : data.item.status === 7 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>空白作废</Text>
                  </View>
                ) : (
                  <View />
                )}
              </View>
              <View style={{marginTop: 5}}>
                <Text style={{color: '#A0A0A0'}}>{data.item.invoiceDate}</Text>
              </View>
            </View>
            <View style={{flex: 1, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-end', marginRight: 5}}>
              <Text
                style={{color: '#393939', fontSize: 18, fontWeight: 'bold'}}>
                ¥{data.item.totalAmountTaxes}
              </Text>
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //发票红冲
  invoice_red_rush = async (data) => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/hongchongInfo/save';
      RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          oriInvoiceReqFlowNo: data.invoiceReqFlowNo,
        },
        false,
        1,
      ).then((res) => {
        console.log(res);
        if (res.code == 0) {
          ToastShow(1, '发票红冲申请提交成功!');
          this.initData();
        } else {
          ToastShow(1, '发票红冲申请提交失败!');
          this.initData();
        }
      });
    }
  };

  //发票在线查看
  see_invoice = (data) => {
    this.props.children.props.navigation.navigate('preview_pdf', data);
  };
}