/*
 * @Description: 知识点
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-12-30 13:51:19
 * @LastEditors  : tangjiang
 * @LastEditTime : 2019-12-31 09:06:44
 */
import './index.scss';
import React, { useState, useEffect } from 'react';
import { Select } from 'antd';

const { Option } = Select;

function KnowLedge (props) {

  const {
    options = [], // 下拉选项
    values = [], // 已选择的下拉项
  } = props;

  useEffect(() => {
    setSelectOptions(options || []);
  }, [props]);

  // 显示的下拉项
  const [selectOptions, setSelectOptions] = useState(options);
  // 已选择的下拉项
  const [selectValue, setSelectValue] = useState(values);
  //
  const [value] = useState([]);

  // 渲染下拉选项
  const renderOptions = (options = []) => {
    return options.map((opt, i) => (
      <Option key={`opt_${i}`} value={`${opt.id}`}>{opt.name}</Option>
    ));
  }
  // 过滤下拉列表项
  const handleSelectChange = (value) => {
    value = +value.join('');
    const tempArr = [...selectValue];
    const _result = selectOptions.filter(item => {
      if (item.id === value && tempArr.findIndex(t => t.id === value) === -1) {
        tempArr.push(item);
      }
      return item.id !== value;
    });
    setSelectValue(tempArr);
    setSelectOptions(_result);
  }

  // 渲染下拉结果
  const renderResult = (arrs) => {
    return arrs.map((item) => (
      <div className="knowledge-item" key={`item_${item.name}`}>
        <span className="knowledge-item-txt">{item.name}</span>
      </div>
    ));
  }
  // 渲染下拉列表
  const renderSelect = (options) => {
    return (
      <Select
        value={value}
        mode="tags"
        placeholder="请选择"
        style={{ width: '100%' }}
        onChange={handleSelectChange}
      >
        {renderOptions(options)}
      </Select>
    )
  }
  
  return (
    <div className="knowledge-select-area">
      { renderSelect(selectOptions) }
      {/* 渲染下拉选择项 */}
      <div className="knowledge-result">
        {/* { renderResult(selectValue) } */}
        {/* <div className="knowledge-item">1111</div> */}
        <div className="knowledge-item">
          <span className="knowledge-item-txt">JAVA</span>
        </div>
      </div>
    </div>
  );
}

export default KnowLedge;