import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, message, Modal, Space, Table } from 'antd';
import styles from '@/pages/Welcome.less';
import type { ColumnsType } from 'antd/es/table';
import { delOta, queryOtaList } from '@/services/ota';
import { PlusCircleOutlined } from '@ant-design/icons';
import Edit from './edit';

interface DataType {
  name: string;
  record_id: string;
  content: string;
  device_type: string;
  version: string;
}

const OtaUpdate: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
  const [dataList, setDataList] = useState([]);
  const [editData, setEditData] = useState<object | null>({});
  const [visible, setVisible] = useState(false);

  const getList = () => {
    const params = {
      q: 'page',
      current: pagination.current,
      pageSize: pagination.pageSize,
    };
    queryOtaList(params).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  useEffect(() => {
    setLoading(true);
    getList();
  }, []);

  // 新增
  const onAdd = () => {
    setEditData(null);
    setVisible(true);
  };

  // 分页切换
  const onChange = (page: any) => {
    setLoading(true);
    const params = {
      q: 'page',
      current: page.current,
      pageSize: page.pageSize,
    };
    queryOtaList(params).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  // 编辑
  const toEdit = (data: React.SetStateAction<object | null>) => {
    setEditData(data);
    setVisible(true);
  };

  // 编辑回调
  const editCallback = () => {
    setLoading(true);
    setVisible(false);
    getList();
  };

  // 删除
  const toDel = (record: DataType) => {
    Modal.confirm({
      title: '删除',
      content: `确认删除：[${record.content}]`,
      onOk: () => {
        delOta(record.record_id).then((res) => {
          if (res && res.code === 0) {
            message.success('删除成功');
            getList();
          } else {
            message.error('删除失败');
          }
        });
      },
    });
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '更新内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '设备类型',
      dataIndex: 'device_type',
      key: 'device_type',
    },
    {
      title: '版本号',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              toEdit(record);
            }}
          >
            编辑
          </a>
          <a
            style={{ color: 'red' }}
            onClick={() => {
              toDel(record);
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };

  return (
    <PageContainer>
      <Card className={styles.container}>
        <Button htmlType="button" type="primary" style={{ margin: '20px 0' }} onClick={onAdd}>
          <PlusCircleOutlined />
          新增ota
        </Button>
        <Table
          columns={columns}
          dataSource={dataList}
          rowKey={(record) => record.record_id}
          pagination={paginationProps}
          loading={loading}
          onChange={onChange}
        />
        {visible && <Edit visible={visible} editCallback={editCallback} params={editData} />}
      </Card>
    </PageContainer>
  );
};

export default OtaUpdate;
