<template>
  <div class="sv-radio-group" :class="[{'is-list': type === 'list', 'is-right': align === 'right'}, colorClass]">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svRadioGroup',
    props: {
      value: [String, Number, Boolean],
      type: String,
      align: {
        type: String,
        default: 'left'
      },
      color: String
    },
    data () {
      return {
        radioGroupValue: this.value
      }
    },
    computed: {
      colorClass () {
        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-radio-group--${this.color}`
        }
        return ''
      }
    },
    watch: {
      value (val) {
        this.radioGroupValue = val
      },
      radioGroupValue (val) {
        this.setValueToChildren()
        this.$emit('input', val)
        this.$emit('change', val)
      }
    },
    methods: {
      setValueToChildren () {
        this.$children.forEach(child => {
          child.radioGroupValue = this.radioGroupValue
        })
      }
    },
    mounted () {
      this.setValueToChildren()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-radio-group{
    display: inline-block;
    font-size: 0;
    &.is-list{
      display: block;
      @include border-1px(top bottom, $item-border-color);
      .sv-radio{
        display: flex;
        width: 100%;
        padding:pxToRem(24 30);
        &:not(:last-child){
          @include border-1px(bottom, $item-border-color);
        }
        &+.sv-radio{
          margin-left: 0;
        }
      }
      &.is-right{
        .sv-radio {
          flex-direction: row-reverse;
        }
      }
    }
    .sv-radio{
      display: inline-flex;
      white-space: nowrap;
      align-items: center;
      font-size: 0;
      line-height: 1;
      &+.sv-radio{
        margin-left: pxToRem(28);
      }
      &.disabled{
        .sv-radio-icon{
          background-color: #d9d9d9;
          border-color: #ccc;
        }
        .sv-radio-label{
          color: #999;
        }
      }
      .sv-radio-icon{
        position: relative;
        width: pxToRem(24);
        height: pxToRem(24);
        border-radius: 100%;
        border: pxToRem(2) solid $color-success;
        &.active{
          &::after{
            content: '';
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            width: pxToRem(14);
            height: pxToRem(14);
            border-radius: 100%;
            background: $color-success;
          }
        }
      }
      .sv-radio-label{
        flex: 1;
        margin-left: pxToRem(10);
        font-size: pxToRem(28);
        color:#333;
      }
    }
    &.sv-radio-group--lively{
      .sv-radio-icon{
        border-color: $color-lively;
        &.active{
          &::after{
            background: $color-lively;
          }
        }
      }
    }
  }
</style>
