import React from 'react';
import { inject, observer } from 'mobx-react';
import { routerShape } from 'react-router';
import { Condition, getAdButtons } from '../list/listCondition';
import { WeaErrorPage, WeaTools, WeaTop, WeaTab, WeaRightMenu, WeaProgress, WeaLocaleProvider } from 'ecCom';
import { Button } from 'antd';
import { toJS } from "mobx"
import { WeaTableNew } from 'comsMobx';
import ShareDialog from '../dialog/shareDialog'
import ExchangeDialog from '../dialog/exchangeDialog'
import TaskInfoDialog from '../dialog/taskDialog'

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject("queryTaskStore")
@observer
class QueryTaskResult extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        this.doInit(this.props);
        this.state = {
            workPlanVisible: false,
            coWorkVisiable: false,
            taskid: "",
            projectid: ""
        }
    }

    doInit(props) {
        const { location:{query},queryTaskStore, location } = props;
        //我的任务（门户元素）更多
        if(query.searchfrom==='portal'){
            queryTaskStore.getQueryCondition();
            queryTaskStore.setSearchfrom();
        }
        queryTaskStore.doSearch(query);
    }
    componentDidMount() {
        const { queryTaskStore } = this.props;
        // if (!window.weaWorkplan) {
        //     // 异步加载别模块的静态资源
        //     eventRegister.loadModule('f_workplan', () => {
        //         queryTaskStore.setLoaded(true)
        //     }, () => {
        //         // 加载文件失败 的业务处理， 网络超时，没文件之类
        //     })
        // } else {
        //     queryTaskStore.setLoaded(true)
        // }

        if (!window.weaWorkplan && !window.weaCowork) {
            eventRegister.loadModule('f_workplan', () => {
                eventRegister.loadModule('f_cowork', () => {
                    queryTaskStore.setLoaded(true)
                }, () => {
                    // 加载文件失败 的业务处理， 网络超时，没文件之类
                    alert("加载协作模块失败，请联系系统管理员！");
                });
            }, () => {
                // 加载文件失败 的业务处理， 网络超时，没文件之类
                alert("加载日程模块失败，请联系系统管理员！");
            });
            return;
        }
        if (window.weaWorkplan && !window.weaCowork) {
            eventRegister.loadModule('f_cowork', () => {
                queryTaskStore.setLoaded(true)
            }, () => {
                // 加载文件失败 的业务处理， 网络超时，没文件之类
                alert("加载协作模块失败，请联系系统管理员！");
            });
        } else {
            eventRegister.loadModule('f_workplan', () => {
                queryTaskStore.setLoaded(true)
            }, () => {
                // 加载文件失败 的业务处理， 网络超时，没文件之类
                alert("加载协作模块失败，请联系系统管理员！");
            });
        }
    }
    componentWillUnmount() {
        const { queryTaskStore } = this.props;
        queryTaskStore.clearStatus();
    }
    render() {
        let _this = this;
        const { location:{query},queryTaskStore } = this.props;
        const { loading, form, tableStore, showSearchAd, exchangeStore, taskInfoStore, reLoad } = queryTaskStore;
        const formParams = form.getFormParams();    //Mobx-form的Bug，form传给子组件时需外层调用下取值，否则查询条件变了组件不会render
        const account = WeaTools.ls.getJSONObj('theme-account');
        return (
            <div className='prj-query'>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@4x2dr5`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@jg9x3e`}
                        title={query.searchfrom==='portal' ? getLabel(244571, "我的任务"):getLabel(24457, "查询任务")}
                        loading={loading}
                        icon={<i className='icon-coms-project' />}
                        iconBgcolor='#217346'
                        buttons={this.getTopButtons()}
                        buttonSpace={10}
                        showDropIcon={true}
                        dropMenuDatas={this.getRightMenu()} onDropMenuClick={this.onRightMenuClick.bind(this)}
                    >
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7cxat9`}
                            buttonsAd={getAdButtons(queryTaskStore,this.props.ecId || '')}
                            searchType={['base', 'advanced']}
                            searchsBaseValue={formParams.taskname}
                            setShowSearchAd={bool => { queryTaskStore.setShowSearchAd(bool) }}
                            hideSearchAd={() => queryTaskStore.setShowSearchAd(false)}
                            searchsAd={
                                <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@18fzoy`} listStore={queryTaskStore} form={form} onEnterSearch={this.onEnterSearch} ></Condition></div>
                            }
                            showSearchAd={showSearchAd}
                            onSearch={v => { queryTaskStore.doSearch() }}
                            onSearchChange={v => { queryTaskStore.appendFormFields({ taskname: { value: v } }) }}
                        />
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@yrvoub`}
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            register_table={() => reLoad()}
                            getColumns={c => this.reRenderColumns(c)}
                            tableWidth={this.tableWidth}
                            onOperatesClick={this.onOperatesClick.bind(this)}
                        />
                    </WeaTop>
                    {window.weaCowork && window.weaCowork.com && window.weaCowork.com.CreateCowork && this.state.coWorkVisiable && this.state.taskid !== "" && (
                        <window.weaCowork.com.CreateCowork ecId={`${this && this.props && this.props.ecId || ''}_CreateCowork@orakom`}
                            initAddQuery={
                                {
                                    relatedType: "task",
                                    ids: this.state.taskid
                                }
                            }
                            onCancel={() => {
                                this.setState({
                                    coWorkVisiable: false
                                });
                            }}
                        />)
                    }
                    {
                        queryTaskStore.isreloadWorkPlan && window.weaWorkplan && window.weaWorkplan.com && window.weaWorkplan.com.WorkPlanCreate &&
                        (<window.weaWorkplan.com.WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@o0cp37`}
                            type={"create"}//新建为'create',查看为'preview',编辑edit,共享share
                            visible={_this.state.workPlanVisible}//显隐受控
                            doClose={() => { _this.setWorkPlanVisible(false); }}//关闭回调
                            onlyClose={() => { _this.setWorkPlanVisible(false) }}//关闭回调,只做关闭操作
                            workPlanId={""} //日程id，1查看日程时用到
                            createConditionParams={[]}//创建的默认值日期和时间,没有传[]
                            activeKey={""} //查看页面显示的面板1是基本信息，7是相关交流
                            //{(key) => { }}//查看页面切换面板的回调
                            selectUser={account && account.userid}//新建日程的创建人id
                            workPlanTypeOptions={"2"}//客户模块的新建日程，普通新建传'',客户新建传3
                            projectid={_this.state.projectid}
                            taskid={_this.state.taskid}
                            description={""}//客户模块需求，支持新建时传入的'基本信息-内容'
                        />)
                    }
                    <ShareDialog ecId={`${this && this.props && this.props.ecId || ''}_ShareDialog@im5baw`} contentStore={queryTaskStore} />
                    <ExchangeDialog ecId={`${this && this.props && this.props.ecId || ''}_ExchangeDialog@bz3n97`} contentStore={exchangeStore} />
                    <TaskInfoDialog ecId={`${this && this.props && this.props.ecId || ''}_TaskInfoDialog@n0bic6`} contentStore={taskInfoStore} />
                </WeaRightMenu>
            </div>
        )
    }

    setWorkPlanVisible = (bool) => {
        this.setState({ workPlanVisible: bool })
    }

    getTopButtons() {
        const { queryTaskStore } = this.props;
        const { rightMenu, tableStore } = queryTaskStore;
        let { selectedRowKeys } = tableStore;
        let btnArr = [];
        let that = this;
        const isDisabled = !(selectedRowKeys.length > 0 && `${toJS(selectedRowKeys)}`);
        rightMenu && rightMenu.length > 0 && toJS(rightMenu).map(m => {
            let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
            m.isTop == '1' && btnArr.length < 4 && btnArr.push(
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hbkh93@${m.type}`} type="primary"
                    disabled={isDisabled && m.isControl == "1"}
                    onClick={() => {
                        if (fn == "") {
                            if (m.type == "BTN_EXPORT") { //导出Excel
                                queryTaskStore.doTaskExcelExp();
                            }
                        }
                    }}>
                    {m.menuName}
                </Button>
            );
        });
        return btnArr;
    }
    getRightMenu() {
        const { queryTaskStore } = this.props;
        const { rightMenu } = queryTaskStore;
        let btnArr = [];
        rightMenu && rightMenu.length > 0 && rightMenu.map(m => {
            btnArr.push({
                icon: <i className={m.menuIcon} />,
                content: m.menuName
            })
        });
        return btnArr
    }
    onRightMenuClick(key) {
        const { queryTaskStore } = this.props;
        const { rightMenu } = queryTaskStore;
        let that = this;
        rightMenu && rightMenu.length > 0 && rightMenu.map((m, i) => {
            if (Number(key) == i) {
                if (m.type == "BTN_COLUMN") { //定制列
                    queryTaskStore.onShowColumn();
                } else if (m.type == "BTN_EXPORT") {
                    queryTaskStore.doTaskExcelExp();
                }
            }
        });
    }
    reRenderColumns(columns) {
        columns.forEach((c,i) => {
            if (c.dataIndex == 'finish') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@a27iyi@${i}`} percent={record.finish || 0} strokeColor={record.finishspan} />
                    </span>
                }
            } else {
                // c.render = function (text, record) {
                //     let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                //     return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                // }
            }
        })
        return columns;
    }
    
    tableWidth = (columns) => {
        let width = 0;
        let cols = 0;
        columns.map(col => {
          if (col.display === 'true') {
            let oldwidth = col.oldWidth || '10%';
            let widthInt = parseFloat(oldwidth.replace('%', ''));
            if (widthInt <= 0) {
              widthInt = 10;
            }
            width += widthInt;
            cols++
          }
        })
        //超过10列，才出现滚动条，width>100才出现滚动条
        if(cols<=10){
            width = 100 ;
        }
        return `${width}%`;
    }

    onOperatesClick(record, index, operate, flag) {
        let that = this;
        const { queryTaskStore } = this.props;
        const { shareStore, exchangeStore, taskInfoStore } = queryTaskStore;

        let _href = operate && operate.href ? operate.href : "";
        let fn = _href.replace("javascript:", "");
        fn = fn.substring(0, fn.indexOf('('));
        if (fn != "") {
            if ("onShare" == fn) {  //共享
                shareStore.handleShareDialog(true, "task", record.randomFieldId, {})
            } else if ('onNewCowork' == fn) {   //新建协作
                this.setState({ coWorkVisiable: true, taskid: record.randomFieldId, projectid: record.prjid })
                const coworkStoreMap = window.weaCowork.store && window.weaCowork.store.coworkStoreMap;
                const cowortore = coworkStoreMap && coworkStoreMap.getMapStore(3);
                cowortore && cowortore.setCreateState({ showNewCowork: true, createOrEdit: 0 });
            } else if ('onNewWorkplan' == fn) {   //新建日程
                this.setState({ workPlanVisible: true, taskid: record.randomFieldId, projectid: record.prjid })
            } else if ('onEdit' == fn) {   //编辑
                taskInfoStore.handleDialog(true, "edit", record.randomFieldId);
            } else if ('onDiscuss' == fn) {   //相关交流
                exchangeStore.handleExchangeDialog(true, "task", record.randomFieldId, {})
            } else if ('onDel' == fn) {   //删除
                taskInfoStore.delTask("del", record.randomFieldId);
            }
        }
    }

    onEnterSearch=() =>{
        const { queryTaskStore } = this.props;
        queryTaskStore.doSearch();
        queryTaskStore.setShowSearchAd(false);
    } 

}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@7sxo8e`} msg={props.error ? props.error : getLabel(383324, "对不起，该页面异常，请联系管理员")} />,
    { error: "" }
)(QueryTaskResult);