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

@inject('prjImportStore')
@observer
class TaskImport extends React.Component {
    constructor(props) {
        super(props);
        this.state={
        }
	}
    componentDidMount(){
        const {prjImportStore} = this.props;
        const {initTaskDatas,}  = prjImportStore;
        initTaskDatas({imptype:'task',isdata:'2'});
    }
    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{taskmandstr,taskotherstr,filetype,taskwbsfieldstr,taskmsg,imp_totalCount,imp_successCount} = prjImportStore;
        const require = "<span>"+getLabel(18019,"必填")+":  "+getLabel(1352,"任务名称")+"   "+getLabel(2097,"负责人")+"  "+getLabel(26797,"项目阶段")+"  "+ taskmandstr +  "</span>";
        let other = "<span>"+getLabel(375,"其他")+":  "+getLabel(15486,"序号")+"  "+getLabel(23785,"上级任务")+"  "+getLabel(1322,"起始日期")+"  "+
            getLabel(741,"结束日期")+"  "+getLabel(15274,"项目预算")+"  "+getLabel(2232,"里程碑任务")+"  "+getLabel(2233,"前置任务")+"  "+getLabel(2240,"任务说明")+"  "+taskotherstr+" </span>";
        let str2 = getLabel(32986,"第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉");
        let str3 = getLabel(32987,"第三步，选择填写好的Excel文档，点击提交按钮进行批量导入");
        let str4 = getLabel(32988,"第四步，如果以上步骤和Excel文档正确的话，数据会被正确的导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处");
        let str5 = getLabel(18617,"请按下列顺序排列需导入的EXCEL文档中各字段的顺序，其中红色的部分为必填字段，不能为空！");
        if(filetype==='2'){
            str2 = getLabel(516145,"第二步，配置任务字段后，按照字段格式以及任务必填字段维护好WBS文档内容");
            str3 = getLabel(516146,"第三步，选择填写好的WBS文档，点击提交按钮进行批量导入");
            str4 = getLabel(516147,"第四步，如果以上步骤和WBS文档正确的话，数据会被正确的导入，导入成功会有提示。如果有问题，则会提示WBS文档的错误之处");
            str5 = getLabel(516148,"请按下列已配置字段关系维护WBS文档，其中红色的部分为必填字段，不能为空！");
            other = "<span>"+getLabel(516149,"已配置：")+taskwbsfieldstr+" </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(522069 ,"选择项目"),
                    "labelcol": 5,
                    "length": 0,
                    "precision": 0,
                    "showOrder": 0,
                    "stringLength": 0,
                    "tipPosition": "bottom",
                    "viewAttr": 2,
                    "value":""
                },{
                    "colSpan": 2,
                    "conditionType": "SELECT",
                    "domkey": [
                        "filetype"
                    ],
                    "fieldcol": 18,
                    "isQuickSearch": false,
                    "label": getLabel(24863,"导入类型"),
                    "labelcol": 5,
                    "options": [
                        {
                            "key": "1",
                            "selected": filetype==1?true:false,
                            "showname": "Excel"
                        }, {
                            "key": "2",
                            "selected": filetype==2?true:false,
                            "showname": "WBS"
                        }
                    ],
                    "viewAttr": 3
                }, {
                    "checkbox": false,
                    "colSpan": 2,
                    "conditionType": "RESOURCEIMG",
                    "detailtype": 1,
                    "domkey": ["excelfile"],
                    "fieldcol": 18,
                    "hasBorder": false,
                    "helpfulTipProps": {},
                    "isQuickSearch": false,
                    "label": getLabel(18493, "文件"),
                    "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": str2
                }, {
                    "index": 3,
                    "value": str3
                }, {
                    "index": 4,
                    "value": str4
                }]
            }, {
                "title": getLabel(24962,"字段说明"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": str5
                }, {
                    "index": 2,
                    "value":require
                }, {
                    "index": 3,
                    "value":other
                }]
            }, {
                "title": getLabel(502196,"注意事项"),
                "defaultshow": true,
                "items": [{
                    "index": 1,
                    "value": getLabel(521942,"若要给已存在的任务导入子任务或后置任务时，则需要在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@bniaso@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@baatmf@${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@pt7stn@${index}`} span={17}>
                                        <div style={{ marginTop: 15 }}>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o71noz@${index}`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pvize3@${index}`} span={field.labelcol}>{field.label}:</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4jn6f5@${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@fpks44`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vh5bnz`} offset={4}>
                                    <div style={{color:"red"}} >
                                        <div className="card-call" dangerouslySetInnerHTML={{__html:taskmsg}}></div>
                                        { taskmsg!=""&&(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@3faf6p@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wy08a4@${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@h67eq7@${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@iptdy6@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@utadbb@${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@5cvjsp@${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@a6nr6e@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@eao5k6@${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@in8y92@${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@68s39q@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
        });
        return _arr;
    }

    getDom(field) {
        const { prjImportStore} = this.props;
        const {taskfilelist,taskreplaceDatas,filetype,readonly,taskDataParams} = prjImportStore;
        let dom;
        let domkey = field.domkey;
        if (domkey&&domkey[0] == 'excelfile') {
            dom = (<div>
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@02trjn`}
                    ref={ref => {  prjImportStore.taskremind = ref  } }  
                    error={getLabel(384040,"未选择任何文件")}
                    tipPosition="bottom"
                    >
                <div style={{ float: 'left', marginTop: -10 }}>
                    {filetype==='1'&&<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@950tgn`}
                        uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
                        category='string'
                        limitType="xls"
                        maxFilesNumber={1}
                        datas={taskfilelist}
                        onChange={(ids, list) => {
                                this.setFileId(ids, list)
                            }
                        } >
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@llrtxc`}>{getLabel(125333,"选择文件")}</Button>
                    </WeaUpload>}
                    {filetype==='2'&&<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@141udu`}
                        uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
                        category='string'
                        limitType="mpp"
                        maxFilesNumber={1}
                        datas={taskfilelist}
                        onChange={(ids, list) => {
                                this.setFileId(ids, list)
                            }
                        } ><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0w2qky`}>{getLabel(125333,"选择文件")}</Button></WeaUpload>
                    }
                </div>
                <div style={{ float: 'left', paddingLeft: 10 }}>
                    {taskfilelist.length == 0 ? <p>{getLabel(384040,"未选择任何文件")}</p> : taskfilelist.map(file => <p>{file.filename}</p>)}
                </div>
                </WeaError>
            </div>)
        }else if (domkey&&domkey[0] == 'filetype') {
            dom = <span style={{display:"inline-block",width:"20%",marginRight:10}}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jplibo`} {...field} onChange={value => prjImportStore.saveFileType(value)}/>
            </span>
        } else {
            dom = <span style={{display:readonly?"bolck":"inline-block",width:"35%",marginRight:10}}>
            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@tz0il1`}
            ref={ref => {  prjImportStore.selectremind = ref  } }  
            error={getLabel(383859,"请选择项目！")}
            tipPosition="bottom"
            style={{display:"inline-block",width:"100%"}}
            >
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@6rqxgy`} type={8} viewAttr={readonly?1:3} title={getLabel(101,"项目")} hasAdvanceSerach={true} replaceDatas={toJS(taskreplaceDatas) } dataParams={taskDataParams} completeParams={taskDataParams}
             onChange={(ids,names,datas)=>{
                prjImportStore.savePrjType(ids,datas,'task');
             }}/>
             </WeaError>
        </span>
        }
        return dom;
    }

    getIllustration(val, url, index, link) {
        const{ prjImportStore} = this.props;
        const{taskisrefresh,filetype} = prjImportStore;
        let tempurl = (window.ecologyContentPath || '')+"/proj/imp/prjtskimp_xlsnew.xls?V="+taskisrefresh;
        let p;
        if (index == 0) {
            if(filetype==='1'){
                p = (<p>{val}：<a href={tempurl}>{getLabel(28446,"下载EXCEL文档模板")}</a></p>);
            }else{
                p = (<p>{val}{getLabel(516144,"请配置任务字段与WBS自定义字段对关系：")}<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@du7r9q`} type="primary" style={{paddingLeft:8,paddingRight:8,paddingTop:3,paddingBottom:3}}onClick={()=>{this.setWbsFiled();}}>{getLabel(516367,"字段配置")} </Button></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@9l8un5`} spinning={spinning}>
                    {this.getForm()}
                </Spin>
                <WbsFieldSet ecId={`${this && this.props && this.props.ecId || ''}_WbsFieldSet@4racfc`} contentStore={prjImportStore}/>
            </div>
        )
    }

    setFileId(ids, list) {
        const {prjImportStore} = this.props;
        prjImportStore.taskexcelfile = ids;
        prjImportStore.taskfilelist = list;
    }

    setWbsFiled(){
        const {prjImportStore} = this.props;
        prjImportStore.handleDialog(true);
    }
}

export default TaskImport;