<template>
  <div class="toggle" @click="_toggle">
    <div class="icon-hide" v-if="isShow"></div>
    <div class="icon-show" v-else></div>
  </div>
</template>
<script>
export default {
  name: 'suspension-toggle',
  props: {
    value: {}
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  methods: {
    _toggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style lang="less" scoped>
.toggle {
  margin: 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--suspension-toggle-bg);
  border-radius: 100%;
  .icon-show {
    width: 100%;
    height: 100%;
    background: url(./img/icon-show.png) no-repeat center 45%;
    background-size: auto 50%;
  }
  .icon-hide {
    width: 100%;
    height: 100%;
    background: url(./img/icon-hide.png) no-repeat center 55%;
    background-size: auto 50%;
  }
}
</style>
