<template>
  <div class="toggle" @click="_toggle">
    <div class="icon-hide" v-if="isShow" :style="{background: channelInfo && channelInfo.screenDirection === 'vertical' ? `url(${defaultIcon}) no-repeat center 55%` : ''}"></div>
    <div class="icon-show" v-else :style="{background: channelInfo && channelInfo.screenDirection === 'vertical' ? `url(${defaultIcon}) no-repeat center 55%` : ''}"></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'suspension-toggle',
  props: {
    value: {}
  },
  data() {
    return {
      defaultIcon: require('./img/icon-hide.png')
    }
  },
  computed: {
     ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    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: var(--suspension-icon-show) no-repeat center 45%;
    // background-size: auto 50%;
    transform: rotate(180deg);
  }
  .icon-hide,
  .icon-show {
    width: 100%;
    height: 100%;
    background: var(--suspension-icon-hide) no-repeat center 55%;
    background-size: auto 50%;
  }
}
</style>
