import React from 'react';
import {Table, Row, Col, spin, Button, Spin} from 'antd';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {WeaLocaleProvider, WeaRightMenu, WeaSelect, WeaTop, WeaDatePicker, WeaDialog} from 'ecCom';
import '../../style/prjReport.less';
import DialogPanel from "./dialogPanel";
import FeedBackInfoDialog from "./feedBackInfoDialog";
import FeedBackSettingDialog from "./feedBackSettingDialog";
import $ from 'jquery';
import reportStore from '../../stores/reportStore';

const getLabel = WeaLocaleProvider.getLabel;

const TitleInfo = props => {
    const { monthOptions, openDialog, type, activity} = props;
    return (
        <div className='prjReport-titleinfo'>
            <div className='label main-edition'>
                {getLabel('518181','反馈周期')}：{type}
            </div>
            <div className='label main-edition'>
                {getLabel('518182','当前活动')}{type}：{activity}
            </div>
            <div className='label main-edition'>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@361hj9`} onClick={()=>{openDialog()}}>{getLabel('30747','设置')}</Button>
            </div>
            <div className='label main-edition'>
                {getLabel('33251','选择')}{type}：
            </div>
            <div className='label main-edition'>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@inavh8`}
                    className="main-edition-select"
                    style={{width: "200px"}}
                    options={toJS(monthOptions) || []}
                    viewAttr={2}
                    onChange={(val) => {
                        let pos = 0;
                        _.forEach(monthOptions, (item, index) => {
                            if (item.key === val) {
                                pos = index;
                                return false;
                            }
                        });
                        $(".ant-table-body").scrollLeft(($(".ant-table-content .ant-table-header:eq(1)  tr:first").find("th[colspan=6]:first").width() + 25) * pos+305);
                    }}
                />
            </div>
        </div>
    )
}

@inject('ReportStore')
@observer
export default class Report extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            YHeight: 200
        }
    }

    componentDidMount() {
        const {init} = this.props.ReportStore;
        const {prjid,location}= this.props;
        // const {location:{query: {prjid}}}= this.props;
        if(prjid==''||prjid==null){
            init(location.query.prjid);
        }else{
            init(prjid);
        }
        window.onresize = () => {
            this.getYHeight();
        }
        this.getYHeight();
    }

    onDataChange = () => {
        return this.props.ReportStore.onDataChange;
    }
    getYHeight = () => {
        this.setState({
            YHeight: window.top.innerHeight - 300
        })
    }

    componentWillReceiveProps(nextProps){
        const {init} = nextProps.ReportStore;
        const {prjid,location}= this.props;
        if(prjid==''||prjid==null){
            if(location.key != nextProps.location.key){
                init(nextProps.location.query.prjid);
            }
        }else{
            if(prjid != nextProps.prjid){
                init(nextProps.prjid);
            }
        }
     }

    render() {
        const {ReportStore} = this.props;
        const {
            columns, columnsWidth, tableForamtDatas, dialogVisible, expandedRowKeys, onExpandedRowKeysChange, projInfo,
            onToggleDialog, dialogData, dialogSource, onDataChange, saveData, onEditionChange, nowVersionSelected, monthOptions,
            submitLoading, submitTip, prjstatus, feedBackInfoStore, prjid, feedBackSettingStore, type, activity, setDialogData, saveMxDatas
        } = ReportStore;
        const menu = [
            {
                key: '1',
                icon: <i className='icon-coms-search'/>,
                content: getLabel('725', '提交'),
                onClick: key => {
                    saveData(key)
                }
            },
            {
                key: '2',
                icon: <i className='icon-coms-search'/>,
                content: getLabel('30986', '保存'),
                onClick: key => {
                    saveData(key)
                }
            }
        ];
        if (!(tableForamtDatas && projInfo && projInfo.name)) {
            return <spin/>
        }
        return (
            <div className="task-report-container">
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@g40kfi`} tip={submitTip} spinning={submitLoading}>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@j9sgne`} datas={menu}>
                        <div style={{height: "100%"}}>
                            <TitleInfo ecId={`${this && this.props && this.props.ecId || ''}_TitleInfo@xjg3ei`}
                                columns={columns}
                                statusName={projInfo && projInfo.statusname}
                                projName={projInfo && projInfo.name}
                                jindu={projInfo && projInfo.jindu}
                                editionOptions={projInfo && projInfo.version}
                                value={nowVersionSelected}
                                onEditionChange={onEditionChange}
                                monthOptions={monthOptions}
                                saveData={saveData}
                                prjstatus={prjstatus}
                                openDialog={() =>{feedBackSettingStore.handleFeedBackSettingDialog(true,{prjid:prjid})}}
                                type={type}
                                activity={activity}
                            />
                            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@nx6gv9`}
                                columns={columns || []}
                                dataSource={tableForamtDatas}
                                indentSize={10}
                                pagination={false}
                                scroll={{x: columnsWidth, y: this.state.YHeight}}
                                bordered={true}
                                expandedRowKeys={expandedRowKeys}
                                onExpandedRowsChange={(keys)=>{
                                    onExpandedRowKeysChange(keys)
                                }}
                            />
                        </div>
                    </WeaRightMenu>
                    <DialogPanel ecId={`${this && this.props && this.props.ecId || ''}_DialogPanel@80de8n`}
                        visible={dialogVisible}
                        onToggleDialog={onToggleDialog}
                        data={dialogData}
                        source={dialogSource}
                        onDataChange={setDialogData}
                        saveMxDatas={saveMxDatas}
                    />
                    <FeedBackInfoDialog ecId={`${this && this.props && this.props.ecId || ''}_FeedBackInfoDialog@iirgcy`} prjid={prjid} store={ReportStore} feedBackInfoStore={feedBackInfoStore} />
                    <FeedBackSettingDialog ecId={`${this && this.props && this.props.ecId || ''}_FeedBackSettingDialog@4v3hdc`} prjid={prjid} store={ReportStore} feedBackSettingStore={feedBackSettingStore} />
                </Spin>
            </div>
        )
    }
}