<template>
  <el-form-item label="内容：">
    <el-input
      type="textarea"
      @focus="$emit('inputIng', true)"
      @blur="$emit('inputIng', false)"
      :maxlength="500"
      style="width: 200px"
      v-model="text"
    >
      <template #append>
        <el-button type="primary" @click="$emit('blur')">确定</el-button>
      </template>
    </el-input>
  </el-form-item>

  <Label :shape="shape" @blur="emit('blur')" @delete="$emit('delete')">
    <template v-slot>
      <el-form-item label="字号：">
        <el-select v-model="fontSize" placeholder="选择字号" style="width: 200px">
          <el-option v-for="item in fontSizeOptions" v-bind="item" :key="item.value" />
        </el-select>
      </el-form-item>
    </template>
  </Label>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { BoardShape } from "../board";
import Label from "./label.vue";
import Del from "./delete.vue";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{
  (e: "delete"): void;
  (e: "blur"): void;
  (e: "inputIng", ing: boolean): void;
}>();

const fontSizeRange = [8, 30];
const fontSizeOptions: { value: number; label: string }[] = [];
for (let i = fontSizeRange[0]; i <= fontSizeRange[1]; i++) {
  fontSizeOptions.push({ value: i, label: i.toString() });
}

const text = ref(props.shape.data.text);
const fontSize = ref(props.shape.data.fontSize);
watchEffect(() => props.shape.setFontSize(fontSize.value));
watchEffect(() => props.shape.setText(text.value));
</script>
