import React from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';

const { Option } = Select;
// 提交事件
function handleSubmit(e, props) {
  e.preventDefault();
  props.form.validateFields((err, values) => {
    if (!err) {
      console.log('提交数据: ', values)
    }
  });
}
// Change 事件
function handleSelectChange(props) {
  console.log(props)
}

// 分页
function onChange(pageNumber) {
  console.log('Page: ', pageNumber);
}
// 跳转到编辑商品
function toEditGoods() {
  router.push({
    pathname: '/activity/editActivity',
    query: {
      a: 'b',
    },
  });
}

/**
 *
 *
 * @param {*} props
 * @returns
 */

const dataSource = [
  {
    key: '1',
    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
    name: '华为P30 Pro',
  },
  {
    key: '2',
    img: '',
    name: '大米',
  },
];

const columns = [
  {
    title: '商品图片',
    dataIndex: 'img',
    key: 'img',
    align: 'center',
    render: (text, record) => <img src={record.img} className={styles.touxiang} />,
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',

  },
  {
    title: '所属积分',
    dataIndex: 'integral',
    key: 'integral',
    align: 'center',
  },
  {
    title: '总数量',
    dataIndex: 'total',
    key: 'total',
    align: 'center',
  },
  {
    title: '已兑换数量',
    dataIndex: 'exchanged',
    key: 'exchanged',
    align: 'center',
  },
  {
    title: '剩余数量',
    dataIndex: 'rest',
    key: 'rest',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'handle',
    key: 'handle',
    align: 'center',
    render: () => <><span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>下架<Icon type="shopping-cart" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
  },
];
const confirm = () => {
  Modal.confirm({
    title: '确认下架该商品？',
    okText: '确认',
    cancelText: '取消',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });

}

const header = (props) => {
  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="商品名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('goodState')(
            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
              <Option value="1">上架</Option>
              <Option value="0">下架</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('isMain')(
            <Select style={{ width: '180px' }} placeholder="所属项目" onChange={handleSelectChange}>
              <Option value="1">首页推荐</Option>
              <Option value="0">首页未推荐</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('min')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="最小积分"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('max')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="最大积分"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Button type="primary" className={styles.addBtn} onClick={toEditGoods}>新增</Button>
      <Table dataSource={dataSource} columns={columns} />
      {/* 分页 */
      /* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />
      </div> */}
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader