<template>
  <div class="def-shape-edit">
    <el-icon class="def-close-shape-edit" @click="emit('update:shape', null)">
      <Close />
    </el-icon>
    <el-form inline>
      <el-form-item label="内容：" v-if="textType.includes(type)">
        <el-input
          @focus="inputIng = true"
          @blur="inputIng = false"
          :maxlength="type === 'Tag' ? 500 : 50"
          style="width: 220px"
          v-model="meta!.value"
          @change="meta!.update"
        >
          <template #append>
            <el-button type="primary" @click="meta!.update(true)">确定</el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="内容：" v-if="ContentType.includes(type)">
        <el-button type="primary" @click="() => editTable()">编辑</el-button>
      </el-form-item>

      <el-form-item label="方向：" v-if="CompassType.includes(type)">
        <el-button type="primary" @click="meta!.update()"> 旋转 </el-button>
      </el-form-item>

      <el-form-item label="删除：" v-if="!nDelType.includes(type)">
        <el-button type="primary" @click="delHandler">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref, watchEffect } from "vue";
import { BoardShape, compass, title } from "./board";
import { editEshapeTable } from "@/view/case/quisk";
import { inputIng } from "./c";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{
  (e: "update:shape", value: BoardShape | null): void;
}>();

inputIng.value = false;

const type = computed(() => props.shape.data.type);
const textType = ["Tag", title];
const CompassType = [compass];
const nDelType = [title, compass];
const ContentType = ["Table"];

const delHandler = () => {
  props.shape.delete();
  emit("update:shape", null);
};

const editTable = async (track = false) => {
  inputIng.value = true;
  const data = await editEshapeTable({ content: props.shape.data.content, track });
  if (data) {
    props.shape.setContent(data);
  }
  emit("update:shape", null);
  inputIng.value = false;
};

if (props.shape.autoSet && ContentType.includes(type.value)) {
  editTable(true);
}

const meta = computed(() => {
  if (textType.includes(type.value)) {
    const data = reactive({
      value: props.shape.data.text,
      update: (quit?: boolean) => {
        props.shape.setText(data.value);
        if (quit) {
          emit("update:shape", null);
        }
      },
    });
    return data;
  } else if (CompassType.includes(type.value)) {
    return reactive({
      value: props.shape.data.rotate,
      update: () => {
        props.shape.setRotate((props.shape.data.rotate + 90) % 360);
        emit("update:shape", null);
      },
    });
  }
});

// del快捷键删除
const keydownHandler = (ev: KeyboardEvent) => {
  if (
    !inputIng.value &&
    ["Backspace", "Delete"].includes(ev.key) &&
    !nDelType.includes(type)
  ) {
    delHandler();
  }
};
onMounted(() => document.documentElement.addEventListener("keydown", keydownHandler));
onUnmounted(() => {
  inputIng.value = false;
  document.documentElement.removeEventListener("keydown", keydownHandler);
});
</script>

<style lang="scss" scoped>
.def-shape-edit {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  width: fit-content;
}
.def-close-shape-edit {
  align-self: start;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}
</style>

<style lang="scss">
.def-shape-edit {
  .el-form--inline .el-form-item {
    margin-bottom: 0;

    &:not(:last-child) {
      margin-right: 15px;
    }
  }
}
</style>
