<template>
  <label class="co-switch">
    <input class="co-switch-input" @change="$emit('change', currentValue)" type="checkbox" v-model="currentValue">
    <span class="co-switch-core"></span>
    <div class="co-switch-label"><slot></slot></div>
  </label>
</template>

<script>
/**
 * co-switch
 * @module components/switch
 * @desc 切换按钮
 * @param {boolean} [value] - 绑定值，支持双向绑定
 * @param {slot} - 显示内容
 *
 * @example
 * <co-switch v-model="value"></co-switch>
 */
export default {
  name: 'co-switch',

  props: {
    value: Boolean
  },
  computed: {
    currentValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
};
</script>

<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component switch {
      display: flex;
      align-items: center;
      position: relative;

      * {
        pointer-events: none;
      }

      @descendent label {
        margin-left: 0.5rem;
        display: inline-block;

        &:empty {
          margin-left: 0;
        }
      }

      @descendent core {
        display: inline-block;
        position: relative;
        size: 2.6rem 1.6rem;
        border: 0.05rem solid $color-grey;
        border-radius: 0.8rem;
        box-sizing: border-box;
        background: $color-grey;

        &::after, &::before {
          content: " ";
          position: absolute 0 * * 0;
          transition:transform .3s;
          border-radius: 0.75rem;
        }

        &::after {
          size: 1.5rem;
          background-color: $color-white;
          box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, .4);
        }

        &::before {
          size: 2.5rem 1.5rem;
          background-color: #fdfdfd;
        }
      }

      @descendent input {
        display: none;

        &:checked {
          + .co-switch-core {
            border-color: $color-blue;
            background-color: $color-blue;

            &::before {
              transform: scale(0);
            }

            &::after {
              transform: translateX(20px);
            }
          }
        }
      }
    }
  }
</style>
