/*
 * @Author: yuananting
 * @Date: 2021-02-23 11:43:43
 * @LastEditors: yuananting
 * @LastEditTime: 2021-02-25 10:32:53
 * @Description: 助学工具-题库-题库引用课程分类模态框
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import { Modal, Tree, Card } from "antd";
import { PageControl } from "@/components";
import "./ImportCourseCategory.less";

class ImportCourseCategory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: {
        current: 1,
        size: 1,
      },
      totalCount: 0,
    };
  }

  onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    console.log("onCheck", checkedKeys, info);
  };

  onShowSizeChange = (current, size) => {
    if (current == size) {
      return;
    }
    const _query = { ...this.props.query };
    _query.size = size;

    // 更新请求参数
    this.setState({ _query });
    // TODO请求
  };

  confirmImport = () => {
    // 判断是否已经选择
    // TODO save
    this.props.close();
  };

  render() {
    const treeData = [
      {
        title: "parent 1",
        key: "0-0",
        children: [
          {
            title: "parent 1-0",
            key: "0-0-0",
            disabled: true,
            children: [
              {
                title: "leaf",
                key: "0-0-0-0",
                disableCheckbox: true,
              },
              {
                title: "leaf",
                key: "0-0-0-1",
              },
            ],
          },
          {
            title: "parent 1-1",
            key: "0-0-1",
            children: [
              {
                title: <span style={{ color: "#1890ff" }}>sss</span>,
                key: "0-0-1-0",
              },
            ],
          },
        ],
      },
    ];
    const { query, totalCount } = this.state;
    const { current, size } = query;

    return (
      <Modal
        title="引用课程分类"
        visible={true}
        onOk={this.confirmImport}
        onCancel={() => this.props.close()}
      >
        <div className="import-course-title">请选择需要的分类</div>
        <Card size="small" title="分类名称">
          <Tree
            checkable
            blockNode
            height={200}
            defaultExpandedKeys={["0-0-0", "0-0-1"]}
            defaultSelectedKeys={["0-0-0", "0-0-1"]}
            defaultCheckedKeys={["0-0-0", "0-0-1"]}
            onSelect={this.onSelect}
            onCheck={this.onCheck}
            treeData={treeData}
          />
        </Card>

        <div className="box-footer">
          <PageControl
            current={current - 1}
            pageSize={size}
            total={totalCount}
            toPage={(page) => {
              const _query = { ...query, current: page + 1 };
              this.props.onChange(_query);
            }}
            onShowSizeChange={this.onShowSizeChange}
          />
        </div>
      </Modal>
    );
  }
}

export default ImportCourseCategory;
