<style lang="less">
 .box{
    position: relative;
    height: 56rpx;
    width: 232rpx;
    border-radius: 42rpx;
    background: #F1F4F6;
    cursor: pointer;
    transition: background-color 0.3s;
    .bg_box{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #626C78;
    
    }
    .btn{
        width:116rpx;
        position: absolute;
        height: 56rpx;
        top: 0px;
        border-radius: 42rpx;
        padding: 8rpx 16rpx;
        border: 2rpx solid #E1E5EB;
        border-radius: 42rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        color: #424C59;
        transition: all .3s;
        &.rt{
            right: 0px;
        }
    }
 }
</style>

<template>
    <div class="box" @click="handleChange">
        <div class="btn" style="{{'left:'+left+';'   }}">
            <div style="width: 84rpx;">
            {{value?'总控制':'子设备'}}
        </div></div>
        <div class="bg_box">
            <span>总控制</span>
            <span>子设备</span>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core';

wepy.component({
  data: {
    left: '0px',
    value: true
  },
  props: {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort();
      } else {
        wx.vibrateLong();
      }
    },
    handleChange() {
      this.value = !this.value;
      this.vibrateShort();
      if (this.value) {
        this.left = '0px'
      } else {
        this.left = '50%'
      }
      this.$emit('commponent-SwitchLR-change', this.value)
    }
  }
});
</script>
