import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Tabs, Row, Col, Modal, message } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import erweima from '../../assets/erweima.png';
import saoma from '../../assets/saoma.png';
import list from '../../assets/list.png';
import AuthButton from '@/components/AuthButton';

const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}

/**
 * @param {*} props
 * @returns
 */
class Dialog extends React.Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({ visible: true, });
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  onKeyDown = (e) => {

    if (e.keyCode == 13) {
      this.setState({ visible: false });
      this.props.onEnter();
    }
  }

  render() {
    const { visible, loading } = this.state;
    return (
      <div>
        <AuthButton name="admin.taPointsExchange.recId.put" noRight={null}>
          <Button type="primary" onClick={this.showModal} style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
        </AuthButton>
        <Modal
          style={{ marginTop: '20vh' }}
          visible={visible}
          title="核销数据"
          onCancel={this.handleCancel}
          footer={[]}
        >
          <p>扫描二维码数据</p>
          <Input placeholder="请用扫描枪扫描二维码" onKeyDown={this.onKeyDown} onChange={this.props.onChange} />
        </Modal>
      </div>
    );
  }
}


function header(props) {
  const [telValue, setTelValue] = useState('')

  const changeTel = (e) => {
    setTelValue(e.target.value)
  }

  const [codeValue, setCodeValue] = useState('')
  const changeCode = (e) => {

    setCodeValue(e.target.value)

  }

  const verifyTel = () => {
    if (telValue === "") {
      message.error("请输入手机号");
      return;
    }
    router.push({
      pathname: '/integralMall/verifyList',
      query: {
        telValue
      },
    });
  }


  const handleEnter = (e) => {
    if (codeValue === "") {
      message.error("无二维码数据");
      return;
    } else {

      router.push({
        pathname: '/integralMall/verifyList',
        query: {
          telValue:codeValue
        },
      });
    }
  }

  const { getFieldDecorator } = props.form
  return (
    <>
      <Tabs onChange={callback} type="card">
        {/* <TabPane tab="扫码核销" key="1">
          <Row>
            <Col span={8} style={{ textAlign: 'center' }}>
              <img src={erweima} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
              <p>1</p>
              <p>请用户出示核销的二维码</p>
              <p>请将网页输入法切换成英文</p>
            </Col>
            <Col span={8} style={{ textAlign: 'center' }}>
              <img src={saoma} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
              <p>2</p>
              <p>点击“立即核销”按钮</p>
              <p>使用扫码枪扫描客户二维码</p>
            </Col>
            <Col span={8} style={{ textAlign: 'center' }}>
              <img src={list} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
              <p>3</p>
              <p style={{ margin: '44px auto' }}>根据提示进行核销操作</p>
            </Col>
          </Row>
          <Dialog onEnter={handleEnter} onChange={changeCode} />
        </TabPane> */}
        <TabPane tab="手机号核销" key="2">
          <Row>
            <Col span={12} style={{ textAlign: 'center' }}>
              <img src={erweima} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
              <p>1</p>
              <p>请输入用户的手机号</p>
            </Col>
            <Col span={12} style={{ textAlign: 'center' }}>
              <img src={list} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
              <p>2</p>
              <p>点击“立即核销”按钮</p>
            </Col>
          </Row>
          <div style={{ margin: '110px auto', display: 'block', textAlign: 'center' }}>
            <Input placeholder="请输入手机号" style={{ width: '200px' }} onChange={changeTel} />
            <AuthButton name="admin.taPointsExchange.recId.put" noRight={null}>
              <Button type="primary" style={{ marginLeft: '10px', padding: '0px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
            </AuthButton>
          </div>
        </TabPane>
      </Tabs>,
    </>
  )
}

const WrappedHeader = Form.create({ name: 'header' })(header);


export default WrappedHeader
