import { observer } from "mobx-react";
import React from 'react';
import { toJS } from 'mobx';
import {WeaAlertPage} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import {Spin} from 'antd';
import '../../style/resource.less'; 
@observer
export default class resourcePage extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const {contentStore} = this.props;
        let {resourceInfo} = contentStore;
        let resource = toJS(resourceInfo);
        if (!resource.success) {
          return (
            <div className="top40 align-center"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ln6hb9`} /></div>
          );
        }
        let Document, Workflow, Customer, Project, Task, Accessory, Capital;
        //相关文档
        resource.docList && (
          Document = resource.docList.map((item, index) => {
            return (
              <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
            )
          }))
        
        //相关流程
        resource.wfList && (
          Workflow = resource.wfList.map((item, index) => {
            return (
              <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
            )
          }))
        
        //相关客戶
        resource.cusList && (
          Customer = resource.cusList.map((item, index) => {
            return (
              <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
            )
          }))
        
        //相关項目
        resource.prjList && (
          Project = resource.prjList.map((item, index) => {
            return (
              <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
            )
          }))
        
        //相关任务
        resource.taskList && (
          Task = resource.taskList.map((item, index) => {
            return (
              <li className="text-elli">
                <a href={item.url} target="_blank" title={item.name}>{item.name}</a>
              </li>
            )
          }))

        //相关附件
        resource.accList && (
          Accessory = resource.accList.map((item, index) => {
            return (
              <li className="text-elli">
                <a href={item.url} target="_blank" title={item.name}>{item.name}</a>
              </li>
            )
          }))
        
        //相关资产
        resource.cptList && (
          Capital = resource.cptList.map((item, index) => {
            return (
              <li className="text-elli">
                <a href={item.url} target="_blank" title={item.name}>{item.name}</a>
              </li>
            )
          }))

        return (<div className='wea-prj-content-list'>{((resource.docList && resource.docList.length !== 0) || (resource.wfList && resource.wfList.length !== 0) ||
        (resource.cusList && resource.cusList.length !== 0) || (resource.prjList && resource.prjList.length !== 0) ||
        (resource.taskList && resource.taskList.length !== 0) || (resource.accList && resource.accList.length !== 0)) ? (
          <div className='prj-content-resource prj-content-style-public'>
            {
              (resource.docList && resource.docList.length !== 0) && (
                <div>
                  <div className='prj-content-pub prj-content-doc'>
                    <em className='icon-coms-currency2'></em>
                    <span>{getLabel(857, '相关文档')}</span>
                  </div>
                  <ul className='prj-content-public prj-content-document'>
                    {Document}
                    {/*<li><a>E8-DEMO网站需要修正的地方</a></li>
                     <li><a>E8-DEMO网站需要修正的地方</a></li>
                     <li><a>demo9档案</a></li>*/}
                  </ul>
                </div>
              )
            }
            
            {(resource.wfList && resource.wfList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-workflow'>
                  <em className='icon-coms-Relevant-workflow'></em>
                  <span>{getLabel(1044, '相关流程')}</span>
                </div>
                <ul className='prj-content-public prj-content-document'>
                  {Workflow}
                </ul>
              </div>
            )}

             
            {(resource.accList && resource.accList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-acc'>
                  <em className='icon-coms-Enclosure'></em>
                  <span>{getLabel(22194, '相关附件')}</span>
                </div>
                <ul className='prj-content-public prj-content-accessory'>
                  {Accessory}
                  {/* <li>
                   <a>E8-DEMO网站需要修正的地方</a>
                   <i className='icon-coms-download'></i>
                   <span>2345K</span>
                   </li>*/}
                </ul>
              </div>
            )}

            {(resource.prjList && resource.prjList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-project'>
                  <em className='icon-coms-Relevant-project'></em>
                  <span>{getLabel(782, '相关项目')}</span>
                </div>
                <ul className='prj-content-public prj-content-document'>
                  {Project}
                </ul>
              </div>
            )}
            
            {(resource.taskList && resource.taskList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-task'>
                  <em className='icon-coms-Relevant-task'></em>
                  <span>{getLabel(33414, '相关任务')}</span>
                </div>
                <ul className='prj-content-public prj-content-document'>
                  {Task}
                </ul>
              </div>
            )}
            
            {(resource.cusList && resource.cusList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-customer'>
                  <em className='icon-coms-Relevant-Customer'></em>
                  <span>{getLabel(783, '相关客户')}</span>
                </div>
                <ul className='prj-content-public prj-content-document'>
                  {Customer}
                </ul>
              </div>
            )}

            {(resource.cptList && resource.cptList.length !== 0) && (
              <div>
                <div className='prj-content-pub prj-content-cpt'>
                  <em className='icon-coms-fa'></em>
                  <span>{getLabel(858, '相关资产')}</span>
                </div>
                <ul className='prj-content-public prj-content-document'>
                  {Capital}
                </ul>
              </div>
            )}
          
          
          </div>) : (
          <div style={{height: window.innerHeight}}>
            <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@6l5brj`} icon="icon-coms-blank" >
              <div>{getLabel(83553, '暂无数据')}</div>
            </WeaAlertPage>
          </div>
        )}</div>)

    }

    
}