import React, {useState} from 'react';
import { connect } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import { Table, Button } from 'antd'
import {PlusOutlined} from '@ant-design/icons'

import AddModal from './AddModal'

const Index = (props) => {
  const {dispatch, type = "info", title,
    columns = {}, onAssociate, onUntie,
    dataSource = {list: [], pagination: {}},
    addSource = {list: [], pagination: {}},

  } = props
  const [visible, setVisible] = useState(false)
  const [selectId, setSelectId] = useState([])

  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch, 'control/device_service_type_post', payload);
  }
  /**
   * @页面方法
   */

  /**
   * @Table方法
   */
  /* 移除设备 */
  const batchDelete = id => {
    confirm({
      centered: true,
      title: '删除提示',
      icon: null,
      content: `是否移除选中${title}`,
      onOk() {
        onUntie(id)
      }
    });

  }
  const rowSelection = {
    onChange: ( selectedRowKeys ) => {
      setSelectId(selectedRowKeys);
    },
    selectedRowKeys: selectId,
  }

  /**
   * @页面数据
   */

  return (
    <>
      {type !== 'info' && (
        <div style={{padding: '10px 0'}}>
          <Button type="primary" style={{marginRight: 20}} onClick={() => setVisible(true)}>
            <PlusOutlined/>{`添加${title || ''}`}
          </Button>
          <Button
            danger
            disabled={selectId.length === 0}
            onClick={batchDelete}
          >删除</Button>
        </div>
      )}
      <Table
        bordered
        size="small"
        rowKey={(record) => record.id}
        dataSource={dataSource.list}
        pagination={dataSource.pagination}
        columns={columns}
        scroll={{y: type === 'info' ? 300 : null, x: 1600}}
        rowSelection={type === 'info' ? {} : rowSelection}
      />
      <AddModal
        visible={visible}
        columns={columns}
        dataSource={addSource}
        onAssociate={onAssociate}
        handleClose={() => setVisible(false)}
      />
    </>
  );
};

export default connect(({ opsDevice, loading }) => ({
  opsDevice,
  loading: loading.models.opsDevice,
}))(Index);