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

const { Option } = Select;

function KnowLedge (props) {

  const {
    options = [], // 下拉选项
    values = [], // 已选择的下拉项
    onChange // 获取选择的值
  } = 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;
    });
    if (tempArr.length > 50) {
      notification.warning({
        message: '提示',
        description: '知识点不能超过50个'
      });
      return;
    }
    setSelectValue(tempArr);
    setSelectOptions(_result);
    // 将选择值返回
    onChange && onChange(tempArr);
  }

  // 删除
  const handleRemoveResult = (item) => {
    // console.log('点击了删除按钮===>>>>', item);
    // 将删除的值重新加入到列表中
    const tempOptions = [...selectOptions];
    const tempValue = selectValue.filter(t => t.id !== item.id);
    // console.log(selectValue);
    tempOptions.push(item);
    setSelectOptions(tempOptions);
    setSelectValue(tempValue);
    // 将选择值返回
    onChange && onChange(tempValue);
  }

  // 渲染下拉结果
  const renderResult = (arrs) => {
    return arrs.map((item) => (
      <span className="knowledge-item" key={`item_${item.name}`}>
        {item.name}
        <span
          onClick={() => handleRemoveResult(item)}
          className="iconfont icon-roundclose knowledge-close"
        ></span>
      </span>
    ));
  }
  // 渲染下拉列表
  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>
    </div>
  );
}

export default KnowLedge;