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

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

  render() {
    const { modalVisible, 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);
      },
    };

    //待选资源Table属性
    const fsTableProps = {
      fsTableColumns: [{
        title: '封面图',
        dataIndex: 'url',
        key: 'url',
        render: (text, record) => (
          <Popover
            content={<img alt="" src={record.coverUrl} width={350} />}
            title={record.name}
          >
            <img alt="" src={record.coverUrl} width={70} />
          </Popover>
        ),
        width: '26%',
      },{
        title: '课程编号',
        dataIndex: 'code',
        key: 'code',
        width: '27%',
      },{
        title: '课程名称',
        dataIndex: 'name',
        key: 'name',
        width: '27%',
      }],
      ...fsTableOpts,
    }

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