<template>
  <div 
    class="bgo-form-item"
    :class="{'is-disabled': disabled, 'is-readonly': readonly}">
    <div class="bgo-form-item__content">
      <div class="bgo-form-item__field">
        <div
          class="bgo-form-item__field__label"
          :class="{ 'is-required': required }">
          <slot name="label">
            {{ label }}
          </slot>
        </div>
        <div class="bgo-form-item__field__value">
          <slot></slot>
        </div>
      </div>
      <div
        class="bgo-form-item__right-icon">
        <slot name="right-icon">
          <bgo-font-icon
            v-if="role === 'select' && !readonly && !disabled" 
            type="vant"
            icon="arrow"
            color="#BFC1C2" />
        </slot>
      </div>
    </div>

    <div
      v-if="tip && !readonly && !disabled"
      class="bgo-form-item__tip">
      <slot name="tip">
        <div>{{ tip }}</div>
      </slot>
    </div>
  </div>
</template>

<script>
import BgoFontIcon from "../../FontIcon/src/index";

export default {
  name: "BgoFormItem",
  components: { BgoFontIcon },
  props: {
    label: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    role: {
      type: String,
      default: "text",
      validator(value) {
        return ["text", "select"].indexOf(value) !== -1;
      },
    },
    tip: {
      type: String,
    }
  },
};
</script>

<style lang="scss">
@import "./index";
@import "../../style/state.scss";
</style>
