<template>
  <div class="group-tabs">
    <div class="toggle-btn-wrap">
      <MtToggleBtn :isSpread="false" @onClick="onToggle" />
    </div>
    <div class="group-tabs-main">
      <ul class="group-list">
        <li
          v-for="item in data"
          :key="item.id"
          :class="activeIndex === item.id ? 'active' : ''"
          @click="onChooseGroupItem(item)"
        >
          {{ item.group_name }}<span class="count" v-if="item.total">·{{ item.total }}</span>
        </li>
      </ul>
    </div>
    <div class="group-tabs-icon" @click="onClickGroupBtn" v-show="groupBtnVisible">
      <div class="settings">
        <div class="icon">
          <WlPic :src="require('@/assets/images/group-manage.png')" />
        </div>
      </div>
      <p class="group-tabs-icon-text">{{ text }}</p>
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-01-12 14:12:15
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import MtToggleBtn from "@packages/components/Material/MtToggleBtn/src/index.vue";
export default {
  name: "MtGroupTabs",
  components: { MtToggleBtn, WlPic },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    text: {
      type: String,
      default: "管理分组",
    },
    groupBtnVisible: {
      type: Boolean,
      default: false,
    },
    defaultActiveIndex: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      activeIndex: "",
    };
  },
  methods: {
    onClickGroupBtn() {
      this.$emit("onClickGroupBtn");
    },
    onToggle() {
      this.$emit("onToggle", false);
    },
    onChooseGroupItem(item) {
      this.activeIndex = item.id;
      this.$emit("onChange", item);
    },
    onReset() {
      this.activeIndex = "0";
    },
  },
  watch: {
    defaultActiveIndex: {
      handler(val) {
        this.activeIndex = val;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.group-tabs {
  height: 100%;
  @extend %flex-direction-column;
  .toggle-btn-wrap {
    padding: j(10) 0;
    @extend %flex-middle-center;
  }
  .group-tabs-main {
    flex: 1;
    @extend %overflow-auto;
    .group-list {
      font-size: j(12);
      font-weight: 500;
      @include halfBorder("bottom", #e3e3e3);
      li {
        color: #c1c1c1;
        cursor: pointer;
        text-align: center;
        padding: j(12) j(5);
        flex-direction: column;
        @include halfBorder("top", #e3e3e3);
        &.active {
          color: #0e0e0e;
          background-color: #fff;
        }
        .count {
          font-size: j(10);
        }
      }
    }
  }
  .group-tabs-icon {
    padding: j(15) 0;
    align-items: center;
    cursor: pointer;
    @include halfBorder("top", #e3e3e3);
    @extend %flex-direction-column;
    .settings {
      width: j(44);
      height: j(44);
      background-color: #fff;
      border-radius: 50%;
      @extend %flex-middle-center;
      .icon {
        width: j(18);
        height: j(18);
      }
    }
    &-text {
      color: #989898;
      font-size: j(12);
      margin-top: j(5);
    }
  }
}
</style>
