<script lang="tsx">
  import { PropType, ref } from 'vue';
  import { defineComponent } from 'vue';
  import type { FormSchema } from '../types/form';
  import { componentMap } from '../componentMap';
  import { CommonInfoType } from '/@/components/Designer';
  //查询为inputNumber的组件
  const inputNumberComponents = ['Slider', 'Computation', 'MoneyChineseInput'];

  const remoteComponents = [
    'XjrSelect',
    'AssociateSelect',
    'MultiplePopup',
    'MultiplePopup',
    'ApiRadioGroup',
    'ApiCheckboxGroup',
  ];
  const MyFormItem = defineComponent({
    name: 'SearchFormItem',
    inheritAttrs: false,
    props: {
      schema: {
        type: Object as PropType<FormSchema>,
        default: () => ({}),
        /*
        {
        component: "Input"
        field: "duo_xing_wen_ben4404"
        label: "多行文本",
        componentProps:{}
        }
        */
      },
      value: [Array, Object, String, Number],
    },
    emits: ['change'],
    setup(props, { emit }) {
      const myFormModalValue = ref(props.value);
      function emitChange() {
        emit('change', myFormModalValue.value);
      }

      function renderComponent() {
        const { component, componentProps } = props.schema;
        let tempComponent = component;
        let tempComponentProps = {};
        emitChange();
        if (tempComponent == 'AutoCodeRule') {
          tempComponent = 'Input';
        } else if (inputNumberComponents.includes(tempComponent)) {
          tempComponent = 'InputNumber';
        } else if (tempComponent == 'DatePicker') {
          tempComponent = 'RangePicker';
        } else if (tempComponent == 'TimePicker') {
          tempComponent = 'TimeRangePicker';
        } else if (remoteComponents.includes(tempComponent)) {
          tempComponent = 'XjrSelect';
          tempComponentProps = {
            labelField: componentProps.labelField,
            valueField: componentProps.valueField,
            mode: 'multiple',
            defaultValue: [],
          };
        } else if (tempComponent == 'Switch') {
          tempComponent = 'Select';
          tempComponentProps = {
            options: [
              { label: '开', value: 1 },
              { label: '关', value: 0 },
            ],
            defaultValue: 1,
          };
          myFormModalValue.value = 1;
        } else if (tempComponent == 'Info') {
          if (componentProps) {
            //当前用户
            if (componentProps.infoType === CommonInfoType.USER_NAME) {
              tempComponent = 'User';
            }

            //当前部门
            else if (
              componentProps.infoType === CommonInfoType.DEPT_NAME ||
              componentProps.infoType === CommonInfoType.DEPT_ID
            ) {
              tempComponent = 'Dept';
            }

            //当前时间
            else if (componentProps.infoType === CommonInfoType.TIME) {
              tempComponent = 'DatePicker';
            }
            //当前登录人角色
            else if (componentProps.infoType === CommonInfoType.ROLE_NAME) {
              tempComponent = 'Role';
            } else {
              tempComponent = 'Input';
            }
          } else {
            tempComponent = 'Input';
          }
        }
        const Comp = componentMap.get(tempComponent) as ReturnType<typeof defineComponent>;

        const propsData = {
          allowClear: true,
          class: tempComponent == 'Input' ? 'ant-input-box' : '',
          ...componentProps,
          ...tempComponentProps,
          style: 'width:100%',
          value: myFormModalValue.value,
          disabled: false,
        };
        let on = {};

        // if (tempComponent == 'Input' || tempComponent == 'InputTextArea') {
        //   on = {
        //     onChange: (e) => {
        //       myFormModalValue.value = e.target.value;
        //       emitChange();
        //     },
        //   };
        // } else {
        // on = {
        //   onChange: (val) => {
        //     myFormModalValue.value = val;
        //     emitChange();
        //   },
        // };
        // }
        const compAttr = {
          ...propsData,
        };

        return (
          <Comp
            {...compAttr}
            {...on}
            onUpdate:value={(newValue) => {
              myFormModalValue.value = newValue;
              emitChange();
            }}
          />
        );
      }

      return () => {
        return renderComponent();
      };
    },
  });

  export default MyFormItem;
</script>
<style lang="less" scoped>
  :deep(.ant-select) {
    width: 100%;
  }
</style>
