import React from 'react';
import moment from 'moment';
import { Modal, Button } from 'antd';
import { StandardTableList } from '../../../components/AXList';
import AXVideoPlayer from '../../../components/AXVideoPlayer';
import Ellipsis from '../../../components/Ellipsis';
import { resourceQuality } from '../../../utils/utils';

function VideoTableList({
  UIParams, dataSource, loading, totalSize, pageSize, pageNo, modalDestroy, currentItem,
  onCreateClick, onUpdateClick, onFilterClick, onBatchClick, onModalCreate,
  onModalDestroy,
}) {
  const pagination = {
    pageNo,
    pageSize,
    totalSize,
  };
  const batchActions = [{
    key: 'delete',
    name: '批量删除',
  }, {
    key: 'edit',
    name: '批量编辑',
  }];
  const basicSearch = {
    keys: [{
      name: '视频名称',
      field: 'name',
    }, {
      name: '视频编号',
      field: 'code',
    }],
  };
  const columns = [{
    title: '视频编号',
    key: 1,
    dataIndex: 'code',
    width: '15%',
    render: text => (
      <Ellipsis tooltip lines={1}>{text}</Ellipsis>
    ),
  }, {
    title: '视频名称',
    key: 2,
    dataIndex: 'name',
    width: '30%',
    render: text => (
      <Ellipsis tooltip lines={1}>{text}</Ellipsis>
    ),
  }, {
    title: '视频格式',
    key: 3,
    dataIndex: 'format',
    width: '10%',
  }, {
    title: '质量',
    key: 4,
    dataIndex: 'quality',
    render: text => resourceQuality[text],
    width: '10%',
  }, {
    title: '修改时间',
    key: 5,
    dataIndex: 'gmtModified',
    render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    width: '15%',
  }, {
    title: '操作',
    key: 6,
    dataIndex: 'operation',
    render: (_, record) => renderActions(record),
    width: '20%',
    align: 'right',
  }];
  const renderActions = (item) => {
    return (
      <div>
        <Button
          size="small"
          type="primary"
          className="editBtn"
          onClick={() => onUpdateClick(item)}
        >编辑
        </Button>
        <Button
          size="small"
          type="primary"
          className="playBtn"
          onClick={() => onModalCreate(item)}
        >播放
        </Button>
      </div>
    );
  };
  return (
    <div>
      <StandardTableList
        columns={columns}
        loading={loading}
        dataSource={dataSource}
        keepUIState={{ ...UIParams }}
        header={{ basicSearch, onFilterClick, onCreateClick }}
        footer={{ pagination, batchActions, onBatchClick }}
        showStatusSelect={false}
      />
      {!modalDestroy && (
        <Modal
          title={currentItem.name}
          visible
          footer={null}
          onCancel={onModalDestroy}
          maskClosable={false}
          width={800}
        >
          <AXVideoPlayer
            width="100%"
            height="100%"
            url={currentItem.url}
            isM3U8={currentItem.format === 'm3u8'}
          />
        </Modal>
      )}
    </div>
  );
}

export default VideoTableList;