<template>
  <div id="spanInfo" class="marginTop">
    <div class="left">
      <p class="infoTitle">{{ $t('STORE_SPAN_INFO') }}</p>
    </div>
    <div id="spanContent">
      <template v-for="item in span.data" :key="item[0]">
        <div v-if="item" class="row">
          <p class="rowLeft">{{ $t(item[0]) }}</p>
          <p class="rowRight">{{ $t(item[1]) }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { factorySpan } from './span.service';
import { StorageTree, Span, SpanNode } from '../../models';
import { onMounted } from '@vue/runtime-core';
import { reactive } from 'vue';
import { traduction } from '@/utils/language';
const span = reactive({ data: {} });
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  node: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
});

onMounted(() => {
  StorageTree.getInstance().checkedNode(props.node.labelId, props.node.getRaidIndex);
  const spanNode = StorageTree.getInstance().getCheckedNode as SpanNode;
  if (spanNode.getSpan) {
    span.data = spanNode.getSpan;
  } else {
    factoryFun(spanNode);
  }
});
function factoryFun(spanNode: SpanNode) {
  return factorySpan(spanNode).then(
    (node: Span) => {
      span.data = node;
      spanNode.setSpan = node;
    },
    () => { },
  );
}
defineExpose({
  factoryFun,
});

</script>

<style lang="scss" scoped>
#spanInfo {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  margin-top: 8px;
  padding: 16px;
  display: flex;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 72px;
    border-right: 1px solid var(--o-border-color-light);
    width: 183px;
  }
  #spanContent {
    flex: 1;
    .row {
      width: 50%;
      float: left;
      padding: 8px 0;
    }
    .rowLeft {
      width: 35%;
      display: inline-block;
      font-size: 12px;
      color: var(--o-text-color-secondary);
    }
    .rowRight {
      width: 65%;
      display: inline-block;
      font-size: 12px;
      color: var(--o-text-color-secondary);
    }
  }
}
</style>
