<template>
    <v-form ref="form" v-model="valid" class="login-form">
        <div v-for="(item, index) in item.options" :key="`form-key-${index}`" class="d-flex position">
            <v-text-field
                v-if="['text', 'password'].includes(item.type) && !item.hide"
                :type="item.type"
                v-model="queryData[item.key]"
                :rules="item.rules"
                :disabled="item.disabled"
                :dense="item.dense"
                :style="{width: item.width}"
                :color="item.color"
                :label="item.label"
                :placeholder="item.placeholder || item.label"
                :outlined="item.outlined"
                :autofocus="item.autofocus"
                :required="item.required"
                :class="item.class"
                :append-icon="item.appendIcon"
                :clearable="item.clearable"
                :autocomplete="item.autocomplete"
                :prepend-inner-icon="item.prependInnerIcon"
                @keyup.enter.native="item.keyupEnterNative && item.keyupEnterNative(index)"
                @click:append="item.clickAppend && item.clickAppend(index)"
                @change="item.change && item.change(queryData)"
            />
            <template v-if="item.slotName">
                <slot :name="item.slotName"></slot>
            </template>
        </div>
        <slot></slot>
    </v-form>
</template>

<script>
export default {
  name: 'form-index',
  props: {
    item: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  data () {
    return {
      valid: false,
      queryData: {}
    }
  },
  created () {
    this.item.options.forEach(v => (this.queryData[v.key] = v?.value))
  }
}
</script>

<style lang="scss" scoped>
.position {
    position: relative;
}
</style>
