<!-- 报告元数据文本输入类型组件 -->

<script setup lang="ts">
import type { ReportMetadataItem } from "@/types/report.types";
import type { PropType } from "vue";

const props = defineProps({
  data: {
    type: Object as PropType<ReportMetadataItem>,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "update:data", data: ReportMetadataItem): void;
}>();

function onNameChange(e: InputEvent) {
  change((e.target as HTMLInputElement).value, props.data.value);
}

function onValueChange(e: InputEvent) {
  change(props.data.name, (e.target as HTMLInputElement).value);
}

function change(name: string, value: string) {
  emits("update:data", { name, value, type: props.data.type });
}
</script>

<template>
  <a-row type="flex" style="align-items: center">
    <a-col class="name-wrap">
      <a-space>
        <a-input :value="data.name" @change="onNameChange" placeholder="字段名称" class="name" />
        <span>：</span>
      </a-space>
    </a-col>
    <a-col flex="1">
      <a-input :value="data.value" @change="onValueChange" placeholder="请输入字段值" class="value" />
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.name-wrap {
  width: 120px;

  .name {
    width: 100%
  }
}
.value {
  width: 100%;
}
</style>
