<template>
  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']">
    <Icon :type="icon" :size="size" />
  </a>
</template>
<script>
export default {
  name: 'SideTrigger',
  props: {
    collapsed: Boolean,
    icon: {
      type: String,
      default: 'navicon-round'
    },
    size: {
      type: Number,
      default: 30
    }
  },
  mounted () {
    let _this = this
    if (window.innerWidth && window.innerWidth < 1200) {
      _this.$emit('on-change', true)
    }
    window.addEventListener('resize', function() {
      if (window.innerWidth && window.innerWidth < 1200) {
        _this.$emit('on-change', true)
      }
    })
  },
  methods: {
    handleChange () {
      this.$emit('on-change', !this.collapsed)
    }
  }
}
</script>
<style lang="less" scoped>
.trans {
  transition: transform 0.2s ease;
}
@size: 40px;
.sider-trigger-a {
  padding: 6px;
  width: @size;
  height: @size;
  display: inline-block;
  text-align: center;
  color: #000;
  margin-top: 5px;
  i {
    .trans;
    vertical-align: top;
  }
  &.collapsed i {
    transform: rotateZ(90deg);
    .trans;
  }
}
</style>
