import React, { useState, useEffect } from 'react';
import { Form, Button, message, Table, Pagination, Modal } from 'antd';
import router from 'umi/router';
import AuthButton from '@/components/AuthButton';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import { ConfirmButton } from '@/components/ModalButton';
import apis from '../../../services/apis';
import request from '../../../utils/request'
import BuildSelect from '../../../components/SelectButton/BuildSelect';
import styles from '../../style/GoodsList.less';
import Navigate from '@/components/Navigate';

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

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.newsType.list, 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({ pageNum: pageNumber, pageSize: 10, ...values })
      }
    });
  }


  // 跳转到编辑资讯
  const toEditNews = (id) => () => {
    router.push({
      pathname: '/news/type/editNews',
      query: {
        id
      },
    });
  }


  const changeNewsStatus = (row, newsId) => () => {
    request({ ...apis.newsType.put, urlData: { id: newsId }, data: { ...row, status: -1 } }).then((data) => {
      message.info('操作成功！')
      getList({ pageNum: 1, pageSize: 10 });
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }
  /**
   *
   *
   * @param {*} props
   * @returns
   */
  const columns = [
    {
      title: '类型图',
      dataIndex: 'newsTypeImg',
      key: 'newsTypeImg',
      align: 'center',
      render: (text, record) => <img src={record.newsTypeImg} style={{ width: '165px', height: '104px' }} className={styles.touxiang} />,
    },
    {
      title: '名称',
      dataIndex: 'newsTypeName',
      key: 'newsTypeName',
      align: 'center',
      render: (text, record) => <Navigate to={`/news/type/editNews?id=${record.newsTypeId}`}>{text}</Navigate>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: withActions((x, row) => [
        <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
          <ConfirmButton type="link" title="确认删除？" onClick={changeNewsStatus(row, row.newsTypeId)}>
            <EditIcon text="删除" type="delete" />
          </ConfirmButton>
        </AuthButton>,
        <AuthButton name="admin.taNewsType.id.put" noRight={null}>
          <EditIcon text="编辑" type="edit" onClick={toEditNews(row.newsTypeId)} />
        </AuthButton>,
      ]),
    },
  ];

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

  const { getFieldDecorator } = props.form
  return (

    <>
      {/* <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          <AuthButton name="admin.taNewsType.search" noRight={null}>
            <Button type="primary" htmlType="submit" >
              搜索
              </Button>
          </AuthButton>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
      </Form> */}
      <AuthButton name="admin.taNewsType.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
      </AuthButton>
      <Table rowKey="newsType" 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' })(NewsType);

export default WrappedHeader
