<template>
  <el-dialog
    class="anno-dialog"
    v-model="dialogVisible"
    :width="550"
    center
    :modal="false"
    :show-close="false"
    :close-on-click-modal="true"
    append-to-body
    @closed="closed"
    @close="beforeClose"
  >
    <!-- 因为导致小屏幕溢出而无法操作按钮，故暂时关闭 -->
    <!--     :style="{ marginLeft: `${pos.left}px`, marginTop: `${pos.top}px` }" -->
    <el-form :model="formData" ref="formRef" :rules="formRules" :label-width="106">
      <el-form-item label="标注内容：">
        <span style="font-size: 16px; color: #333333">{{ formData.keyword }}</span>
      </el-form-item>
      <el-form-item label="标注颜色：" prop="colour">
        <ColorPicker v-model="formData.colour" />
      </el-form-item>
      <el-form-item label="命名标签：" prop="tagIdList" style="display: block">
        <TagSelect ref="tagSelectRef" v-model="formData.tagIdList" :show-details="true" :api="getTagTreeList" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="!formData.id" @click="delAnnoAction(formData)">清空标注</el-button>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" class="ml20" v-throttle="handleSubmit">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose, nextTick } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { DataAnno } from "@/api/interface/index";
import { getTagTreeList } from "@/api/modules/common";
import { annoSave, delAnno } from "@/api/modules/annotation/labeling";
import ColorPicker from "./ColorPicker.vue";
import TagSelect from "./TagSelect.vue";

//* 接收注入
const dialogVisible = ref(false);
//* data
//* ref
const formRef = ref<FormInstance>();
const tagSelectRef = ref<typeof TagSelect>();
const openPromise = ref<any>({});
type FormData = DataAnno.ReqAnnoSaveParams;
const formData = ref<FormData>({} as FormData);
const pos = ref({ left: 0, top: 0 });
//* 方法

// 校验规则
let formRules = reactive<FormRules>({
  colour: [{ required: true, message: "标注颜色不能为空", trigger: "change" }],
  tagIdList: [{ required: true, message: "命名标签不能为空", trigger: "change" }]
});

function closed() {
  tagSelectRef.value?.setFirstActived();
  formData.value = {} as FormData;
  nextTick(formRef.value?.clearValidate);
}
function beforeClose() {
  openPromise.value.reject && openPromise.value.reject();
}
// 取消
function handleCancel() {
  dialogVisible.value = false;
}
//提交
function handleSubmit() {
  formRef.value?.validate(async valid => {
    if (!valid) return;
    await annoSave(formData.value);
    openPromise.value.resolve();
    dialogVisible.value = false;
  });
}
// 清空标注
async function delAnnoAction(item: any) {
  await delAnno({ id: item.id });
  openPromise.value.resolve();
  dialogVisible.value = false;
}
function open({ left, top, ...params }: FormData & { left: number; top: number }) {
  pos.value = { left, top };
  formData.value = params;
  dialogVisible.value = true;
  return new Promise((resolve, reject) => {
    openPromise.value.resolve = resolve;
    openPromise.value.reject = reject;
  });
}
defineExpose({
  open
});
</script>

<style lang="scss">
.anno-dialog {
  .el-dialog__header {
    display: none;
  }
  .el-form {
    .el-form-item__label {
      font-size: 16px;
      font-weight: bold;
    }
    .el-form-item {
      &:nth-of-type(2) {
        .el-form-item__error {
          margin-left: -91px;
        }
      }
      &:nth-of-type(3) {
        .el-form-item__content {
          padding-left: 14px;
        }
        .el-form-item__error {
          left: 14px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
