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, user} = this.props;
    const {
      appDesc, appDescEn, appName, appNameEn, icon,
      id, keywords, keywordsEn, sharePublicNetwork, url,
      appStruct, appStructEn,
    } = this.props.data;

    console.log("service render", this.props)

    const className = user.bgId === '30804' ? (all ? sysCss["all-sys-item"] : sysCss["sys-item"]) : sysCss['service-item']

    const name = lang.language && lang.language === 'zh' ? appName : appNameEn || appName
    const path = lang.language && lang.language === 'zh' ? appStruct : appStructEn || appStruct
    const des = lang.language && lang.language === 'zh' ? appDesc : appDescEn || appDesc

    const newKw = Array.isArray(keywords) ? keywords : []
    const newKwEn =  Array.isArray(keywordsEn) ? keywordsEn : []
    let kw = lang.language && lang.language === 'zh' ? newKw : newKwEn || newKw


    return (
      <li className={`${className} 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(name)}</p>
            <div className={`s-lesser ${sysCss['detail-item']}`}>
              <span className={sysCss["sys-keywords"]}>{lang.keyWords}：</span>
              <p className={sysCss["d-keywords"]}>
                {kw.length ? kw.map((v, i) => {
                  return <i key={i}>{getHighLightText(v)}</i>;
                })
                : null
                }
              </p>
            </div>
            {path ? <div className={`s-lesser ${sysCss['detail-item']}`}>
              <span className={sysCss["sys-intro"]}>{lang.path}：</span>
              <p className={sysCss["d-intro"]}>{getHighLightText(path)}</p>
            </div> : null}
            <div className={`s-lesser ${sysCss['detail-item']}`}>
              <span className={sysCss["sys-intro"]}>{lang.intro}：</span>
              <p className={sysCss["d-intro"]}>{getHighLightText(des)}</p>
            </div>
          </div>
        </a>
      </li>
    )


  }


}

