/*
 * @Author: yuananting
 * @Date: 2021-02-22 10:59:43
 * @LastEditors: yuananting
 * @LastEditTime: 2021-03-05 09:39:47
 * @Description: 助学工具-题库-题库主页面侧边栏
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import { Input, Button, Tree } from "antd";
import "./QuestionBankSider.less";

const { Search } = Input;
const { DirectoryTree } = Tree;

class QuestionBankSider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: null,
      NewEditQuestionBankCategory: null, //新增或编辑分类模态框
      ImportCourseCategory: null, // 引用课程分类模态框
      treeData: [
        {
          tenantId: "1122334455667788",
          userId: "12345678",
          source: 0,
          id: "1367023655839768500",
          parentId: "0",
          rootId: "1367023655839768500",
          categoryLevel: 0,
          categoryName: "未分类",
          sort: 0,
        },
        {
          tenantId: "1122334455667788",
          userId: "12345678",
          source: 0,
          id: "1367023655839768577",
          parentId: "0",
          rootId: "1367023655839768577",
          categoryLevel: 0,
          categoryName: "分类1",
          subList: [
            {
              tenantId: "1122334455667788",
              userId: "12345678",
              source: 0,
              id: "1367023709942095873",
              parentId: "1367023655839768577",
              rootId: "1367023655839768577",
              categoryLevel: 1,
              categoryName: "test",
              sort: 0,
            },
            {
              tenantId: "1122334455667788",
              userId: "12345678",
              source: 0,
              id: "1367023725184196609",
              parentId: "1367023655839768577",
              rootId: "1367023655839768577",
              categoryLevel: 1,
              categoryName: "分类2",
              subList: [
                {
                  tenantId: "1122334455667788",
                  userId: "12345678",
                  source: 0,
                  id: "1367023805563838466",
                  parentId: "1367023725184196609",
                  rootId: "1367023655839768577",
                  categoryLevel: 2,
                  categoryName: "test",
                  sort: 0,
                },
              ],
              sort: 1,
            },
          ],
          sort: 1,
        },
        {
          tenantId: "1122334455667788",
          userId: "12345678",
          source: 0,
          id: "1367049864988516353",
          parentId: "0",
          rootId: "1367049864988516353",
          categoryLevel: 0,
          categoryName: "分类2",
          subList: [
            {
              tenantId: "1122334455667788",
              userId: "12345678",
              source: 0,
              id: "1367049931656978433",
              parentId: "1367049864988516353",
              rootId: "1367049864988516353",
              categoryLevel: 1,
              categoryName: "分类2",
              subList: [
                {
                  tenantId: "1122334455667788",
                  userId: "12345678",
                  source: 0,
                  id: "1367049973746819074",
                  parentId: "1367049931656978433",
                  rootId: "1367049864988516353",
                  categoryLevel: 2,
                  categoryName: "分类3",
                  subList: [
                    {
                      tenantId: "1122334455667788",
                      userId: "12345678",
                      source: 0,
                      id: "1367050021431861249",
                      parentId: "1367049973746819074",
                      rootId: "1367049864988516353",
                      categoryLevel: 3,
                      categoryName: "分类4",
                      subList: [
                        {
                          tenantId: "1122334455667788",
                          userId: "12345678",
                          source: 0,
                          id: "1367050063035162626",
                          parentId: "1367050021431861249",
                          rootId: "1367049864988516353",
                          categoryLevel: 4,
                          categoryName: "分类5",
                          sort: 0,
                        },
                      ],
                      sort: 0,
                    },
                  ],
                  sort: 0,
                },
              ],
              sort: 0,
            },
          ],
          sort: 2,
        },
      ],
    };
  }

  componentDidMount() {
    this.setState({ treeData: this.renderTreeNodes(this.state.treeData) });
  }

  renderTreeNodes = (data, value) => {
    return data.map((item) => {
      item.title = item.categoryName;
      item.key = item.id;
      item.title =
        !value || (value && item.categoryName.indexOf(value) > -1) ? (
          <span>
            {item.categoryName}（{item.categoryCount}）
          </span>
        ) : (
          <span style={{ opacity: 0.5 }}>
            {item.categoryName}（{item.categoryCount}）
          </span>
        );
      item.icon =
        item.id === "default" ? (
          <span className="icon iconfont" style={{ color: "#FBD140" }}>
            &#xe7f6;
          </span>
        ) : (
          <span className="icon iconfont" style={{ color: "#FBD140" }}>
            &#xe7f1;
          </span>
        );
      if (item.subList) {
        item.children = this.renderTreeNodes(item.subList, value);
      }
      return item;
    });
  };

  render() {
    const { treeData } = this.state;
    return (
      <div className="question-bank-sider">
        <div className="sider-title">题目分类</div>
        <Search
          className="sider-search"
          placeholder="搜索名称分类"
          onSearch={(value) => {
            // TODO 调用查询分类接口
            this.setState({
              treeData: this.renderTreeNodes(treeData, value),
            });
          }}
        />
        <div className="sider-btn">
          <Button
            onClick={() => {
              window.RCHistory.push({
                pathname: "/question-category-manage",
              });
            }}
          >
            分类管理
          </Button>
        </div>
        <DirectoryTree
          defaultSelectedKeys={["1367023655839768500"]}
          showIcon
          treeData={treeData}
        />
        {treeData.length === 1 && (
          <div className="empty-tree-tip">
            还没有分类，需<span className="empty-tree-btn">引用课程分类</span>
            哦～
          </div>
        )}
        {this.state.NewEditQuestionBankCategory}
        {this.state.ImportCourseCategory}
      </div>
    );
  }
}

export default QuestionBankSider;
