<template>
  <div class="toggle-btn" @click="onClick">
    <p class="btn-text">{{ isSpread ? "展开" : "收起" }}分组</p>
    <div :class="`btn-icon ${isSpread ? 'spread' : ''}`">
      <WlPic :src="require('@/assets/images/double-arrow.png')" />
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli 
 * @Date: 2021-09-18 11:19:49 
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-10-13 15:40:33
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "MtToggleBtn",
  components: { WlPic },
  props: {
    isSpread: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onClick() {
      this.$emit("onClick", !this.isSpread);
    },
  },
};
</script>

<style lang="scss" scoped>
.toggle-btn {
  width: j(80);
  height: j(28);
  background-color: #ffffff;
  border: j(1) solid #eeeeee;
  border-radius: j(5);
  @extend %flex-middle-center;
  @include btnClick();
  .btn-text {
    font-size: j(12);
    color: #989898;
  }
  .btn-icon {
    width: j(14);
    height: j(14);
    &.spread {
      transform: rotate(180deg);
    }
  }
}
</style>
