<template>
  <div class="label-info">
    <yx-title>
      当前状态：
      <template #remark>
        <el-tag size="large">
          {{ AnnoStatus.getLabelByValue(annotationStatus) }}
        </el-tag>
      </template>
    </yx-title>
    <yx-title class="mt40">条文属性</yx-title>
    <div class="collapsed_div">
      <el-button type="primary" link class="search-isOpen collapsed" @click="collapsed = !collapsed">
        <el-icon v-show="!collapsed"><ArrowUp /></el-icon>
        {{ !collapsed ? "展开" : "折叠" }}
        <el-icon v-show="collapsed"><ArrowDown /></el-icon>
      </el-button>
    </div>
    <SimpleTable v-show="collapsed" class="mt20" :data="attrInfo" />
    <yx-title class="mt40">命名标签</yx-title>
    <SimpleTable class="mt20" :data="labelInfo" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, computed, ref } from "vue";
import { AnnoStatus } from "@/enums";
import { DataAnno } from "@/api/interface/index";
import SimpleTable from "./SimpleTable.vue";

interface Props {
  annotationStatus: number;
  labelStrList: DataAnno.LabelStrList[];
  attrList: DataAnno.AttrList[];
}
const props = withDefaults(defineProps<Props>(), {
  readonly: () => true,
  labelStrList: () => [],
  attrList: () => []
});
const collapsed = ref<boolean>(false);
const attrInfo = computed(() => {
  return props.attrList.map(item => {
    return {
      label: item.parentName,
      value: item.attributeNameStr
    };
  });
});

const labelInfo = computed(() => {
  return props.labelStrList.map(item => {
    return {
      label: item.articleTagName,
      value: item.keyWordStr
    };
  });
});
</script>

<style lang="scss" scoped>
.label-info {
  padding: 30px 20px;
}
.collapsed_div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .collapsed :deep(span) {
    display: flex;
    flex-direction: column;
  }
}
</style>
