import React, { useState, useEffect } from 'react';
import { Button, Table, Pagination, Alert, Icon, Tag, notification, Modal } from 'antd'
import router from 'umi/router';
import moment from 'moment';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import AuthButton from '@/components/AuthButton';

import request from '../../../utils/request';
import apis from '../../../services/apis';

export default function BuildType() {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([{ records: [] }])

  const columns = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '类型名称',
      dataIndex: 'buildingTypeName',
      key: 'buildingTypeName',
      render: (_, record) => <Tag color="blue" onClick={() => toEdi(record.buildingTypeId)}>{record.buildingTypeName}</Tag>,
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD')}</span>,
    },
    {
      title: '操作',
      dataIndex: 'row',
      key: 'row',
      render: withActions((_, record) => [
        <AuthButton name="admin.tdBuildingType.delete" noRight={null}>
          <EditIcon text="删除" type="delete" onClick={() => deleteType(record)} />
        </AuthButton>,
        <AuthButton name="admin.tdBuildingType.update" noRight={null}>
          <EditIcon text="编辑" type="edit" onClick={() => toEdi(record.buildingTypeId)} />
        </AuthButton>,
      ]),
    },
  ];

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 })
  }, [])

  const openNotificationWithIcon = (type, message) => {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function getList(params) {
    request({ ...apis.buildingType.getList, params: { ...params } }).then(res => {
      setData(res)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      // openNotificationWithIcon('error', err)
    })
  }

  // 分页
  function onChange(pageNumber) {
    // eslint-disable-next-line no-console
    console.log('Page: ', pageNumber);
    getList({ pageNum: pageNumber, pageSize: 10 })
  }

  function deleteType(row) {
    row.status = -1
    const modal = Modal.confirm();
    modal.update({
      content: '确认删除？',
      okText: '确认',
      cancelText: '关闭',
      onOk: () => {
        request({ ...apis.buildingType.update, urlData: { id: row.buildingTypeId }, data: { ...row } }).then(() => {
          getList({ pageNum: data.current, pageSize: 10 })
        }).then(() => {
          openNotificationWithIcon('success', '操作成功')
        }).catch(err => {
          // openNotificationWithIcon('error', err.message)
        })

        modal.destroy();
      },
      onCancel: () => {
        modal.destroy();
      },
    });
  }

  // 跳转修改页
  function toEdi(currentId) {
    router.push({
      pathname: '/building/type/edi',
      query: {
        id: currentId || '',
      },
    });
  }

  return (
    <>
      <AuthButton name="admin.tdBuildingType.add" noRight={null}>
        <Button type="danger" onClick={() => toEdi()}>新增类型</Button>
      </AuthButton>
      <Table style={{ marginTop: '30px' }} dataSource={data.records} columns={columns} pagination={false} rowKey="buildingType" />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={onChange} current={data.current} />
      </div>
    </>
  )
}
