<script setup lang="ts">
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';

defineOptions({ name: 'Other' });

const lf: any = inject('lf');
const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();

const form = reactive({
  documentation: '',
});

const elementInfo = computed(() => {
  return elementsInfoStore.getElementById(selectedInfoStore.selectId) || {};
});

watch(elementInfo, (val) => {
  form.documentation = val.otherInfo?.documentation || '';
}, { immediate: true });

watch(() => form.documentation, (newVal) => {
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    otherInfo: {
      documentation: newVal,
    },
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    documentation: newVal,
  });
});
</script>

<template>
  <a-form
    :model="form"
    name="basic"
    :label-col="{ span: 4 }"
    autocomplete="off"
  >
    <a-form-item
      label="元素文档"
      name="documentation"
    >
      <a-textarea v-model:value="form.documentation" show-count :maxlength="300" />
    </a-form-item>
  </a-form>
</template>
