<template>
  <label :class="['app-radio', { slider: isSlider }]" @click="$emit('change', v_value)">
    <input
      class="app-radio-input"
      type="radio"
      :value="value"
      :name="name"
      :checked="v_value === value"
    />
    <span class="app-radio-label">{{ label }}</span>
    <span v-if="!isSlider" class="app-radio-mark">
      <div class="app-icon-radio"></div>
    </span>
  </label>
</template>

<script>
export default {
  name: "app-radio-button",
  props: {
    isSlider: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    v_value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
  },
  computed: {
    // radioButtonValue: {
    //   get: function () {
    //     return this.v_value;
    //   },
    //   set: function () {
    //     this.$emit("change", this.v_value);
    //   },
    // },
  },
};
</script>

<style lang="sass" scoped>

@import "../../assets/_vars"

.app-radio
  display: block
  position: relative
  padding-left: 24px
  margin-bottom: 6px
  cursor: pointer
  user-select: none
  font-size: 14px
  line-height: 16px
  &-label
    color: $gray3
  input
    position: absolute
    opacity: 0
    cursor: pointer
    height: 0
    width: 0
    &:checked
      & ~ .app-radio-mark
        .app-icon-radio
          opacity: 1
  &:hover
    input
      & ~ .checkmark
        border: 1px solid $green1
  &.slider
    display: inline-flex
    padding: 4px
    background: $gray4
    &:first-child
      border-radius: 4px 0px 0px 4px
    &:last-child
      border-radius: 0px 4px 4px 0px
    .app-radio-label
      display: inline-block
      padding: 4px 8px
      transition: all 00.3s ease
    input
      position: absolute
      opacity: 0
      cursor: pointer
      height: 0
      width: 0
      &:checked
        & ~ .app-radio-label
          background: white
          border-radius: 3px
  &-mark
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    top: 0
    left: 0
    height: 16px
    width: 16px
    border-radius: 50%
    background-color: white
    border: 1px solid $gray5
    transition: all 00.3s ease
    .app-icon-radio
      opacity: 0
.app-icon-radio
  width: 8px
  height: 8px
  border-radius: 50%
  background: $green1
</style>