import React, {Component} from 'react';
import {View, TouchableOpacity, Image, Text} from 'react-native';
import {
  DatePicker,
  Drawer,
  List,
  Provider,
  Tabs,
  Picker,
  InputItem,
} from '@ant-design/react-native';

import Invoice_inquiry_ongoing from './invoice_inquiry_ongoing';
import Invoice_inquiry_completed from './invoice_inquiry_completed';
import Invoice_inquiry_fail from './invoice_inquiry_fail';
import public_css from '../../source/css/public_css';
import invoice_inquiry_css from './invoice_inquiry_css';

export default class invoice_inquiry extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      isShowSearch: false,
      visible1: false,
      tab: 0,
      clickNum: 0,
      beginDateTime: undefined,
      endDateTime: undefined,
      customerName: '',
      customerEntTaxId: '',
      invoiceCode: '',
      invoiceNumber: '',
      hongchongFlag: undefined,
    };
  }

  render() {
    const tabs = [{title: '开具中'}, {title: '开具完成'}, {title: '开具失败'}];
    const seasons = [
      [
        {
          label: '全部',
          value: 2,
        },
        {
          label: '是',
          value: true,
        },
        {
          label: '否',
          value: false,
        },
      ],
    ];

    let draw = (
      <View style={public_css.body}>
        <View style={{flex: 1}}>
          <View>
            <List>
              <DatePicker
                value={this.state.beginDateTime}
                mode="date"
                defaultDate={new Date()}
                minDate={new Date(2020, 0, 1)}
                maxDate={new Date(2030, 11, 3)}
                onChange={(time) => this.beginTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">开始时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <View>
            <List>
              <DatePicker
                value={this.state.endDateTime}
                mode="date"
                defaultDate={new Date()}
                minDate={this.state.beginDateTime}
                maxDate={new Date(2030, 11, 3)}
                onChange={(time) => this.endTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">结束时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <InputItem
            clear
            value={this.state.customerName}
            onChange={(value) => {
              this.setState({
                customerName: value,
              });
            }}
            placeholder="请输入要查询的客户名">
            客户名:
          </InputItem>
          <InputItem
            clear
            value={this.state.customerEntTaxId}
            onChange={(value) => {
              this.setState({
                customerEntTaxId: value,
              });
            }}
            placeholder="请输入要查询的客户企业税号">
            客户企业税号:
          </InputItem>
          <InputItem
            clear
            value={this.state.invoiceCode}
            onChange={(value) => {
              this.setState({
                invoiceCode: value,
              });
            }}
            placeholder="请输入要查询的发票代码">
            发票代码:
          </InputItem>
          <InputItem
            clear
            value={this.state.invoiceNumber}
            onChange={(value) => {
              this.setState({
                invoiceNumber: value,
              });
            }}
            placeholder="请输入要查询的发票号码">
            发票号码:
          </InputItem>
          <Picker
            data={seasons}
            cols={1}
            value={this.state.hongchongFlag}
            onChange={(select) => this.flagChange(select)}
            cascade={false}>
            <List.Item>发票是否可红冲:</List.Item>
          </Picker>
        </View>
        <View style={public_css.bottomStaus}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusLBtn]}
            onPress={() => {
              this.searchDataEmpty();
            }}>
            <Image
              source={require('../../source/img/productImg/clear.png')}
              style={{width: 32, height: 32}}
            />
            <Text>全部清除</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusRBtn]}
            onPress={() => this.submitData()}>
            <Image
              source={require('../../source/img/productImg/confirm.png')}
              style={{width: 32, height: 32}}
            />
            <Text style={{color: '#fff'}}>查询</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
    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_ongoing children={this} />
              </View>
              <View style={invoice_inquiry_css.container}>
                <Invoice_inquiry_completed children={this} />
              </View>
              <View style={invoice_inquiry_css.container}>
                <Invoice_inquiry_fail 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) => {
    this.setState({
      tab: l,
      clickNum: 0,
      beginDateTime: undefined,
      endDateTime: undefined,
      customerName: '',
      customerEntTaxId: '',
      invoiceCode: '',
      invoiceNumber: '',
      hongchongFlag: undefined,
    });
  };

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

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

  //传递方法到子组件
  getFailRef = ref => {
    this.failChild = ref;
  };

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

  //获取查询开始时间
  beginTimeChange = time => {
    this.setState({
      beginDateTime: time,
    });
  };

  //获取查询结束时间
  endTimeChange = time => {
    this.setState({
      endDateTime: time,
    });
  };

  //获取查询是否红冲
  flagChange = select => {
    this.setState({
      hongchongFlag: select,
    });
  };

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

  //清空查询数据
  searchDataEmpty = () => {
    this.setState({
      beginDateTime: undefined,
      endDateTime: undefined,
      customerName: '',
      customerEntTaxId: '',
      invoiceCode: '',
      invoiceNumber: '',
      hongchongFlag: undefined,
    });
  };
}