<template>
  <div class="clause-label">
    <Grid class="gird" :style="readonly ? { 'grid-template-rows': '1fr 1fr' } : {}" :gap="10" :cols="3">
      <GridItem class="gird-item" style="position: relative" :span="collapsed ? 3 : 2">
        <LabelContent
          :article-id="articleId"
          :readonly="readonly"
          :label-list="labelList"
          :attr-list="attrList"
          :content="detail.articleContent"
          @refresh-attr="loadAttr"
          @refresh-label="loadLabel"
        />
        <el-button type="primary" link class="search-isOpen collapsed" @click="collapsed = !collapsed">
          <el-icon v-show="collapsed"><ArrowLeft /></el-icon>
          {{ collapsed ? "展开" : "折叠" }}
          <el-icon v-show="!collapsed"><ArrowRight /></el-icon>
        </el-button>
      </GridItem>
      <GridItem class="gird-item" v-show="!collapsed" :span="!collapsed ? 1 : 0">
        <LabelView :readonly="readonly" :loading="loading1" :label-list="labelList" @refresh-label="loadLabel" />
      </GridItem>
      <GridItem v-if="readonly" class="gird-item" :span="3">
        <LabelInfo :annotation-status="detail.annotationStatus" :label-str-list="labelStrList" :attr-list="attrList" />
      </GridItem>
    </Grid>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, defineExpose, withDefaults } from "vue";
import { useRoute } from "vue-router";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import { DataAnno } from "@/api/interface/index";
import { geDetailtAttribute, getDetailLabel } from "@/api/modules/annotation/home";
import { getDetailPreLabel } from "@/api/modules/annotation/labeling";
import LabelContent from "./components/LabelContent.vue";
import LabelView from "./components/LabelView.vue";
import LabelInfo from "./components/LabelInfo.vue";

// props
interface Props {
  readonly: boolean;
  detailApi: (params: any) => Promise<any>;
}
const props = withDefaults(defineProps<Props>(), {
  readonly: () => true
});

const emit = defineEmits(["loadDetail"]);
const collapsed = ref(true);

// hooks
const route = useRoute();

// ref
const loading1 = ref(false);
const articleId = ref<number>(Number(route.query.id));
const attrList = ref<DataAnno.AttrList[]>([]);
const labelList = ref<DataAnno.LabelList[]>([]);
const labelStrList = ref<DataAnno.LabelStrList[]>([]);
const detail = ref({} as DataAnno.Detail);

// 加载详情
async function loadDetail() {
  const res = await props.detailApi({ id: articleId.value });
  detail.value = res.data;
  emit("loadDetail", detail.value);
}
loadDetail();

// 加载属性
async function loadAttr() {
  const res = await geDetailtAttribute({ id: articleId.value });
  attrList.value = res.data;
}
loadAttr();

// 加载标注标签
async function loadLabel() {
  const isEdit = !props.readonly;
  loading1.value = true;
  try {
    const api = isEdit ? getDetailPreLabel : getDetailLabel;
    const res = await api({ id: articleId.value });
    labelList.value = res.data.tagList || [];
    labelStrList.value = res.data.tagStrList || [];
  } finally {
    loading1.value = false;
  }
}
loadLabel();

defineExpose({
  refreshAll() {
    loadAttr();
    loadLabel();
  }
});
</script>

<style lang="scss" scoped>
.clause-label {
  width: 100%;
  height: 100%;
  .gird {
    height: 100%;
    .gird-item {
      height: 100%;
      overflow-y: auto;
      background: #ffffff;
    }
  }
}
.collapsed {
  position: absolute;
  top: 20%;
  right: 10px;
}
</style>
