<template>
  <div class="sv-form-item" :class="{'no-border': noBorder, 'label-stack': labelType === 'stack'}" @click="handleClick">
    <label class="sv-form-item__label" :class="labelColorClass" :style="labelStyles" v-if="!hideLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <div class="sv-form-item__control" :class="{'is-inline': inline}">
      <slot></slot>
    </div>

    <template v-if="!labelType">
      <div class="sv-form-item__value">
        <slot name="value"></slot>
      </div>
      <!-- arrow -->
      <div class="sv-form-item__arrow" v-if="isLink">
        <sv-icon icon="arrow-right" color="c0c0c0"></sv-icon>
      </div>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import v from '../../scripts/var'
  export default {
    name: 'svFormItem',
    data () {
      return {
        labelWidthValue: 0,
        labelStyle: {}
      }
    },
    props: {
      label: String,
      isLink: {
        type: Boolean,
        default: false
      },
      inline: {
        type: Boolean,
        default: false
      },
      noBorder: {
        type: Boolean,
        default: false
      },
      hideLabel: {
        type: Boolean,
        default: false
      },
      labelWidth: [String, Number],
      labelType: {
        type: String,
        default: ''
      },
      labelColor: {
        type: String,
        default: ''
      }
    },
    computed: {
      labelStyles () {
        if (this.labelWidthValue) {
          this.labelStyle['width'] = `${this.labelWidthValue / v.getDesignDraftHtmlFontSize()}rem`
        }
        return this.labelStyle
      },
      labelColorClass () {
        let colorsObject = {
          light: 'light',
          stable: 'stable',
          primary: 'primary',
          info: 'info',
          danger: 'danger',
          success: 'success',
          warning: 'warning',
          lively: 'lively',
          royal: 'royal'
        }

        if (colorsObject[this.color]) {
          return `sv-font-${this.color}`
        } else {
          this.$set(this.labelStyle, 'color', this.color)
        }
      }
    },
    methods: {
      getFormComponent (component) {
        if (!component || !component.$vnode.componentOptions.tag.match('sv-form')) {
          return null
        }
        if (component.$vnode.componentOptions.tag === 'sv-form') {
          return component
        } else {
          return this.getFormComponent(component.$parent)
        }
      },
      handleClick (event) {
        this.$emit('click', event)
      }
    },
    mounted () {
      let $form = this.getFormComponent(this)
      this.labelWidthValue = this.labelWidth ? this.labelWidth : $form.labelWidth
      if (this.labelColor) {
        this.labelStyle['color'] = this.labelColor
      } else if ($form.labelColor) {
        this.labelStyle['color'] = $form.labelColor
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-form{
    .sv-form-item{
      display: flex;
      justify-content: space-around;
      align-items: center;
      min-height: pxToRem($item-height);
      padding: pxToRem(0 30);
      background: $color-light;
      &:not(.no-border){
        @include border-1px(bottom, $item-border-color);
      }
      &.label-stack{
        display: block;
        padding: pxToRem(20 30);
        .sv-form-item__control{
          margin-top: pxToRem(20);
          .sv-input-wrapper{
            padding: 0;
          }
        }
      }
      .sv-form-item__label{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        color: $form-label-color;
        font-size: pxToRem($form-label-font-size);
      }
      .sv-form-item__control{
        flex: 1;
        &.is-inline{
          display: flex;
          align-items: center;
          .sv-input-wrapper{
            width: auto;
          }
        }
        .sv-input-wrapper{
          border: none;
        }
      }
      .sv-form-item__value{
        display: flex;
        align-items: center;
      }
      .sv-form-item__arrow{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: pxToRem(30);
        color:#c3c3c3;
      }
    }
  }
</style>
