import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Badge, Popover, Icon } from 'antd';
import SelectModal from '../../../components/SelectModal';
import styles from './modal.less';
import { Codes, resourceType } from '../../../utils/config';

export default class WareSelectSortModal extends PureComponent {
  static propTypes = {
    selTableData: PropTypes.array.isRequired,
    modalVisible: PropTypes.bool.isRequired,
    rowKeyName: PropTypes.string.isRequired,
  };

  render() {
    const { selTableData, modalVisible, rowKeyName, onCancel, onOk, onSearch, ...fsTableOpts } = this.props;

    const modalProps = {
      title: '选择课件',
      maskClosable: false,
      visible: modalVisible,
      onCancel,
      onOk,
    };

    const searchProps = {
      searchField: 'name',
      searchKeyWord: '',
      searchSize: 'default',
      searchSelect: true,
      searchSelectOptions: [{
        value: 'name', name: '课件名称', mode: 'input',
      }, {
        value: 'code', name: '课件编号', mode: 'input',
      }],
      searchSelectProps: {
        defaultValue: 'name',
      },
      onSearch: (value) => {
        onSearch(value);
      },
    };

    const selTableProps = {
      operDel: true,
      operSort: true,
      tableClassName: styles.sTable,
      tablePagination: false,
      tableDataSource: selTableData,
      rowKeyName,
      tableColumns: [{
        title: '课件编号',
        dataIndex: 'code',
        key: 'code',
      }, {
        title: '课件名称',
        dataIndex: 'name',
        key: 'name',
      }],
    };

    // 待选资源Table属性
    const fsTableProps = {
      fsTableClassName: styles.fsTable,
      fsTableColumns: [{
        title: '课件编号',
        dataIndex: 'code',
        key: 'code',
      }, {
        title: '课件名称',
        dataIndex: 'name',
        key: 'name',
      }],
      ...fsTableOpts,
    };

    return (
      <SelectModal
        mode="multiple"
        {...searchProps}
        {...modalProps}
        {...selTableProps}
        {...fsTableProps}
      />
    );
  }
}