import React from "react";
import {observer} from 'mobx-react';
import {toJS} from 'mobx'
import $ from "jquery";
import {Button, Spin} from 'antd';
import {WeaDialog, WeaLocaleProvider, WeaTableEditable, WeaUpload} from "ecCom";
import _ from "lodash";

const getLabel = WeaLocaleProvider.getLabel;
let timer;
const Content = props => {
    const {data, source, onDataChange} = props;
    const {index, key, parentIndex, item, type} = source
    let field = null;

    if (type === 'condition') { //完成情况弹框
        const dataCopy = [...data];
        const columns = [{
            title: <span>{getLabel('22069', '完成情况')}</span>,
            dataIndex: 'ctx',
            width: '50%',
            com: [
                {type: 'INPUT', key: 'ctx'}
            ],
        },
        {
            title: <span>{getLabel('156', '附件')}</span>,
            dataIndex: 'attach',
            key: 'attach',
            width: '50%',
            com: [
                {
                    type: 'CUSTOM',
                    key: 'attach',
                    render: (text, record, number, onEdit) => {
                        return (<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@fb9pn9`}
                            btnSize="small"
                            uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
                            category="string"
                            maxUploadSize={50}
                            viewAttr={2}
                            isDetail={true}
                            datas={toJS(record.attach) || []}
                            listType="list"
                            clearWhenReset={false}
                            showClearAll={false}
                            onChange={(ids, list) => { 
                                onEdit({
                                    type: "CUSTOM",
                                    record: {
                                      ...record,
                                    },
                                    index : record.key,
                                    key: "attach",
                                    value: list
                                  });
                             }
                            }
                        />)
                    }
                }
            ],
        }
        ]
        field = (<div>
            <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@uo881w`}
                columns={columns}
                datas={toJS(data)}
                onChange={(datas) => {
                    onDataChange(datas)
                }}
            />
        </div>)
    }
    if (type === "plan") { //计划内容弹框
        const {modeInfo, item, key} = source;
        const hbid = item['hbid_' + key.split("_")[1]];
        let editType = 2;
        if (item[key]['viewAttr'] && item[key]['viewAttr'] == '1') {
            editType = 0;
        }
        field = (<iframe id="iframe_plan" name="iframe_plan"
                         src={`${window.ecologyContentPath || ''}/spa/cube/index.html#/main/cube/card?billid=${hbid}&hidetop=1&type=${editType}&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}`}
                         width="953" height="740" scrolling="auto"
                         sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        />)
        clearInterval(timer);
        timer = setInterval(() => {
            if ($('#iframe_plan')) {
                clearInterval(timer);
                $('#iframe_plan').load(() => {
                    props.onIframeReady(true);
                });
                if (timer > 3000) {
                    props.onIframeReady(true);
                }
            } else if (timer > 3000) {
                localStorage.setItem("error-2", 'cannot-get-iframe');
                props.onIframeReady(true);
            }
        }, 300)
    }
    return field
}


@observer
export default class DialogPanel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            iframeIsOk: false
        }
    }

    onIframeReady = (bool) => {
        this.setState({iframeIsOk: bool})
    }
    onPlanDialogRenderCallback = (datas) => {
        const {source, onDataChange} = this.props;
        const {index, parentIndex, item} = source
        let {key} = source;
        if (_.startsWith(key, 'planCtx_')) {
            const tempArr = key.split("_");
            key = tempArr[0] + 'Total_' + tempArr[1];
        }
        onDataChange(datas, index, key, parentIndex, item);
    }

    render() {
        const {visible, onToggleDialog, data, source, onDataChange, saveMxDatas} = this.props;
        const {type, key, item} = source;
        window['onPlanDialogRenderCallback'] = this.onPlanDialogRenderCallback;
        const {iframeIsOk} = this.state;
        const buttons = [
            // <Button type="primary" loading={type === 'plan' && !iframeIsOk}
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@22kg4b@submit`} type="primary"
                    onClick={() => {
                        saveMxDatas();
                    }}>
                {getLabel(383336,"提交")}
            </Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lc4j0g@cancel`} type="ghost" onClick={() => onToggleDialog(false)}>
                {getLabel(31129,"取消")}
            </Button>
        ];
        const style = source.type === 'plan' ? {width: 953, height: 600} : {width: 800, height: 600};
        const title = source.type === 'plan' ? getLabel('22134', '计划内容') : getLabel('22069', '完成情况');
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3wi12c`}
                onCancel={() => {
                    onToggleDialog(false)
                    this.onIframeReady(false);
                }}
                visible={visible}
                showTitle={true}
                style={style}
                title={title}
                buttons={buttons}
                hasScroll
            >
                {source.type === 'plan' ?
                    // <Spin spinning={!iframeIsOk}>
                    <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@jhuahs`} data={data} source={source} onDataChange={onDataChange}
                             onIframeReady={this.onIframeReady}/>
                    // </Spin> :
                    :
                    <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@bycpfb`} data={data} source={source} onDataChange={onDataChange}/>
                }
            </WeaDialog>
        );
    }
}