
import moment from 'moment';
import React, { useRef, useEffect, useState } from 'react'

import { Button, Modal, Popconfirm, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getInvoiceFillList, deleteInvoiceFill } from '@/services/invoiceFill'
import PageTable from '@/components/PageTable'
import { history } from 'umi';

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};

export default (props) => {
  const actionRef = useRef();

  const handleClick = () => {
    history.push('/invoiceFill/edit.jsx');
  }
  const handleOK = (record, data) => {
    const title = record.status
      ? '您确定要将该班级状态变更为未发布吗? 变更后该班级将不在移动端显示'
      : '您确定要将该班级状态变更为发布吗? 发布后该班级可以在移动端显示';
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        // updateBanner(record.bannerId, { ...record, status: record.status === 1 ? 0 : 1 })
        //   .then((res) => {
        //     message.success('操作成功');
        //     actionRef.current.reload();
        //   })
        //   .catch((err) => {
        //     console.log(err.message)
        //   });
      },
    });
  };
  const handleDelete = (id) => {
    deleteInvoiceFill(id).then((res) => {
      message.success('删除成功')
      actionRef.current.reload();
    }).catch((err) => {
      console.log(err.message)
    });
  }
  const action = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={handleClick}>
      新增班级
    </Button>
  ]

  const columns = [
    {
      title: '班级名称',
      dataIndex: 'name',
      key: 'name',
      search: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      search: false,
      render: (t) => formatterTime(t)
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => {
        return record.status === 1 ? '发布' : '未发布';
      },
      valueType: 'select',
      valueEnum: {
        1: { text: '发布' },
        2: { text: '未发布' },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      ellipsis: true,
      render: (_, record) => [
        <Button type="link" key={1} onClick={() => handleOK(record)} style={{ padding: 0 }}>
          {record.status === 0 ? '发布' : '取消发布'}
        </Button>,
        <Button type="link" key={2} onClick={() => history.push(`/invoiceFill/edit.jsx?id=${record.invoiceId}`)} style={{ padding: 0 }}>
          编辑
        </Button>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.invoiceId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>
      ],
    },
  ]


  return (
    <PageHeaderWrapper>
      <PageTable
        columns={columns}
        request={getInvoiceFillList}
        options={false}
        actionRef={actionRef}
        toolBarRender={action}
        rowKey="invoiceId"
      />
    </PageHeaderWrapper>
  )
}
