import {Button,Row,Col,Icon,message,Modal} from 'antd';
import {WeaNewScroll,WeaTextarea,WeaSearchGroup ,WeaRichText,WeaFormItem ,WeaBrowser,WeaUpload,WeaTab,WeaTools,WeaLocaleProvider} from 'ecCom';
import {inject, observer} from "mobx-react";
import {toJS} from 'mobx';
import ExchangeLogs from './exchangeLogs'
import {Condition} from '../list/listCondition';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class RelateExchange extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            showGroup:false,
            value:"",
            "doc":"",
            "task":"",
            "crm":"",
            "workflow":"",
            "project":"",
            file:"",
            key:0
        }
    }
    componentWillUnmount(){
        this.setState({
            showGroup:false,
            value:"",
            "doc":"",
            "task":"",
            "crm":"",
            "workflow":"",
            "project":"",
            file:"",
            key:0
        })
    }
  render() {
      const {contentStore} = this.props;
      const {showSearchAd ,exchangeContent,exchangeform } = contentStore;
      const formParams = exchangeform.getFormParams() || {};
      const {showGroup,value,key} = this.state;
      const formItemLayout = {
        labelCol: { span:5 },
        wrapperCol: { span: 14 },
    };

    return (
        <div className="prj-exchange" style={{height:"100%"}}>
            <div className="prj-exchange-header">
                {/* <WeaTab
                    buttonsAd={this.getAdButtons()}
                    searchType={['base','advanced']}
                    searchsBaseValue={formParams.remark}
                    setShowSearchAd={bool=>{contentStore.setShowSearchAd(bool)}}
                    hideSearchAd={()=> contentStore.setShowSearchAd(false)}
                    searchsAd={
                        <div><Condition listStore={contentStore} form={exchangeform}></Condition></div>
                    }
                    showSearchAd={showSearchAd}
                    onSearch={v=>{contentStore.getRelateExchangeInfo()}}
                    onSearchChange={v=>{contentStore.setFormFields({remark:{value:v}})}}
                /> */}
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@btxkn0`} className="prj-exchange-content"  style={{margin:"5px 10px 0"}}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gvxpiu`} className="prj-exchange-cell" span={24}>
                        <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@wcqte0`} fieldName="prjrelateExchange" value={value} minRows={4} maxRows={8} onChange={v=>{this.saveValue(v)}} />
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dt2fza`} className="prj-exchange-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@msjdts`} span="18" className="prj-exchange-title-left">
                        <div><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9mk469`} type="primary" onClick={this.handleSubmitExchange}>{getLabel(615,"提交")}</Button></div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3jnahn`} span="6" className="prj-exchange-title-right" >
                        <span style={{marginRight:"10px"}}>{getLabel(83273,"附加信息")}</span>
                        <i className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={()=>this.setState({showGroup:!showGroup})}/>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@g7737t`} className="prj-exchange-content" style={{display:showGroup ? "block":"none"} }>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yr92vb`} className="prj-exchange-cell prj-exchange-cell-fujian" span={24}>
                       {this.getFormItem()}
                       { (exchangeContent.showacc || false) &&
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@w1nsv5`}
                                label={getLabel(22194,"相关附件")}
                                { ...formItemLayout}>
                                <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@jx3aio`} 
                                    key={key}
                                    uploadId="relatedfile"
                                    uploadUrl={(window.ecologyContentPath || '')+"/api/proj/prjutil/fileUpload?accsec="+exchangeContent.accsec}
                                    category={exchangeContent.accsec}
                                    autoUpload={true}
                                    showBatchLoad={false}
                                    showClearAll={false}
                                    multiSelection={true}
                                    datas={[]}
                                    maxUploadSize={exchangeContent.accsize}
                                    onChange={this.fileUploadBack}
                                    // onUploading={(state)=>{}}
                                />
                            </WeaFormItem>
                       }
                    </Col>
                </Row>
            </div>
            <div className="prj-exchange-logs">
                <ExchangeLogs ecId={`${this && this.props && this.props.ecId || ''}_ExchangeLogs@9btpyu`} onChange={this.pageNoChange} totalSize={exchangeContent.totalSize} data={toJS(exchangeContent.datas) || []} />
            </div>
        </div>)
    }
    getFormItem(){
        const {contentStore} = this.props;
        const { exchangeContent } = contentStore;
        const items =[
            {label:getLabel(857,"相关文档"),title:getLabel(857,"文档"),type:37,key:"doc",show:exchangeContent.showdoc || false},
            {label:getLabel(1044,"相关流程"),title:getLabel(18015,"流程"),type:152,key:"wf",show:exchangeContent.showwf || false},
            {label:getLabel(783,"相关客户"),title:getLabel(136,"客户"),type:18,key:"crm",show:exchangeContent.showcrm || false},
            {label:getLabel(782,"相关项目"),title:getLabel(101,"项目"),type:135,key:"prj",show:exchangeContent.showprj || false},
            {label:getLabel(33414,"相关任务"),title:getLabel(1332,"任务"),type:'prjtsk',key:"task",show:exchangeContent.showtask || false},
        ];
        const formItemLayout = {
            labelCol: { span:5 },
            wrapperCol: { span: 14 },
        };
        let group =[];
        items.map((item,i)=>{
            if(item.show){
                group.push(
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tnjlxq@${i}`}
                        label={item.label}
                    { ...formItemLayout}>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@h1zi4z@${i}`} key={this.state.key}  type={item.type} title={item.title} hasAdvanceSerach={true} isSingle={false} onChange ={(ids, names, datas)=>this.docOnchange(item.key,ids, names, datas)} />
                    </WeaFormItem>
                )
            }else{
                return;
            }
            
        })
        return group;
    }
    docOnchange=(type,ids, names, datas)=>{
        if(type =="doc"){
            this.setState({doc:ids})
        }else if(type == "wf"){
            this.setState({workflow:ids})
        }else if(type == "crm"){
            this.setState({crm:ids})
        }else if(type == "task"){
            this.setState({task:ids})
        }else if(type == "prj"){
            this.setState({project:ids})
        }
    }
    fileUploadBack=(arr)=>{
       this.setState({file:arr})
    }
    saveValue=(v)=>{
        this.setState({value:v})
    }

    handleSubmitExchange=()=>{
        const { value,doc,task,crm,workflow, project, file,key} = this.state;
        const {targetid,discusstype} = this.props.contentStore;
        if(value){
            let params = {
                id:targetid,
                discusstype:discusstype,
                remark:value.replace(/(^\s*)|(\s*$)/g,"").replace(/\n/g,'<br>'),
                relateddoc:doc,
                relatedwf:workflow,
                relatedcrm:crm,
                relatedprj:project,
                relatedtsk:task,
                relatedacc:`${file}`,
            }
            WeaTools.callApi('/api/proj/prjutil/doDiscussOpt', 'POST', params).then(data=>{
                typeof this.props.callBack == "function" && this.props.callBack();
                this.setState({
                    value:"",
                    "doc":"",
                    "task":"",
                    "crm":"",
                    "workflow":"",
                    "project":"",
                    file:"",
                    key:key+1
                })
            });
        }else{
            Modal.info({
                title: getLabel(15172,"系统提示"),
                content: getLabel(83900,"请填写交流信息"),
            });
        }
    }
    getAdButtons = () => {
        const {contentStore} = this.props;
        const {setShowSearchAd,clearFormFields,getRelateExchangeInfo} = contentStore;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3loogm@search`} type="primary" onClick={()=>{getRelateExchangeInfo();setShowSearchAd(false);}}>{getLabel(197,"搜索")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sk8us3@reset`} type="ghost" onClick={()=>{clearFormFields();}}>{getLabel(2022,"重置")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6s49jh@cancel`} type="ghost" onClick={()=>{setShowSearchAd(false)}}>{getLabel(201,"取消")}</Button>)
        ];
    }
    pageNoChange=(index)=>{
        const {contentStore} = this.props;
        const {getRelateExchangeInfo} = contentStore;
        getRelateExchangeInfo({pageIndex:index});
    }
}