import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal,Breadcrumb } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import BuildSelect from '../../components/SelectButton/BuildSelect'
import apis from '../../services/apis';
import request from '../../utils/request'
import AuthButton from '@/components/AuthButton';

const { Option } = Select;


function header(props) {
  // 获取初始化数据
  const [ data, setData ] = useState({})

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  },[])

  // 查询列表
  const getList = (params) => {
    request({ ...apis.integralMall.getTaGoods, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }
  
  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: 1, pageSize: 10, ...values })
      }
    });
  }

  const changePageNum = (pageNumber) => {
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNumber: pageNumber, pageSize: 10, ...values })
      }
    });
  }

  function handleReset() {
    props.form.resetFields();
    getList({ pageNum: 1, pageSize: 10 });
  }

  // 跳转到编辑商品
  const toEditIcons = (goodsId) => () => {
    router.push({
      pathname: '/miniapp/editIcons',
      query: {
        goodsId
      },
    });
  }

  
  const changeGoodsStatus = (row) => () => {
    const title = row.status === 1 ? '商品在小程序端隐藏，后台可继续编辑重新发布?':'商品会重新显示在小程序端?'

    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.integralMall.changeTaGoods, data: { ...row },}).then((data) => {
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10, ...props.form.getFieldsValue() });
        })
      }
    });
  }
  /**
   *
   *
   * @param {*} props
   * @returns
   */
  const columns = [
    {
      title: '商品图片',
      dataIndex: 'imgUrl',
      key: 'imgUrl',
      align: 'center',
      render: (text, record) => <img src={record.imgUrl} className={styles.touxiang} />,
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      align: 'center',

    },
    {
      title: '所属积分',
      dataIndex: 'pointPrice',
      key: 'pointPrice',
      align: 'center',
    },
    {
      title: '总数量',
      dataIndex: 'totalNum',
      key: 'totalNum',
      align: 'center',
    },
    {
      title: '已兑换数量',
      dataIndex: 'exchanged',
      key: 'exchanged',
      align: 'center',
      render: (x,row) => <><span>{row.totalNum - row.inventory}</span></>
    },
    {
      title: '剩余数量',
      dataIndex: 'inventory',
      key: 'inventory',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status)=> <><span>{status == 1 ? '已上架' : '已下架'}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x, row) => (
        <>
          <AuthButton name="admin.taGoods.change.put" noRight={null}>
            <span style={{ color: '#EF273A', marginRight: '20px',cursor: 'pointer' }} onClick={changeGoodsStatus(row)}>
              {row.status == 1 ? '下架' : '上架'}
              {<Icon type="shopping-cart" className={styles.shoppingCart} />}
            </span>
          </AuthButton>
          <AuthButton name="admin.taGoods.put" noRight={null}>
            <span style={{ color: '#FF925C',cursor: 'pointer' }} onClick={toEditIcons(row.goodsId)}>
              编辑<Icon type="form" className={styles.edit} />
            </span>
          </AuthButton>
        </>
      ),
    },
  ];

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('goodsName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="商品名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('status')(
            <Select style={{ width: '180px' }} placeholder="状态">
              <Option value="1">已上架</Option>
              <Option value="0">已下架</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('priceLesser')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="价格小"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('priceGreater')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="价格大"
            />,
          )}
        </Form.Item>
        <Form.Item>
            <AuthButton name="admin.taGoods.search" noRight={null}>
              <Button type="primary" htmlType="submit" className={styles.searchBtn}>
                搜索
              </Button>
            </AuthButton>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <AuthButton name="admin.taGoods.add.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditIcons()}>新增</Button>
      </AuthButton>
      <Table rowKey="goodsList" dataSource={data.records} columns={columns} pagination={false} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
