import React from 'react'
import { WeaDraggable ,WeaBrowser,WeaInput} from 'ecCom';
import { Row, Col } from 'antd';
import jQuery from 'jquery';
import { observable, action } from 'mobx';
import { inject, observer} from 'mobx-react';
import {WeaForm, WeaSwitch} from 'comsMobx';
import {WeaSearchGroup, WeaFormItem} from 'ecCom';
import {Button} from 'antd';

const datas = {
    "condition": [
    {
    "title": "基本信息",
    "items": [
    {
    "colSpan": 2,
    "conditionType": "INPUT",
    'rules': 'required|string',
    "domkey": [
    "resourcename"
    ],
    "fieldcol": 12,
    "isQuickSearch": true,
    "label": "姓名",
    "labelcol": 6,
    "value": "",
    "viewAttr": 2
    },
    {
    colSpan:2,
    "fieldcol": 12,
    "labelcol": 6,
    conditionType:"SCOPE",
    domkey:
     ["seclevel", "seclevelTo"],
    endValue:100,
    isQuickSearch:false,
    label:"安全级别",
    startValue:'0',
    viewAttr:3,
    precision: 0,
    min:[0, 10],
    max:[10, 1000],
    },
    {
        colSpan:2,
        "fieldcol": 12,
        "labelcol": 6,
        conditionType:"TIMERANGEPICKER",
        domkey:
            ["starttime", "endtime"],
        label:"时间区间",
        starttime:'14:50',
        endtime:"15:30",
        viewAttr:3,
        'rules': 'required|string', // 校验规则
    },
    
    ],
    "defaultshow": true
    }
    ]
    }

class DemoStore {
    @observable form = new WeaForm();

    @action
    getFormParams() {
      return this.form.getFormParams();
    }
  }
  
  const demoStore = new DemoStore();

@observer
export default class Main extends React.Component{
    constructor(props) {
        super(props);
    }
    componentDidMount() {
      const conditioninfo = datas.condition;
      const {form} = demoStore;
      form.initFormFields(conditioninfo);
    }
    onChange(data) {
  
    }
    getSearchs() {
      const conditioninfo = datas.condition;
      const { form } = demoStore;
      const {isFormInit} = form;
      let group = [];
      isFormInit && conditioninfo.map((c,i) =>{
        let items = [];
        c.items.map((field,index) => {
          items.push({
            com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ob84zg@${index}`}
                label={`${field.label}`}
                labelCol={{span: `${field.labelcol}`}}
                error={form.getError(field)}
                wrapperCol={{span: `${field.fieldcol}`}}>
                      <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rrqhxt@${index}`} fieldConfig={field} form={form} onChange={this.onChange.bind(this)}/>
                </WeaFormItem>),
            colSpan:1
          })
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@k6q0d5@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
      });
      return group;
    }
    render() {
      const { form } = demoStore;
      return (<div>
          {this.getSearchs()}
          <br/>
          <div className="align-center"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ju1ve7`} onClick={()=>{}}>打印数据</Button><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3g13h1`} onClick={()=> form.reset()}>重置</Button></div>
        </div>)
    }
};