import React, {Component} from 'react'
import sysCss from './item.scss'
import getHighLightText from '../../../../utils/getHighLightText'

export default class SysItem extends Component {

  //定义tab标签
  constructor(props) {
    super(props);
    this.state = {}

  }


  render() {
    const {lang, all} = this.props;
    const {
      appCatalogId, appDesc, appDescEn, appName, appNameEn, icon,
      id, keywords, sharePublicNetwork, url,
    } = this.props.data;

    // console.log("keyword", all)
    return (
      <li className={`${all ? sysCss["all-sys-item"] : sysCss["sys-item"] } clearfix`}>
        <a className="s-bg-link clearfix" href={url} target="view_window">
          <div className={`${sysCss['cate-icon-div']} s-bg-primary`}>
            <img className={`${sysCss['cate-icon']} ks-iconfont ks-icon-qianbao s-reverse`} src={icon}
                 alt=""/>
          </div>

          <div className={sysCss["sys-detail"]}>
            <p className={sysCss["d-tit"]}>{getHighLightText(appName)}</p>
            <div className="s-lesser">
              <span className={sysCss["sys-keywords"]}>{lang.keyWords}：</span>
              <p className={sysCss["d-keywords"]}>
                {keywords.map((v, i) => {
                  return <i key={i}>{getHighLightText(v)}</i>;
                })

                }
              </p>
            </div>
            <div className="s-lesser">
              <span className={sysCss["sys-intro"]}>{lang.intro}：</span>
              <p className={sysCss["d-intro"]}>{getHighLightText(appDesc)}</p>
            </div>
          </div>
        </a>
      </li>
    )


  }


}

