import React from 'react';
import { Button, Row, Col, Modal } from 'antd';
import { inject, observer } from 'mobx-react';
import {WeaLocaleProvider, WeaDialog, WeaNewScroll, WeaSelect, WeaFormItem, WeaTableEditable} from "ecCom"
import {WeaTableNew,WeaSwitch} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
import {toJS} from "mobx"

@observer
export default class TaskBatchEditDialog extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            titleBatchModify: getLabel('383518','批量编辑') 
        }
        const {contentStore,prjid} = this.props;
        contentStore.setPrjid(prjid);
    }

    render(){
        const {contentStore,prjid} = this.props;
        const {visible, setVisible, bmOptions, bmDatas, bmSelectedDatas, bmSelectedRowKeys, appendBmData, bmOptionValue, fieldChange} = contentStore;
        const bmColumns =  [
            {
                title: getLabel(685, "字段名称"), // 列名
                dataIndex: 'showname', // 列的id 对应数据
                key: 'showname', // 前端渲染key值
                com: [
                    { label: '', type: 'TEXT' },
                ],
                width : "33%"
            },{
                title: getLabel('124937','数据库字段名称') ,
                dataIndex: 'fieldname',
                key: 'fieldname', 
                com: [
                    { label: '', type: 'TEXT' },
                ],
                width : "33%"
            },{
                title: getLabel('500549','更改值') ,
                dataIndex: 'valuespan',
                key: 'valuespan', 
                com: [
                    { label: '', type: 'TEXT' },
                ],
                width : "33%"
            },
        ];
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gk3bvh`}  
                title={this.state.titleBatchModify}
                visible={visible}
                buttons={this.getBmBottomButtons()}
                icon="icon-coms-project"
                iconBgcolor="#217346"
                onCancel={()=>{setVisible(false)}}
                style={{width:1000,height:700}}>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@g2zlpr`} height={"100%"}>
                    <div className="prj-bm-top">
                        <div className="top-form">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8mt1gk`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ojrilh`} span={11}>
                                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5hbuyn`} label={getLabel(685, "字段名称")} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                        { bmOptions.length > 0 &&<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dk70e1`}
                                            value={bmOptionValue}
                                            options={bmOptions}
                                            onChange={(v, showname)=> { fieldChange(v,showname,prjid)} }
                                            width={"100%"}
                                        />}
                                    </WeaFormItem>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fk4j44`} span={2}>
                                    <i className="icon-coms-replace" style={{fontSize:"29px",color:"#2db7f5"}}/>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w9gw0e`} span={11}>
                                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@z549r8`}  labelCol={{ span: 0 }} wrapperCol={{ span: 22 }}>
                                        {this.getFormCondition()}
                                    </WeaFormItem>
                                </Col>
                            </Row>
                        </div>
                        <div className="top-add">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@du138t`} style={{    padding: "8px"}}> 
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@impms6`} span={22}></Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6roi6m`} span={2}>
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x5dpui`} type="primary" disabled={typeof(bmOptionValue) == "number" || bmOptionValue == ""} size={"large"} onClick={() => {appendBmData()}}>{getLabel(611, "添加")}</Button>  
                                </Col>
                            </Row>       
                        </div>
                    </div>
                                        
                    <div className="prj-bm-center">
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3abk9f`} style={{    padding: "8px"}}> 
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7wxa0e`} span={10}>
                                {getLabel('500364','已设变更字段') }
                            </Col>
                        </Row>                    
                    </div>
                    
                    <div className="prj-bm-bottom">
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@81r8rg`} 
                            height={"100%"}
                            onScroll={(e)=>{
                            this.setState({
                                scrollTop:e.target.scrollTop,
                            })
                        }}>
                            <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@7w7j2o`}
                                ref={el => {this.tableEdit = el}}
                                columns={bmColumns}
                                datas={toJS(bmDatas)}
                                selectedData={bmSelectedDatas}
                                selectedRowKeys={bmSelectedRowKeys}
                                onChange={this.bmOnChange}
                                onRowSelect={this.bmOnRowSelect}
                                showDelete={true}
                                showAdd={false}
                                showCopy={false}
                            />      
                        </WeaNewScroll>         
                    </div>
                </WeaNewScroll>    
            </WeaDialog>
        )
    }

    getBmBottomButtons() {
        const { bmDatas,setVisible,submitBatchModify } = this.props.contentStore;
        const count = toJS(bmDatas).length;
        let btnArr = [];
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fyjr85`} type="primary" onClick={() => {
            submitBatchModify(this.props.selectedRowKeys);
            if(this.props.reset){
                this.props.reset();
            }
        }}
        disabled={count == 0}
        >{getLabel(615, '提交')}</Button>)
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jpqg3n`} type="primary" onClick={() => {
            setVisible(false)
        }}>{getLabel(309, '关闭')}</Button>)
        return btnArr;
    }

    getFormCondition = () => {
        const basicToolBar = {
            uploadUrl: (window.ecologyContentPath || '')+"/api/blog/fileupload/uploadimage", 
            startupFocus: false,
            toolbar: [
                { name: 'markdown', items: ['Markdown'] },
                { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'] },
                { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
                { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor', 'BGColor'] },
                { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
                { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
            ],
        };
        const {bmform,bmCondition} = this.props.contentStore;
        const {isFormInit} = bmform;
        let items = [];
        isFormInit && bmCondition.map(c =>{
            c.items.map((fields,index) => {
            if (fields.conditionType == "RICHTEXT") {   //多行文本
                items.push(<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@oih18l@${index}`} fieldConfig={{...fields,ckConfig:basicToolBar}} form={bmform}/>)
            }else{
                items.push(<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@k8xseb@${index}`} fieldConfig={fields} form={bmform}/>)
            }
            });
          });
        return items;
    }

    bmOnChange = (datas, other) => {
        const {onBmChange} = this.props.contentStore;
        onBmChange(datas);
    }

    bmOnRowSelect = (selectedRowKeys,selectComs) => {
        const {onBmRowSelect} = this.props.contentStore;
        onBmRowSelect(selectedRowKeys,selectComs);
    }

}