import { Button,Spin} from 'antd';
import {WeaDialog,WeaTab,WeaNewScroll,WeaRightMenu,WeaLocaleProvider } from 'ecCom';
import {inject, observer} from "mobx-react";
import {toJS} from 'mobx';
import PrjTaskListTable from '../comp/prjTaskListTable'
import ProjectCondition from '../list/projectCondition'
import StageList from '../common/stageList';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class AddProjectDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            width:1020,
            height:650,
        }
    }
    componentDidMount(){
    }
    componentWillReceiveProps(nextProps){
    }
    render() {
        const {addProjectStore} = this.props.contentStore;
        const {title,selectedKey,visible,conditionDatas:{userid,taskinfo,fieldinfo,taskViewAttr},saveListDatas,saveRowKeys,selectedRowKey,spinning} = addProjectStore;
        const {form,setFormFields,setValidate,isTimeShow} = addProjectStore;
        const tabs = [{key:"prjinfo",title:getLabel(16290,"项目信息")},{key:"sublist",title:getLabel(18505,"任务列表")}, { key: "stagelist", title: getLabel('387407',"阶段设置") },{ key: "rolelist", title: "角色管理" }];
        const { width} = this.state;
        const formParams = form.getFormParams() || {};
        const {roleIframeUrl} = addProjectStore;
        let dialogHeight = window.innerHeight - 150;
        if (dialogHeight > 600) dialogHeight = 600;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8q3ggi`}
                    title={title}
                    visible={visible}
                    style= {{width: width, height: dialogHeight}}
                    maskClosable={false}
                    icon="icon-coms-project"
                    iconBgcolor="#217346"
                    onCancel={()=>addProjectStore.handleShareDialog(false)}
                    buttons={this.getDialogButtons()}
                >
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@rg25at`} datas={this.getRightMenu()}>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@u3s389`}
                            buttons={this.getButtons()}
                            datas={tabs}
                            selectedKey={selectedKey}
                            keyParam="key"  //主键
                            onChange={this.changeTab.bind(this)} />
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@q8bmh0`} height={"calc(100% - 50px)"}>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@y99n9e`} spinning={spinning}>
                                <div style = {{display:selectedKey == "prjinfo"? "block":"none"}}>
                                    <ProjectCondition ecId={`${this && this.props && this.props.ecId || ''}_ProjectCondition@a799e4`} fieldInfo={fieldinfo} form={form} setFormFields={(v)=>{setFormFields(v)}} setValidate={(v)=>{setValidate(v)}} />
                                </div>
                                <div style = {{display:selectedKey == "sublist"? "block":"none"}}>
                                    <PrjTaskListTable ecId={`${this && this.props && this.props.ecId || ''}_PrjTaskListTable@kzq9ip`}
                                        ref = "PrjTaskListTable" 
                                        taskViewAttr={taskViewAttr}
                                        datas={toJS(taskinfo)}
                                        userid = {formParams.manager}
                                        isworkday = {formParams.passnoworktime}
                                        selectedRowKeys={toJS(selectedRowKey)}
                                        onChange={(datas)=>{saveListDatas(datas)}}
                                        onRowSelect={(rowkeys)=>{saveRowKeys(rowkeys)}}
                                        stageOptions={this.getStageOptions()}
                                        isTimeShow={isTimeShow}
                                    />
                                </div>
                                <div style={{ display: selectedKey == "stagelist" ? "block" : "none" }}>
                                    <StageList ecId={`${this && this.props && this.props.ecId || ''}_StageList@8uu82g`} ref={el => { this.StageList = el }} contentStore={addProjectStore} />
                                </div>
                                <div style={{ display: selectedKey == "rolelist" ? "block" : "none" }}>
                                    <iframe 
                                        src={roleIframeUrl} 
                                        width="100%" 
                                        height={540} 
                                    />          
                                </div>
                            </Spin>
                            </WeaNewScroll>
                    </WeaRightMenu>
                </WeaDialog>
                
            </div>)
    }
    getButtons(){
        const {addProjectStore} = this.props.contentStore;
        const {selectedKey,addNewListDatas,deleListDatas,selectedRowKey,conditionDatas:{userid,taskinfo,fieldinfo,taskViewAttr},stageInfo} = addProjectStore;
        const isDisabled = !(selectedRowKey.length>0 && `${toJS(selectedRowKey)}`);
        const stageDisabled = !(stageInfo.selectedRowKeys.length > 0)
        let btn = [];
        if(taskViewAttr==2){
            if(selectedKey == "sublist"){
                btn = [
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@adjhai`} style={{ border: 'none', padding: '0px', fontSize: '20px', lineHeight: '1', color: '#55a1f8', backgroundColor: '#fff' }} type="primary" title={getLabel(611, '添加')} size="small" disabled={0} onClick={() => {
                        addNewListDatas();
                    }}><span className="icon-coms-Add-to-hot" /></Button>),
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@85e37z`} style={{ border: 'none', padding: '0px', fontSize: '20px', lineHeight: '1', color: (isDisabled) ? '#d8d8d8' : '#55a1f8', marginLeft: '-5px', backgroundColor: '#fff' }} type="primary" title={getLabel(91, '删除')} size="small" disabled={isDisabled} onClick={() => {
                        deleListDatas();
                    }} ><span className="icon-coms-form-delete-hot" /></Button>
                ];
            } else if (selectedKey == "stagelist") {
                btn = [
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9vrk3o`} style={{ border: 'none', padding: '0px', fontSize: '20px', lineHeight: '1', color: '#55a1f8', backgroundColor: '#fff' }} type="primary" title={getLabel(611, '添加')} size="small" disabled={0} onClick={() => {
                        this.StageList.tableEdit.refs.edit.doAdd()
                    }}><span className="icon-coms-Add-to-hot" /></Button>),
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6q0hxn`} style={{ border: 'none', padding: '0px', fontSize: '20px', lineHeight: '1', color: (stageDisabled) ? '#d8d8d8' : '#55a1f8', marginLeft: '-5px', backgroundColor: '#fff' }} type="primary" title={getLabel(91, '删除')} size="small" disabled={stageDisabled} onClick={() => {
                        this.StageList.tableEdit.refs.edit.doDelete()
                    }} ><span className="icon-coms-form-delete-hot" /></Button>
                ];
            }
        }
        return btn
    }
    getDialogButtons(){
        const {isreflesh} = this.props;
        const {addProjectStore} = this.props.contentStore;
        const {saveAddProject,conditionDatas:{taskViewAttr}} = addProjectStore;
        let btn = [];
        if(taskViewAttr==2){
            btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kmwp7b`}  type="primary" onClick={ ()=>{saveAddProject({isreflesh:isreflesh,checkProps:this.StageList.tableEdit.refs.edit.doRequiredCheck()});this.refs.PrjTaskListTable.showErrors();}}>{getLabel(86,"保存")}</Button>);
            btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hd7lss`}  type="primary" onClick={()=>addProjectStore.handleShareDialog(false)}>{getLabel(309,"关闭")}</Button>);
        }else{
            btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q4i367`}  type="primary" onClick={()=>addProjectStore.handleShareDialog(false)}>{getLabel(309,"关闭")}</Button>);
        }
        return btn
    }

    getRightMenu(){
        const {isreflesh} = this.props;
        const {addProjectStore} = this.props.contentStore;
        const {conditionDatas:{rightMenu}} = addProjectStore;
        const {selectedKey,saveAddProject,addNewListDatas,deleListDatas,selectedRowKey,conditionDatas:{userid,taskinfo,fieldinfo,taskViewAttr},stageInfo} = addProjectStore;
        const isDisabled = !(selectedRowKey.length>0 && `${toJS(selectedRowKey)}`);
        const stageDisabled = !(stageInfo.selectedRowKeys.length > 0)

        let btn = [];
        if(taskViewAttr==2){
            if(selectedKey == "prjinfo"){
                btn.push({
                    key: '1',
                    icon: <i className={"icon-coms-Preservation"} />,
                    content: getLabel(86,"保存"),
                    onClick:(key)=>{
                        const checkProps = this.StageList.tableEdit.refs.edit.doRequiredCheck();
                        saveAddProject({ isreflesh: isreflesh, checkProps: checkProps });
                    }  
                });
            }
            if(selectedKey == "sublist"){
                btn.push({
                    key: '1',
                    icon: <i className={"icon-coms-New-Flow"} />,
                    content: getLabel(611,"添加"),
                    onClick:(key)=>{
                        addNewListDatas();
                    }  
                });
                btn.push({
                    key: '2',
                    icon: <i className={"icon-coms-delete"} />,
                    content: getLabel(91,"删除"),
                    disabled:isDisabled,
                    onClick:(key)=>{
                        deleListDatas();
                    }  
                });
                btn.push({
                    key: '3',
                    icon: <i className={"icon-coms-Preservation"} />,
                    content: getLabel(86,"保存"),
                    onClick:(key)=>{
                        this.refs.PrjTaskListTable.showErrors();
                        const checkProps = this.StageList.tableEdit.refs.edit.doRequiredCheck();
                        saveAddProject({ isreflesh: isreflesh, checkProps: checkProps });
                    }  
                });
                
            }
            if (selectedKey == "stagelist") {
                btn.push({
                    key: '1',
                    icon: <i className={"icon-coms-New-Flow"} />,
                    content: getLabel(611, "添加"),
                    onClick: (key) => {
                        this.StageList.tableEdit.refs.edit.doAdd()
                    }
                });
                btn.push({
                    key: '2',
                    icon: <i className={"icon-coms-delete"} />,
                    content: getLabel(91, "删除"),
                    disabled: stageDisabled,
                    onClick: (key) => {
                        this.StageList.tableEdit.refs.edit.doDelete()
                    }
                });
                btn.push({
                    key: '3',
                    icon: <i className={"icon-coms-Preservation"} />,
                    content: getLabel(86, "保存"),
                    onClick: (key) => {
                        const checkProps = this.StageList.tableEdit.refs.edit.doRequiredCheck();
                        saveAddProject({ isreflesh: isreflesh, checkProps: checkProps });
                    }
                });
            }
        }
        return btn
    }

    changeTab(key){
        const {addProjectStore} = this.props.contentStore;
        addProjectStore.changeTab(key)
    }

    getStageOptions = () => {
        const { addProjectStore: { stageInfo: { stageColumns, stageColumnDatas, selectedRowKeys, selectedDatas } } } = this.props.contentStore;
        let options = [];
        options.push({ disabled: false, selected: false, showname: " ", key:"", visible: true })
        stageColumnDatas && stageColumnDatas.length > 0 && stageColumnDatas.map(item => {
            options.push({ disabled: false, key: item.id, selected: false, showname: item.name, visible: true })
        })
        return options;
    }
}

export default AddProjectDialog;