/*
 * @Author: your name
 * @Date: 2020-03-02 09:55:44
 * @LastEditTime: 2020-03-18 14:08:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lingmou-frame\src\businessComponents\Tags\TagPortal\KeywordsList.js
 */
import React from "react";
// import { IconFont, HightLevel } from '@zenview/micro-components'
import IconFont from '../../../themeComponents/IconFont';
import HightLevel from '../../../components/HightLevel';

export default function KeywordsList({ list = [], keywords, onClick, selectKeys }) {
  if (list.length === 0) {
    return null;
  }
  return (
    <div className="tag-keywords-list">
      {list.map((v,k) => {
        return (
          <div
            key={k}
            className={`tag-keywords-item ${selectKeys.indexOf(v.id) > -1 ? "tag-keywords-item-active" : ""}`}
            onClick={() => onClick(v, "keyword")}
          >
            <IconFont type={"icon-S_Edit_Search"} theme="outlined" />
            <HightLevel keyword={keywords} name={v.description} />
            <span style={{marginLeft:'12px'}}>{
              v.plateOwnerName&&<HightLevel keyword={keywords} name={v.plateOwnerName} />
            }</span>
          </div>
        );
      })}
    </div>
  );
}
