import { Button, Row, Col, InputNumber, Modal, message } from 'antd';
import {observer} from 'mobx-react';
import { WeaSearchGroup, WeaFormItem, WeaDialog, WeaUpload, WeaProgress, WeaLocaleProvider, WeaTableEditable, WeaNewScroll } from 'ecCom';
import { WeaSwitch } from "comsMobx"
import { toJS } from "mobx"
const getLabel = WeaLocaleProvider.getLabel;

@observer
class FeedBackInfoDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            width:1020,
            height:650,
        }
    }

    render() {
        const {feedBackInfoStore} = this.props;
        const {visible,handleFeedBackInfoDialog,fieldinfo,form,setFormFields,title,mxdatas,setMxDatas} = feedBackInfoStore;
        const { isFormInit } = form;

        const columns = [{
            title: 'id',
            dataIndex: 'id',
            width: '0%',
            com: [
                {type: 'INPUT', key: 'id'}
            ],
            colSpan: 0
        },{
            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@ufsjv5`}
                            btnSize="small"
                            uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
                            category="string"
                            maxUploadSize={50}
                            viewAttr={2}
                            isDetail={true}
                            datas={record.attach || []}
                            listType="list"
                            clearWhenReset={false}
                            showClearAll={false}
                            onChange={(ids, list) => { 
                                onEdit({
                                    type: "CUSTOM",
                                    record: {
                                      ...record,
                                    },
                                    index : record.key,
                                    key: "attach",
                                    value: list
                                  });
                             }
                            }
                        />)
                    }
                }
            ],
        }
        ]

        let group = [];
        const formParams = form.getFormParams();
        isFormInit && fieldinfo.map((c,i) => {
            let items = [];
            c.items.map(fields => {
                let hide = false;
                let dom;
                let hasunderline = false;
                //只读样式控制
                let stylecss = { 'margin-right': '5px', 'margin-top': '6px' };
                if (fields.viewAttr == "1" || (fields.conditionType == "BROWSER" && fields.browserConditionParam.viewAttr == "1")) {
                    hasunderline = true;
                    stylecss = { 'margin-right': '5px', 'margin-top': '16px' };
                }
                if (fields.domkey[0] == "finish") {
                    if (fields.viewAttr == "1") {
                        dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@drin38@${fields.domkey[0]}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@i8y1hh@${fields.domkey[0]}`} span={12} style={stylecss}>
                                <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@xmqsm8@${fields.domkey[0]}`} name={fields.domkey[0]} percent={fields.value || 0} strokeColor={fields.strokeColor} status="active" />
                            </Col><span style={{ color: "#FF0000" }}>{fields.befSpan || ""}</span>
                        </Row>
                    } else {
                        dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kf05jt@${fields.domkey[0]}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@56w1oj@${fields.domkey[0]}`} span={24} style={stylecss}>
                                <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@tv3wyo@${fields.domkey[0]}`} name={fields.domkey[0]} min={0} value={formParams.finish}
                                    onChange={(v) => { this.checkProgress(v); }} />
                                <span style={{ marginLeft: 5 }}>%</span>
                            </Col>
                        </Row>
                    }
                }else {
                    dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@8rv6lq@${fields.domkey[0]}`} fieldConfig={fields} form={form} />;
                }
                if (hasunderline) {
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9xah8d@${fields.domkey[0]}`}
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            error={form.getError(fields)}
                            tipPosition="bottom"
                            wrapperCol={{ span: `${fields.fieldcol}` }} underline>
                            {dom}
                        </WeaFormItem>),
                        colSpan: 1,
                        hide: hide
                    });
                } else {
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3v8lba@${fields.domkey[0]}`}
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            error={form.getError(fields)}
                            tipPosition="bottom"
                            wrapperCol={{ span: `${fields.fieldcol}` }} >
                            {dom}
                        </WeaFormItem>),
                        colSpan: 1,
                        hide: hide
                    });
                }

            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@64tg0e@${i}`} needTigger={true} title={c.title} col={1} showGroup={c.defaultshow} items={items} />)
        });

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@soq3pd`}
                    style={{height:'700px',width:'800px'}}
                    title={title||getLabel('518174','编辑反馈信息') }
                    visible={visible}
                    maskClosable={false}
                    icon="icon-coms-project"
                    iconBgcolor="#217346"
                    onCancel={()=>handleFeedBackInfoDialog(false)}
                    buttons={this.getDialogButtons()}
                >
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@r9hfc0`} height='700px'>
                        {group}
                        <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@wht3cn`}
                            title={getLabel('22069', '完成情况')}
                            columns={columns}
                            // initialDatas={toJS(mxdatas)||[]}
                            datas={toJS(mxdatas)||[]}
                            onChange={(datas) => {
                                setMxDatas(datas);
                            }}
                        />
                    </WeaNewScroll>
                </WeaDialog>
            </div>)
    }

    getDialogButtons(){
        const {store,prjid,feedBackInfoStore} = this.props;
        let btn = [];
        btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vpn70m@save`}  type="primary" onClick={()=>{feedBackInfoStore.saveFeedBackInfo(store,{prjid:prjid});}}>{getLabel(86,"保存")}</Button>);
        btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gk2e6t@close`}  type="primary" onClick={()=>feedBackInfoStore.handleFeedBackInfoDialog(false)}>{getLabel(309,"关闭")}</Button>);
        return btn
    }

    checkProgress = (value) => {  //进度编辑校验
        const { finishmax, setFormFields } = this.props.feedBackInfoStore;
        if (Number(finishmax) == 99) {
            if (value > 99) {
                message.error(getLabel(383829, "该任务所必须的相关文档或者相关流程不存在，任务不能完成100%。"));
                setFormFields({ finish: { value: 99 } });
            } else {
                setFormFields({ finish: { value: value } });
            }
        } else {
            if (value > 100) {
                setFormFields({ finish: { value: 100 } });
            } else {
                setFormFields({ finish: { value: value } });
            }
        }
    }

}

export default FeedBackInfoDialog;