import input from './control/Input';
import textarea from './control/textArea';
import radio from './control/Radio';
import select from './control/select';
import selectMutiple from './control/selectMutiple';
import date from './control/date';
import dateRange from './control/dateRange';
import image from './control/image';
import explainText from './control/explainText';
import department from './control/department';
import showDetail from './control/showDetail';
import Detail from './control/detail';
import './control/render.css';
// import inputWid from '../widget/input';

const form_item = {
  input,
  radio,
  select,
  date,
  textarea,
  selectMutiple,
  dateRange,
  image,
  explainText,
  department,
  showDetail,
  Detail
  // inputWid
};

export default {
  name: 'renders',
  // components: {
  //     inputWid: inputWid
  // },
  // render(h) {
  //     return h('el-form-item', {
  //         props: {
  //             label: this.obj.label + "："
  //         }
  //     }, [h(this.c)])
  //         // }, form_item[this.ele](this, h));
  //         // },[inputWid])
  // },
  render(h) {
    console.log(this.obj);
    const InnerComponent = form_item[this.ele];
    // if (this.obj.required === 1) {
    //   console.log('ss')
    //   this.obj.required = true
    // } else {
    //   this.obj.required = false
    // }
    // console.log(this.obj.required);
    if (this.ele === 'explainText') {
      return (
        <div class={'disFlex'} onClick:stop={($event) => {
          this.$emit('ShowFormInner', this.index, this.obj,this.parentIndex);
          if ($event) $event.preventDefault();
        }}>
          <InnerComponent obj={this.obj}/>
          <i class='el-icon-close deleteIcon' vOn:click={() => {
            this.$emit('handleRemoveEle', this.index);
          }}></i>
        </div>
      );
    } else {
      return (
        <div class={['disFlex']} onClick:stop={($event) => {
          this.$emit('ShowFormInner', this.index, this.obj,this.parentIndex);
          if ($event) $event.preventDefault();
        }}>
          <InnerComponent obj={this.obj}/>
          <i class='el-icon-close deleteIcon' vOn:click={() => {
            this.$emit('handleRemoveEle', this.index);
            return false;
          }}></i>
        </div>
      );
    }
  },
  props: {
    ele: {
      type: String,
      default: 'input'
    },
    obj: {
      type: Object,
      default: {}
    },
    index: {
      type: Number,
      default: 0
    },
    parentIndex: {
      type: Number,
      default: 0
    },
  },
  mounted() {
  }
};

//

// function Renders({ c, data }) {
//     const C = c;
//     return <C {...data} />
// }

// <el-form-item label={this.obj.fieldNm} required={this.obj.required == 1} style="width:100%;margin-bottom:10px!important">
  // <InnerComponent obj={this.obj}/>
// </el-form-item>
