<script lang="jsx">
import { defineComponent, h, useAttrs } from 'vue';
import { cloneDeep } from 'lodash';
import { makeMap } from './formConfig';
// import { WIDGET_IDS } from '@/views/pages/flowCreate/components/enum';
const isAttr = makeMap(
  'accept,accept-charset,accesskey,action,align,alt,async,autocomplete,' +
    'autofocus,autoplay,autosave,bgcolor,border,buffered,challenge,charset,' +
    'checked,cite,class,code,codebase,color,cols,colspan,content,http-equiv,' +
    'name,contenteditable,contextmenu,controls,coords,data,datetime,default,' +
    'defer,dir,dirname,disabled,download,draggable,dropzone,enctype,method,for,' +
    'form,formaction,headers,height,hidden,high,href,hreflang,http-equiv,' +
    'icon,id,ismap,itemprop,keytype,kind,label,lang,language,list,loop,low,' +
    'manifest,max,maxlength,media,method,GET,POST,min,multiple,email,file,' +
    'muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,' +
    'preload,radiogroup,readonly,rel,required,reversed,rows,rowspan,sandbox,' +
    'scope,scoped,seamless,selected,shape,size,type,text,password,sizes,span,' +
    'spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,' +
    'target,title,type,usemap,value,width,wrap',
);

function vModel(self, dataObject, defaultValue) {
  dataObject.props.value = defaultValue;

  dataObject.on.input = (val) => {
    self.$emit('input', val);
  };
}
const ComponentChild = defineComponent({
  props: ['tag', 'conf'],
  setup(props) {
    const $attrs = useAttrs();

    let formDom = null;
    switch (props.tag) {
      case 'el-input':
        formDom = () => <el-input v-model={props.conf.defaultValue}></el-input>;
        break;
      case 'displayText':
        formDom = () => <el-input v-model={props.conf.defaultValue}></el-input>;
        break;
      case 'el-button':
        formDom = () => <el-button {...$attrs} {...props.conf}></el-button>;
        break;
      case 'el-select':
        console.log('$attrs', $attrs);
        console.log('props.conf', props.conf);
        formDom = () => (
          <el-select {...$attrs}  multiple={props.conf.multiple} disabled={props.conf.disabled} v-model={props.conf.defaultValue}>
            {props.conf?.options?.map((item, index) => (
              <el-option key={index} label={item.label} value={item.value} disabled={item.disabled}></el-option>
            ))}
          </el-select>
        );
        break;
      case 'el-radio-group':
        formDom = () => (
          <el-radio-group v-model={props.conf.defaultValue}>
            {props.conf.options.map((item, index) =>
              props.conf.optionType === 'button' ? (
                <el-radio-button label={item.value}>{item.label}</el-radio-button>
              ) : (
                <el-radio key={index} value={item.value} border={props.conf.border}>
                  {item.label}
                </el-radio>
              ),
            )}
          </el-radio-group>
        );
        break;
      case 'el-checkbox':
        formDom = () => <el-checkbox v-model={props.conf.defaultValue} true-value="1" false-value="0"></el-checkbox>;
        break;
      case 'el-checkbox-group':
        formDom = () => (
          <el-checkbox-group v-model={props.conf.selectList}>
            {props.conf?.options?.map((item, index) => (
              <el-checkbox value={item.value} label={item.label} key={item.value}></el-checkbox>
            ))}
          </el-checkbox-group>
        );

        break;

      case 'el-input-number':
        formDom = () => (
          <el-input-number {...$attrs} {...props.conf} v-model={props.conf.defaultValue}></el-input-number>
        );
        break;
      case 'el-slider':
        formDom = () => <el-slider {...$attrs} {...props.conf} v-model={props.conf.defaultValue} />;
        break;
      case 'el-upload':
        formDom = () => (
          <el-upload {...$attrs} {...props.conf} show-file-list={false}>
            <el-input placeHolder="请选择文件上传"></el-input>
          </el-upload>
        );
        break;
      case 'solverName':
        formDom = () => <el-input readonly></el-input>;
        break;
      case 'script':
        formDom = () => <el-button type="primary">执行脚本</el-button>;
        break;

      default:
        break;
    }
    return formDom || <div></div>;
  },
});
const Render = defineComponent({
  setup(props, { emit }) {
    const $attrs = useAttrs();

    const confClone = cloneDeep($attrs.conf);

    return () => (
      <ComponentChild
        tag={$attrs.conf.tag}
        {...$attrs}
        onClick={(event) => {
          event.stopPropagation();
        }}
      ></ComponentChild>
    );
    // const childObjs = componentChild[confClone.tag];
    // if (childObjs) {
    //   Object.keys(childObjs).forEach((key) => {
    //     const childFunc = childObjs[key];
    //     if (confClone[key]) {
    //       children.push(childFunc(h, confClone, key));
    //     }
    //   });
    // }

    // Object.keys(confClone).forEach((key) => {
    //   const val = confClone[key];
    //   if (key === 'vModel') {
    //     dataObject.props.value = confClone.defaultValue;
    //     dataObject.on.input = (val) => {
    //       emit('input', val);
    //     };
    //   } else if (dataObject[key]) {
    //     dataObject[key] = val;
    //   } else if (!isAttr(key)) {
    //     dataObject.props[key] = val;
    //   } else {
    //     dataObject.attrs[key] = val;
    //   }
    // });

    return () => <el-button type={'primary'}>1234</el-button>;
  },
});
export default Render;
</script>
