import React, { PureComponent } from 'react';
import { Popover } from 'antd';
import SelectModal from '../../../components/SelectModal';
import styles from './resource.less';
import { Codes, ossHost } from '../../../utils/config';

export default class ResourceSelectModal extends PureComponent {
  render() {
    const { mode, selTableData, 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: 'code',
      },
      onSearch: (value) => {
        onSearch(value);
      },
    };

    const selTableProps = {
      operDel: true,
      operSort: true,
      tableClassName: styles.sTable,
      tablePagination: false,
      tableDataSource: selTableData,
      tableColumns: [{
        title: '缩略图',
        dataIndex: 'url',
        key: 'url',
        render: (text, record) => (
          <Popover
            content={<img alt="" src={`${ossHost}/${record.path}`} width={350} />}
            title={record.name}
          >
            <img alt="" src={`${ossHost}/${record.path}`} width={70} />
          </Popover>
        ),
      },{
        title: '图片编号',
        dataIndex: 'code',
        key: 'code',
      },{
        title: '图片名称',
        dataIndex: 'name',
        key: 'name',
      }],
    };

    //待选资源Table属性
    const fsTableProps = {
      fsTableClassName: styles.fsTable,
      fsTableColumns: [{
        title: '缩略图',
        dataIndex: 'url',
        key: 'url',
        render: (text, record) => (
          <Popover
            content={<img alt="" src={`${ossHost}/${record.path}`} width={350} />}
            title={record.name}
          >
            <img alt="" src={`${ossHost}/${record.path}`} width={70} />
          </Popover>
        ),
      },{
        title: '图片编号',
        dataIndex: 'code',
        key: 'code',
      },{
        title: '图片名称',
        dataIndex: 'name',
        key: 'name',
      }],
      ...fsTableOpts,
    }

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