<template>
  <div class="sv-switch" @click="active = !active" :class="{'is-active': active, 'sv-switch-small': size === 'small', 'sv-switch-large': size === 'large'}">
    <div class="sv-switch-inner">
      <div class="sv-switch-inner__open">
        <slot name="open"></slot>
      </div>
      <div class="sv-switch-inner__close">
        <slot name="close"></slot>
      </div>
    </div>
    <div class="sv-switch-handle"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svSwitch',
    data () {
      return {
        active: false
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      size: String
    },
    watch: {
      active (val) {
        this.$emit('input', val)
      },
      value (val) {
        this.active = val
      }
    },
    created () {
      if (this.value) {
        this.active = true
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-switch{
    position: relative;
    display: flex;
    align-items: center;
    width: pxToRem(120);
    height: pxToRem(60);
    border: pxToRem(4) solid #ccc;
    border-radius: pxToRem(40);
    background: $color-light;
    &.sv-switch-small{
      width: pxToRem(100);
    }
    &.sv-switch-large{
      width: pxToRem(140);
    }
    &.is-active{
      background: $color-success;
      border-color: $color-success;
      .sv-switch-inner{
        /*background: transparent;*/
        transform: scale(0);
      }
      .sv-switch-handle{
        left: 100%;
        transform: translateX(-100%);
      }
    }
    .sv-switch-inner{
      display: flex;
      flex: 1;
      width: 100%;
      height: 100%;
      border-radius: pxToRem(40);
      background: $color-light;
      transition: all .2s ease-in-out;
      .sv-switch-inner__open, .sv-switch-inner__close{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
      .sv-switch-inner__open{
        color: $color-light;
      }
      .sv-switch-inner__close{
        color: #999;
      }
    }
    .sv-switch-handle{
      position: absolute;
      top: pxToRem(-2);
      left: 0;
      width: pxToRem(56);
      height: pxToRem(56);
      border-radius: 50%;
      box-shadow: pxToRem(4 4 8) rgba(111, 111, 111, .6);
      background: $color-light;

      transition: all .3s ease-out;
    }
  }
</style>
