import React, { Component } from 'react';
import { Row, Col, Card, Table, Radio } from 'antd';
import { genAbsolutePicUrl } from '../../utils/utils';
import styles from './CourseItem.less';

function CourseTpl({ title, subTitle, coverUrl }) {
  return (
    <div className={styles.content}>
      <div className={styles.courseWrapper}>
        <img src={genAbsolutePicUrl(coverUrl)} alt="" />
        <div className={styles.desc}>
          <div className={styles.title}>{title}</div>
          <div className={styles.subTitle}>{subTitle}</div>
        </div>
      </div>
    </div>
  );
}

class CourseItem extends Component {
  state = {
    openKey: 'lesson',
  };
  handleRadioChange = (e) => {
    this.setState({ openKey: e.target.value });
  };
  render() {
    const { subItemList, supportList } = this.props;
    const lessonColumns = [{
      title: '课编号',
      dataIndex: 'code',
      key: 1,
      width: '50%',
    }, {
      title: '课名称',
      dataIndex: 'title',
      key: 2,
      width: '50%',
    }];
    const supportColumns = [{
      title: '配套编号',
      dataIndex: 'code',
      key: 1,
      width: '50%',
    }, {
      title: '配套名称',
      dataIndex: 'name',
      key: 2,
      width: '50%',
    }];
    return (
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={9}>
          <Card title="课程信息" style={{ height: 540 }} className={styles.coverCard}>
            <CourseTpl {...this.props} />
          </Card>
        </Col>
        <Col span={15}>
          <Card
            title={
              <Radio.Group
                value={this.state.openKey}
                onChange={this.handleRadioChange}
              >
                <Radio.Button value="lesson">课列表</Radio.Button>
                <Radio.Button value="support">周边配套</Radio.Button>
              </Radio.Group>
            }
            style={{ height: 540 }}
          >{this.state.openKey === 'lesson' ? (
            <Table
              pagination={false}
              rowKey={record => record.id}
              dataSource={subItemList}
              columns={lessonColumns}
              scroll={{ y: 400 }}
              className={styles.dataTable}
            />
          ) : (
            <Table
              pagination={false}
              rowKey={record => record.id}
              dataSource={supportList}
              columns={supportColumns}
              scroll={{ y: 400 }}
              className={styles.dataTable}
            />
          )}
          </Card>
        </Col>
      </Row>
    );
  }
}
export default CourseItem;