<template>
  <div class="material-title">
    <div class="group-name-wrap" @click="onToggleGroup">
      <span>分组：</span>
      <p class="group-name">
        <span class="group-name-text">{{ group_name }}</span>
        <span class="arrow-icon"></span>
      </p>
      <span v-if="(total || total == 0)">·{{ total }}</span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "MaterialTitle",
};
</script>

<script setup lang="ts">
/**
 * 物料的标题，包括选择和计数
 */

type Props = {
  group_name: string;
  total: string | number;
};
withDefaults(defineProps<Props>(), {
  group_name: "全部",
  total: "0",
});

const emit = defineEmits<{
  (e: "onToggleGroup");
}>();

const onToggleGroup = () => {
  emit("onToggleGroup")
};
</script>

<style lang="scss" scoped>
.material-title {
  width: 100%;
  cursor: pointer;
  @extend %flex-middle-center;

  .group-name-wrap {
    flex: 1;
    @extend %flex-middle;

    .group-name {
      @extend %flex-middle;
      padding: j(4) j(8);
      border-radius: j(5);
      border: j(1) solid #eee;
      margin-right: j(5);

      .group-name-text {
        display: inline-block;
        @include textEllipsis(1);
      }

      .arrow-icon {
        margin-left: j(6);
        @include arrow("down", var(--wl-text-color-secondary-2));
      }
    }
  }
}
</style>
