<script lang="jsx">
import chooseTimePeriod from '@/components/base/chooseTimePeriod'
export default {
  name: 'CustomForm',
  components: { chooseTimePeriod },
  props: {
    formConfig: {
      type: Array,
      default: () => []
    },
    isCustomButton: {
      type: Boolean,
      default: true
    },
    isFlex: {
      type: Boolean,
      default: true
    },
    formLabelWidth: {
      type: String,
      default: 'auto'
    },
    formItemWidth: {
      type: String,
      default: null
    },

    value: {
      type: Object,
      default: () => {}
    }
  },
  computed: {},
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (Object.keys(newValue).length !== 0) {
          this.formData = newValue
        } else {
          this.initFormData()
        }
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(newValue) {
        this.$emit('input', newValue)
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      loading: false,
      formData: {},
      formColumns: []
    }
  },
  methods: {
    search() {
      this.$emit('searchFn', this.formData)
    },
    addDialog(obj) {
      this.$emit('addDialog')
    },
    handleSubmit(event) {
      event.preventDefault()
    },

    showToggle() {
      this.loading = !this.loading
    },
    validateForm() {
      return this.$refs.form.validate()
    },
    initFormData() {
      this.formConfig.forEach((el) => {
        switch (el.type) {
          case 'input':
            this.$set(this.formData, el.prop, '')
            break
          case 'select':
          case 'radio':
            this.$set(this.formData, el.prop, el.defaultValue || '')
            break
          default:
            // 如果有其他类型，可以在这里添加处理逻辑
            this.$set(this.formData, el.prop, '')
        }
      })
    },
    async resetFields() {
      await this.$refs.form?.resetFields()
    }
  },
  created() {
    // console.log(104, this.formData)
  },
  render() {
    return (
      <el-form
        class={this.isFlex ? 'formClass' : ''}
        ref="form"
        props={{
          model: this.formData
        }}
        size="mini"
        inline
        onSubmit={this.handleSubmit}
        onKeyupenterCapture={this.search}
        {...this.$attrs}>
        {this.formConfig?.map((item, index) => {
          if (
            typeof item.isShow === 'function' &&
            !item.isShow(this.formData)
          ) {
            return null
          }
          return (
            <el-form-item
              style={{
                width: item.type === 'textarea' ? '100%' : this.formItemWidth
              }}
              class={item.type === 'textarea' ? 'textClass' : ''}
              prop={item.prop}
              rules={
                (item.renderRules && item.renderRules(this.formData)) || []
              }
              label-width={item.labelWidth || this.formLabelWidth}
              key={index}
              label={item.name}>
              {item.type === 'input' && (
                <el-input
                  v-model={this.formData[item.prop]}
                  placeholder={item.placeholder || `请输入${item.name}`}
                  clearable></el-input>
              )}
              {item.type === 'inputNumber' && (
                <el-input-number
                  v-model={this.formData[item.prop]}
                  placeholder={item.placeholder || `请输入${item.name}`}
                  clearable
                  step={item.step || 1}
                  controls-position={item.position || 'right'}
                  style="width: 100%;"></el-input-number>
              )}
              {item.type === 'dateRange' && (
                <chooseTimePeriod
                  v-model={this.formData[item.prop]}></chooseTimePeriod>
              )}
              {item.type === 'textarea' && (
                <el-input
                  type="textarea"
                  v-model={this.formData[item.prop]}
                  placeholder={item.placeholder || `请输入${item.name}`}
                  clearable></el-input>
              )}
              {item.type === 'select' && (
                <el-select
                  v-model={this.formData[item.prop]}
                  placeholder={item.placeholder || `请选择${item.name}`}
                  clearable>
                  {item.options?.map((el, idx) => (
                    <el-option
                      label={el.label}
                      value={el.value}
                      key={idx}></el-option>
                  ))}
                </el-select>
              )}
              {item.type === 'datePicker' && (
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  type={item.dateType || 'date'}
                  placeholder="选择日期"
                  v-model={this.formData[item.prop]}
                  clearable
                  style="width: 100%;"></el-date-picker>
              )}
              {item.type === 'radio' &&
                item.radioOptions?.map((el, idx) => (
                  <el-radio
                    v-model={this.formData[item.prop]}
                    label={el.value}
                    key={idx}>
                    {el.label}
                  </el-radio>
                ))}
            </el-form-item>
          )
        })}
        {this.isCustomButton && (
          <el-form-item>
            <el-button
              type="primary"
              onClick={this.search}
              icon="el-icon-search">
              查询
            </el-button>
            <el-button type="success" onClick={this.addDialog}>
              新增
            </el-button>
          </el-form-item>
        )}
        {this.$slots.btn && (
          <el-form-item> {this.$scopedSlots.btn()} </el-form-item>
        )}
      </el-form>
    )
  }
}
</script>
<style lang="less" scoped>
.formClass {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-form-item {
    margin-right: 0;
    display: flex;
  }
}
.textClass {
  display: flex;
  ::v-deep.el-form-item {
    .el-form-item__content {
      width: 100%;
      flex: 1;
    }
  }
}
</style>
