<template>
  <a-modal v-model:open="visible" :width="334" centered>
    <template #title> 填涂区设置 </template>

    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ style: { width: '60px' } }"
    >
      <a-form-item label="未填涂">
        <div
          class="color-block color-unfill"
          :style="{ backgroundColor: formData.unfillColor }"
          @click="onEditColor('unfillColor')"
        ></div>
        <a-checkbox v-model:checked="formData.unfillShow">显示</a-checkbox>
      </a-form-item>
      <a-form-item label="已填涂">
        <div
          class="color-block color-fill"
          :style="{ backgroundColor: formData.fillColor }"
          @click="onEditColor('fillColor')"
        ></div>
        <a-checkbox v-model:checked="formData.fillShow">显示</a-checkbox>
      </a-form-item>
      <a-form-item name="borderWidth" label="宽度">
        <a-input-number
          v-model:value="formData.borderWidth"
          style="width: 40px; margin-right: 4px"
          :min="1"
          :max="9"
          :precision="0"
          :controls="false"
        />
        <span class="input-tips">像素</span>
      </a-form-item>
    </a-form>

    <template #footer>
      <div class="box-justify">
        <a-button type="link" @click="initSet">恢复默认值</a-button>

        <div>
          <a-button type="text" @click="close">取消</a-button>
          <a-button type="primary" @click="confirm">确认</a-button>
        </div>
      </div>
    </template>
  </a-modal>

  <ColorPickerDialog
    ref="colorPickerDialogRef"
    :color="curColor"
    @confirm="onColorConfirm"
  />
</template>

<script setup lang="ts">
import { reactive, ref, watch, UnwrapRef } from "vue";
import { message } from "ant-design-vue";

import useModal from "@/hooks/useModal";
import { useUserStore } from "@/store";
import { objModifyAssign } from "@/utils/tool";

import ColorPickerDialog from "./ColorPickerDialog.vue";

defineOptions({
  name: "FillAreaSetDialog",
});

/* modal */
const { visible, open, close } = useModal();
defineExpose({ open, close });

const userStore = useUserStore();

const defaultFormData = {
  fillColor: "#f53f3f",
  fillShow: true,
  unfillColor: "#165DFF",
  unfillShow: false,
  borderWidth: 2,
};

const emit = defineEmits(["modified"]);

type FormDataType = typeof defaultFormData;
const formRef = ref();
const formData: UnwrapRef<FormDataType> = reactive({
  ...defaultFormData,
});
const rules: FormRules<keyof FormDataType> = {
  borderWidth: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
};

function initSet() {
  objModifyAssign(formData, defaultFormData);
}

async function confirm() {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;

  userStore.setRecogFillSet(formData);

  message.success("保存成功！");
  emit("modified", formData);
  close();
}

// color picker
type EditType = "fillColor" | "unfillColor";
const curColor = ref("");
const colorPickerDialogRef = ref();
const editType = ref<EditType>("fillColor");
function onEditColor(type: EditType) {
  curColor.value =
    type === "fillColor" ? formData.fillColor : formData.unfillColor;
  editType.value = type;
  colorPickerDialogRef.value?.open();
}

function onColorConfirm(val: string) {
  if (editType.value === "fillColor") {
    formData.fillColor = val;
  } else {
    formData.unfillColor = val;
  }
}

/* init modal */
watch(
  () => visible.value,
  (val) => {
    if (val) {
      modalOpenHandle();
    }
  },
  {
    immediate: true,
  }
);

function modalOpenHandle() {
  objModifyAssign(formData, userStore.recogFillSet || defaultFormData);
}
</script>

<style lang="less" scoped>
.color-block {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin-right: 8px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}
.input-tips {
  display: inline-block;
  vertical-align: middle;
  margin-top: 3px;
}
</style>