import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import { Drawer, List, Picker, Provider, Tabs, WhiteSpace } from "@ant-design/react-native";
import DateTimePicker from '@react-native-community/datetimepicker';
import Invoice_inquiry_ongoing from './invoice_inquiry_ongoing';
import Invoice_inquiry_completed from './invoice_inquiry_completed';
import Invoice_inquiry_all from './invoice_inquiry_all';
import public_css from '../../../source/css/public_css';
import invoice_inquiry_css from './invoice_inquiry_css';
import {GetDateString} from '../../../utils/date';

export default class paper_major_invoice extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      isShowSearch: false,
      visible1: false,
      tab: 0,
      clickNum: 0,
      invoiceStatus: null,
      beginDateTime: undefined,
      endDateTime: undefined,
      customerName: '',
      customerEntTaxId: '',
      invoiceCode: '',
      invoiceNumber: '',
      beginDate: new Date(),
      beginDateText: '开始时间',
      endDate: new Date(),
      endDateText: '结束时间',
      beginDateShow: false,
      endDateShow: false,
      invoiceCategory: 4,
    };
  }

  render() {
    const tabs = [{title: '全部'}, {title: '开票中'}, {title: '开票成功'}];
    const seasons = [
      [
        {
          label: '全部',
          value: null,
        },
        {
          label: '正数开具成功',
          value: 3,
        },
        {
          label: '负数开具成功',
          value: 4,
        },
        {
          label: '正数已作废',
          value: 5,
        },
        {
          label: '负数已作废',
          value: 6,
        },
        {
          label: '空白作废',
          value: 7,
        },
      ],
    ];
    let draw = (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View>
            <Picker
              data={seasons}
              cols={1}
              value={[this.state.invoiceStatus]}
              onChange={(select) => this.invoiceStatusChange(select)}
              cascade={false}>
              <List.Item>
                <Text
                  style={{color: '#414141', fontSize: 16, fontWeight: 'bold'}}>
                  发票状态：
                </Text>
              </List.Item>
            </Picker>
            <View style={{margin: 10}}>
              <Text
                style={{color: '#414141', fontSize: 16, fontWeight: 'bold'}}>
                时间区间
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TouchableOpacity
                style={{
                  backgroundColor: '#F5F5F5',
                  width: 120,
                  height: 40,
                  borderRadius: 99,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                  this.isShowDateSelect(1);
                }}>
                <View>
                  <Text
                    style={{
                      color: '#D7D7D7',
                      fontWeight: 'bold',
                      fontSize: 16,
                    }}>
                    {this.state.beginDateText}
                  </Text>
                </View>
              </TouchableOpacity>
              <View>
                <Text style={{color: '#8C8C8C'}}>—</Text>
              </View>
              <TouchableOpacity
                style={{
                  backgroundColor: '#F5F5F5',
                  width: 120,
                  height: 40,
                  borderRadius: 99,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                  this.isShowDateSelect(2);
                }}>
                <View>
                  <Text
                    style={{
                      color: '#D7D7D7',
                      fontWeight: 'bold',
                      fontSize: 16,
                    }}>
                    {this.state.endDateText}
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
            {this.state.beginDateShow === true ? (
              <DateTimePicker
                testID="dateTimePicker"
                value={this.state.beginDate}
                mode={'date'}
                is24Hour={true}
                display="default"
                placeholder="起始时间"
                dateFormat="yyyy-MM-dd"
                onChange={(event, date) => {
                  this.beginDateChange(event, date);
                }}
              />
            ) : (
              <View />
            )}
            {this.state.endDateShow === true ? (
              <DateTimePicker
                testID="dateTimePicker"
                value={this.state.endDate}
                mode={'date'}
                is24Hour={true}
                display="default"
                placeholder="起始时间"
                dateFormat="yyyy-MM-dd"
                onChange={(event, date) => {
                  this.endDateChange(event, date);
                }}
              />
            ) : (
              <View />
            )}
          </View>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                客户名称：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的客户名称'}
                clearButtonMode={'while-editing'}
                value={this.state.customerName}
                onChangeText={(value) => {
                  this.setState({
                    customerName: value,
                  });
                }}
              />
            </View>
          </View>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                客户企业税号：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的客户企业税号'}
                clearButtonMode={'while-editing'}
                value={this.state.customerEntTaxId}
                onChangeText={(value) => {
                  this.setState({
                    customerEntTaxId: value,
                  });
                }}
              />
            </View>
          </View>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                发票代码：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的发票代码'}
                clearButtonMode={'while-editing'}
                value={this.state.invoiceCode}
                onChangeText={(value) => {
                  this.setState({
                    invoiceCode: value,
                  });
                }}
              />
            </View>
          </View>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                发票号码：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的发票号码'}
                // clearButtonMode={'while-editing'}
                value={this.state.invoiceNumber}
                onChangeText={(value) => {
                  console.log(value);
                  this.setState({
                    invoiceNumber: value,
                  });
                }}
              />
            </View>
          </View>
        </ScrollView>
        <View style={public_css.bottomStatus}>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderRadius: 30,
                borderColor: '#8B8B8B',
                width: 120,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.searchDataEmpty();
              }}>
              <Text style={{color: '#262626'}}>重置</Text>
            </TouchableOpacity>
          </View>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderRadius: 30,
                borderColor: '#2A67FE',
                backgroundColor: '#2A67FE',
                width: 120,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => this.submitData()}>
              <Text style={{color: '#FFFFFF'}}>查询</Text>
            </TouchableOpacity>
          </View>
        </View>
        <WhiteSpace />
      </SafeAreaView>
    );
    return (
      <View style={{flex: 1}}>
        <Provider>
          <Drawer
            sidebar={draw}
            position="right"
            open={false}
            drawerRef={(el) => (this.drawer = el)}
            onOpenChange={(open) => this.openStatus(open)}
            drawerBackgroundColor="#ccc"
            drawerWidth={300}>
            <Tabs
              tabs={tabs}
              onChange={(i, l) => this.onChanges(i, l)}
              page={0}>
              <View style={invoice_inquiry_css.container}>
                <Invoice_inquiry_all children={this} />
              </View>
              <View style={invoice_inquiry_css.container}>
                <Invoice_inquiry_ongoing children={this} />
              </View>
              <View style={invoice_inquiry_css.container}>
                <Invoice_inquiry_completed children={this} />
              </View>
            </Tabs>
          </Drawer>
        </Provider>
      </View>
    );
  }

  //判断是否点击了查询
  shouldComponentUpdate(
    nextProps: Readonly<P>,
    nextState: Readonly<S>,
    nextContext: any,
  ): boolean {
    if (nextProps.route.params !== undefined) {
      if (nextProps.route.params.isShow) {
        if (this.state.clickNum === 0) {
          this.setState({
            isShowSearch: true,
            clickNum: this.state.clickNum++,
          });
          this.drawer.openDrawer();
          this.props.navigation.setParams({
            isShow: false,
          });
        }
      }
    }
    return true;
  }

  //tab变化事件
  onChanges = (i, l) => {
    if (this.state.tab !== l) {
      this.setState({
        tab: l,
        clickNum: 0,
        invoiceStatus: null,
        beginDate: new Date(),
        beginDateText: '开始时间',
        endDate: new Date(),
        endDateText: '结束时间',
        beginDateShow: false,
        endDateShow: false,
        customerName: '',
        customerEntTaxId: '',
        invoiceCode: '',
        invoiceNumber: '',
        invoiceCategory: 4,
      });
    }
  };

  //传递方法到子组件
  getOnGoingRef = (ref) => {
    this.goingChild = ref;
  };

  //传递方法到子组件
  getCompletedRef = (ref) => {
    this.completedChild = ref;
  };

  //传递方法到子组件
  getAllRef = (ref) => {
    this.allChild = ref;
  };

  //查询菜单开关状态
  openStatus = (open) => {
    if (open) {
    } else {
      // this.props.children.setClickNum();
    }
  };

  // 发票状态选择
  invoiceStatusChange = (data) => {
    let status = '';
    if (data.length > 0) {
      status = data[0];
    }
    this.setState({
      invoiceStatus: status,
    });
  };

  //查询
  submitData = () => {
    let tab = this.state.tab;
    if (tab === 0) {
      this.drawer.closeDrawer();
      this.allChild.initData();
    }
    if (tab === 1) {
      this.drawer.closeDrawer();
      this.goingChild.initData();
    }
    if (tab === 2) {
      this.drawer.closeDrawer();
      this.completedChild.initData();
    }
  };

  //清空查询数据
  searchDataEmpty = () => {
    this.setState({
      invoiceStatus: null,
      beginDate: new Date(),
      beginDateText: '开始时间',
      endDate: new Date(),
      endDateText: '结束时间',
      beginDateShow: false,
      endDateShow: false,
      customerName: '',
      customerEntTaxId: '',
      invoiceCode: '',
      invoiceNumber: '',
      invoiceCategory: 4,
    });
  };

  // 点击开始和结束时间显示时间选择器
  isShowDateSelect = (dateStatus) => {
    // 开始时间和结束时间选择器显示 1:开始时间 2：结束时间
    if (dateStatus === 1) {
      this.setState({
        beginDateShow: true,
      });
    } else {
      this.setState({
        endDateShow: true,
      });
    }
  };

  // 获取开始时间
  beginDateChange = (event, date) => {
    let dateText = GetDateString(date);
    this.setState({
      beginDate: date,
      beginDateShow: false,
      beginDateText: dateText,
    });
  };

  //获取结束时间
  endDateChange = (event, date) => {
    let dateText = GetDateString(date);
    this.setState({
      endDate: date,
      endDateShow: false,
      endDateText: dateText,
    });
  };
}