<script>
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) => (
          <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 === '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>
