import React from 'react';
import { inject, observer } from 'mobx-react';
import {toJS} from "mobx"
import {WeaSearchGroup,WeaBrowser,WeaUpload,WeaLocaleProvider,WeaError} from "ecCom"
import { Button ,Row,Col,Spin} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@inject('prjImportStore')
@observer
class PrjImport extends React.Component {
    constructor(props) {
        super(props);
        this.state={
        }
	}
    componentDidMount(){
        const {prjImportStore } = this.props;
        const {initDatas,}  = prjImportStore;
        initDatas({imptype:'prj',isdata:'1'});
    }
   
    getCircle() {
        let style = {
            width: 20,
            height: 20,
            backgroundColor: '#D8D8D8',
            webkitBorderRadius: 10,
            mozBorderRadius: 10,
            msBorderRadius: 10,
            oBorderRadius: 10,
            borderRadius: 10,
            textAlign: 'center',
        }
        return style;
    }

    getForm() {
        const{ prjImportStore} = this.props;
        const{isuse,mandstr,otherstr,prjmsg,imp_totalCount,imp_successCount} = prjImportStore;
        let prjcode = ""; 
        if(isuse==2){
            prjcode = getLabel(17852,"项目编码");
        }
        const require = "<span>"+getLabel(18019,"必填")+":  "+getLabel(195,"名称")+"  "+getLabel(586,"项目类型")+" "+prjcode+" "+getLabel(144,"经理")+"  "+getLabel(18628,"项目成员")+"  "+mandstr+" </span>";
        const other = "<span>"+getLabel(375,"其他")+":  "+getLabel(15486,"序号")+"  "+getLabel(432,"工作类型")+"  "+getLabel(783,"相关客户")+"  "+
            getLabel(15263,"客户可见")+"  "+getLabel(624,"成员可见")+"  "+getLabel(636,"上级项目")+"  "+getLabel(637,"评价书")+"  "+getLabel(638,"确认书")+"  "+getLabel(639,"建议书")+"  "+otherstr+" </span>";
        let condition =
            [{
                "title": getLabel(24893, "基础信息"),
                "defaultshow": true,
                "items": [{
                    "checkbox": false,
                    "colSpan": 2,
                    "conditionType": "BROWSER",
                    "detailtype": 1,
                    "domkey": ["prjtype"],
                    "fieldcol": 18,
                    "hasBorder": false,
                    "helpfulTipProps": {},
                    "isQuickSearch": false,
                    "label": getLabel(586,"项目类型"),
                    "labelcol": 5,
                    "length": 0,
                    "precision": 0,
                    "showOrder": 0,
                    "stringLength": 0,
                    "tipPosition": "bottom",
                    "viewAttr": 2,
                    "value":""
                }, {
                    "checkbox": false,
                    "colSpan": 2,
                    "conditionType": "RESOURCEIMG",
                    "detailtype": 1,
                    "domkey": ["excelfile"],
                    "fieldcol": 18,
                    "hasBorder": false,
                    "helpfulTipProps": {},
                    "isQuickSearch": false,
                    "label": getLabel(16699, "Excel文件"),
                    "labelcol": 5,
                    "length": 0,
                    "precision": 0,
                    "showOrder": 0,
                    "stringLength": 0,
                    "tipPosition": "bottom",
                    "viewAttr": 2
                }]
            }, {
                "title": getLabel(19010,"操作说明"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": getLabel(28447, "第一步，请先")
                }, {
                    "index": 2,
                    "value": getLabel(32986,"第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉")
                }, {
                    "index": 3,
                    "value": getLabel(32987,"第三步，选择填写好的Excel文档，点击提交按钮进行批量导入")
                }, {
                    "index": 4,
                    "value": getLabel(32988,"第四步，如果以上步骤和Excel文档正确的话，数据会被正确的导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处")
                }]
            }, {
                "title": getLabel(24962,"字段说明"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": getLabel(18617,"请按下列顺序排列需导入的EXCEL文档中各字段的顺序，其中红色的部分为必填字段，不能为空！")
                }, {
                    "index": 2,
                    "value":require
                }, {
                    "index": 3,
                    "value":other
                }]
            }, {
                "title": getLabel(502196,"注意事项"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": getLabel(521941,"若要给已存在的项目导入子项目时，则需要在Excel模板中的上级项目字段输入已存在的项目，格式为：name_项目名称或者key_项目id")
                }]
            }]
        let _arr = [];

        condition.map((c, i) => {
            let arr = [];
            if (i == 0) { //基本信息
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9gvgcj@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@njxvor@${index}`} span={1} offset={4}>
                                        <div style={{ marginTop: 15 }}>
                                            <div style={this.getCircle()}><div style={{ paddingTop: 2 }}>{index + 1}</div></div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dls3wy@${index}`} span={17}>
                                        <div style={{ marginTop: 15 }}>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4dhi9n@${index}`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vrmca5@${index}`} span={field.labelcol}>{field.label}:</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lz6soa@${index}`} span={field.fieldcol}>
                                                    {this.getDom(field)}
                                                </Col>
                                            </Row>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1,
                    })
                })
                //导入提示信息
                arr.push({
                    com: (
                        <div>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@q7m2b0`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qa9yz0`} offset={4}>
                                    <div style={{color:"red"}} >
                                        <div className="card-call" dangerouslySetInnerHTML={{__html:prjmsg}}></div>
                                        { prjmsg!=""&&(parseInt(imp_totalCount)>0&&<span className="card-call" > {getLabel(128217,"总记录数")}{imp_totalCount}{getLabel(18256,"条")} ，{getLabel(128219,"成功导入")}{imp_successCount}{getLabel(18256,"条")}，{getLabel(25009,"失败")}{parseInt(imp_totalCount) - parseInt(imp_successCount)}{getLabel(18256,"条")}。 </span>)   }
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    ),
                    colSpan: 1,
                })
            }
            if (i == 1) { //导入说明
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0l4zwi@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rr7cvr@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 2 }}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@76emty@${index}`} span={17} style={{ marginTop: 15 }}>
                                        {this.getIllustration(field.value, field.link, index, field)}
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            if (i == 2) { //字段说明
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@usfngx@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9yp78z@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 2 }}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qouyby@${index}`} span={17} style={{ marginTop: 15 }}>
                                        {this.getIllustration1(field.value, field.link, index, field)}
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            if (i == 3) { //注意事项
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8mch6v@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vjk2sw@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 2 }}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2ykdvp@${index}`} span={17} style={{ marginTop: 15 }}>
                                        <p><div dangerouslySetInnerHTML={{ __html: field.value }} /></p>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            _arr.push(<div><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ki7nqj@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
        });
        return _arr;
    }

    getDom(field) {
        const { prjImportStore} = this.props;
        const {filelist,replaceDatas} = prjImportStore;
        let dom;
        let domkey = field.domkey;
        if (domkey&&domkey[0] == 'excelfile') {
            dom = (<div>
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@0x0xki`}
                ref={ref => {  prjImportStore.prjremind = ref  } }  
                error={getLabel(126186,"未")+getLabel(82694,"选择Excel文件")}
                tipPosition="bottom"
                >
                <div style={{ float: 'left', marginTop: -10 }}>
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@touxwq`}
                        uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
                        category='string'
                        limitType='xls'
                        maxFilesNumber={1}
                        datas={filelist}
                        onChange={(ids, list) => {
                                this.setFileId(ids, list)
                            }
                        } >
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2sormu`}>{getLabel(125333,"选择文件")}</Button>
                    </WeaUpload>
                </div>
                <div style={{ float: 'left', paddingLeft: 10 }}>
                    {filelist.length == 0 ? <p>{getLabel(384040,"未选择任何文件")}</p> : filelist.map(file => <p>{file.filename}</p>)}
                </div>
                </WeaError>
            </div>)
        } else {
            dom = <div>
                    <span style={{display:"inline-block",float:"left",width:"35%",marginRight:10}}>
                                     <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@acwx3u`} style={{display:"inline"}} replaceDatas={toJS(replaceDatas)} type={244} hasAdvanceSerach={true} title={getLabel(586,"项目类型")}
                                         onChange={(ids, names, datas)=>{
                                             prjImportStore.savePrjType(ids,datas,'prj');
                                         }}/>
                                 </span>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nlsn35`} style={{display:"inline",marginBottom:"5px"}} type="primary" onClick={()=>this.regenTemplate()}>{getLabel(83555,"重生成模板")}</Button>
                </div>
        }
        return dom;
    }

    getIllustration(val, url, index, link) {
        const { prjImportStore} = this.props;
        const {isrefresh,isuse } = prjImportStore;
        let tempurl = "";
        if(isuse == 0 || isuse == 1){
            tempurl = (window.ecologyContentPath || '')+"/proj/imp/prjimp_xlsnew.xls?V="+isrefresh;
        }else{
            tempurl = (window.ecologyContentPath || '')+"/proj/imp/prjimp_xlsnew1.xls?V="+isrefresh;
        }
        let p;
        if (index == 0) {
            p = (<p>{val}：<a href={tempurl}>{getLabel(28446,"下载EXCEL文档模板")}</a></p>);
        } else  {
            p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        }
        return p;
    }
    getIllustration1(val, url, index, link) {
        let p;
        if (index == 0) {
            p = (<p><div style={{fontWeight:700}} dangerouslySetInnerHTML={{ __html: val }} /></p>);
        } else if(index==1){
            p = (<p><div style={{color:"red"}} dangerouslySetInnerHTML={{ __html: val }} /></p>);
        } else{
            p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        }
        return p;
    }

    render(){
        const { prjImportStore } = this.props;
        const { spinning } = prjImportStore;
        return (
            <div>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@pik1x9`} spinning={spinning}>
                    {this.getForm()}
                </Spin>
            </div>
        )
    }
    setFileId(ids, list) {
        const {prjImportStore} = this.props;
        prjImportStore.excelfile = ids;
        prjImportStore.filelist = list;
    }

    regenTemplate=(key)=>{
        const{ prjImportStore} = this.props;
        prjImportStore.regenTemplate();
    }
}

export default PrjImport;