import React from 'react';
import { Link } from 'umi';
import moment from 'moment';
import { Button, Popconfirm, Dropdown, Menu, message } from 'antd';
import PageTable from '@/components/PageTable';
import { getDeviceList } from '@/services/device';

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

const List = (props, ref) => {
  const { onOperate, toolBar } = props;

  const columns = [
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      key: 'deviceType',
      valueEnum: {
        shensong: {
          text: '深松',
        },
        feifang: {
          text: '飞防',
        },
      },
    },
    {
      title: '设备编号',
      dataIndex: 'deviceNo',
      key: 'deviceNo',
      search: false,
    },
    {
      title: '绑定农机',
      dataIndex: 'machineryName',
      key: 'machineryName',
      search: false,
    },
    {
      title: '注册时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: formatterTime,
      search: false,
      width: 240,
    },
    {
      title: '在线状态',
      dataIndex: 'onlineStatus',
      key: 'onlineStatus',
      valueEnum: {
        1: {
          text: '在线',
        },
        0: {
          text: '离线',
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 280,
      render: (_, record) => [
        <Link
          to={`/Machinery/OperationStatistics?deviceType=${record.deviceType}&deviceNo=${record.deviceNo}`}
          key={1}
        >
          作业
        </Link>,
        record.machineryId === null ? (
          <Button key={2} type="link" onClick={() => onOperate(record, 'bind')}>
            绑定
          </Button>
        ) : (
          <Popconfirm
            key={3}
            title={`是否进行解绑操作?`}
            onConfirm={() => onOperate(record, 'unbind')}
          >
            <Button type="link">解绑</Button>
          </Popconfirm>
        ),
        <Popconfirm
          key={4}
          title={`确认进行删除操作?`}
          onConfirm={() => onOperate(record, 'delete')}
        >
          <a href="#">删除</a>
        </Popconfirm>,
        <Button key={5} type="link" onClick={() => onOperate(record, 'syncLoc')}>
          同步位置
        </Button>,
      ],
    },
  ];

  const actionRef = React.useRef();

  React.useImperativeHandle(ref, () => {
    return {
      reload: () => actionRef.current.reload(),
    };
  });
  return (
    <PageTable
      request={getDeviceList}
      actionRef={actionRef}
      columns={columns}
      rowKey={(row) => `${row.deviceType}-${row.deviceNo}`}
      options={false}
      toolBarRender={() => toolBar}
      scroll={{ x: 1000 }}
    />
  );
};

export default React.forwardRef(List);