<script>
export default {
  name: 'queryForm',
  components: {},
  props: {
    formConfig: {
      type: Array,
      default: () => []
    },
    isCustomButton: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    formColumns() {
      return [...this.formConfig]
    }
  },
  watch: {},
  data() {
    return {
      loading: false,
      formData: {}
    }
  },
  methods: {
    search() {
      console.log(25, this.formData)

      //   this.$emit('search', this.formData)
    },
    addDialog(obj) {
      this.$emit('addDialog')
    },
    handleSubmit(event) {
      event.preventDefault()
    },

    showToggle() {
      this.loading = !this.loading
    }
  },
  render() {
    // const { btnSlot } = this.$slots
    return (
      <el-form
        ref="form"
        props={{
          model: this.formData
        }}
        size="mini"
        inline
        onSubmit={this.handleSubmit}
        onKeyupenterCapture={this.search}>
        {this.formColumns?.map((item, index) => (
          <el-form-item key={index} label={item.name}>
            {item.type === 'input' && (
              <el-input
                v-model={this.formData[item.prop]}
                placeholder={item.placeholder || '请输入'}
                clearable></el-input>
            )}

            {item.type === 'select' && (
              <el-select
                v-model={this.formData[item.prop]}
                placeholder={item.placeholder || '请选择'}
                clearable>
                {item.options?.map((el, idx) => (
                  <el-option label={el} value={el} key={idx}>
                    {el}
                  </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>
            )}
          </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.isCustomButton}
      </el-form>
    )
  }
}
</script>
<style scoped></style>
