<script lang="ts" setup>
/**
 * @Name: MainAttr.vue
 * @Description: 产品种类-主属性插槽
 * @Author: Cheney
 */

import XEUtils from 'xe-utils';


const props = defineProps({
  attrs: {
    required: true,
    type: Array
  }
});

const groupedAttrs = computed(() => {
  const retData: Array<any> = [];
  if (props.attrs.length === 0) {
    return retData;
  }
  const info = XEUtils.groupBy(props.attrs, 'section');  // 使用 XEUtils 的 groupBy 方法将 props.attrs 中的元素根据 'section' 属性进行分组
  const sortedKey = XEUtils.sortBy(Object.keys(info), 'asc'); // 或 'desc'
  for (const section of sortedKey) {
    const attrItems = XEUtils.sortBy(info[section], 'order');
    retData.push({
      section: section,
      items: attrItems
    });
  }
  return retData;
});
</script>

<template>
  <div>
    <template v-for="info of groupedAttrs">
      <div v-for="item of info.items" :key="item.id" style="display: inline;">
        <!--<el-tooltip effect="dark" :content="item.description" placement="top-start" :disabled="!item.description">-->
        <el-tag
            :key="item.id"
            :type="item.description? 'warning': ''"
            disable-transitions
            effect="plain"
            round
            size="small"
            class="ml-1"
        >
          {{ item.attr.name }}
        </el-tag>
        <!--</el-tooltip>-->
      </div>
      <div class="line-separator ml-1"></div>
    </template>
  </div>

</template>

<style scoped>
.line-separator:last-of-type {
  display: none;
}
</style>
