<template>
    <div :class="[$style.switch,$style[page.type],{[$style.checked]:value,[$style.disabled]:disabled}]"
         :style="style" @click="click">
        <template v-if="!this.image||!this.image.length">
            <div :style="{backgroundColor:color[0]}"></div>
            <div></div>
        </template>
    </div>
</template>

<style module>
    .switch {
        position: relative;
        display: inline-block;
        width: 1.35rem;
        height: .8rem;
        background: #dfdfdf center / contain no-repeat;
        background-origin: border-box;
        border: .03rem solid transparent;
        border-radius: .43rem / 50%;
        transition: background .35s;
    }

    .switch > :first-child {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: .4rem / 50%;
        transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1);
    }

    .switch > :last-child {
        position: absolute;
        right: 100%;
        top: 0;
        bottom: 0;
        transform: translateX(100%);
        width: .8rem;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 .03rem .09rem rgba(0, 0, 0, 0.4);
        transition: .35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        transition-property: right, transform;
    }

    .checked > :first-child {
        transform: scale(0);
    }

    .checked > :last-child {
        right: 0;
        transform: none;
    }

    .disabled {
        opacity: .6;
    }

    /*pc样式*/
    .pc {
        width: 50px;
        height: 30px;
        border-width: 1px;
        border-radius: 16px / 50%;
    }

    .pc > :first-child {
        border-radius: 15px / 50%;
    }

    .pc > :last-child {
        width: 30px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
</style>

<script>
  import mixinType from '../../mixins/type'

  export default {
    name: 'vswitch',
    inheritAttrs: false,
    mixins: [mixinType],
    props: {
      value: {
        type: Boolean,
        default: false
      },
      color: { // 背景色
        type: Array,
        default () {
          return ['#fff', '#ffe26d']
        }
      },
      image: { // 背景图片
        type: Array,
        default () {
          return []
        }
      },
      disabled: {
        type: Boolean,
        default: false
      },
      prevent: { // 是否阻止自动切换
        type: Boolean,
        default: false
      }
    },
    computed: {
      $style () {
        return this.$options.cssModules
      },
      style () {
        if (this.image && this.image.length) { // 优先使用背景图
          return {
            backgroundColor: 'transparent',
            backgroundImage: `url(${this.image[this.value ? 1 : 0]})`
          }
        } else {
          return this.value ? {
            backgroundColor: this.color[1]
          } : {}
        }
      }
    },
    watch: {
      value (value) {
        this.$emit('change', value)
      }
    },
    methods: {
      click () {
        if (!this.disabled) {
          this.$emit('click', this.value)
          !this.prevent && this.$emit('input', !this.value)
        }
      }
    }
  }
</script>