<script setup lang="ts">
import { Steps, Card, Button } from "ant-design-vue";

const localStore = useLocalStore();
const current = ref(0);
const container = ref<HTMLDivElement>(null);

const items = [
  ...localStore.locals.map((local) => ({ title: local.name })),
  { title: "完成" },
];

const tempLocals: Local[] = reactive([]);
const finish = computed(() => {
  return tempLocals.length === localStore.locals.length;
});
const handleClick = (event: MouseEvent) => {
  if (finish.value) {
    return;
  }
  const x = event.clientX; // 获取鼠标点击位置的X坐标
  const y = event.clientY; // 获取鼠标点击位置的Y坐标
  const temp: Local = {
    name: localStore.locals[current.value].name,
    x: x,
    y: y,
  };
  tempLocals.push(temp);

  current.value++;

  console.log(temp);
};

const reset = () => {
  tempLocals.splice(0, tempLocals.length);
  current.value = 0;
};
const set = () => {
  tempLocals.forEach((local) => {
    localStore.setLocal(local);
  });
};
</script>
<template>
  <div class="w-full h-screen relative" ref="container">
    <Card class="w-4/5 sm:w-3/4 md:w-1/2 mx-auto mt-4 select-none">
      <div class="flex justify-between mb-2 text-2xl h-14">
        <div v-if="current !== 4">
          请选择
          <span class="text-blue-500">{{ items[current].title }}</span>
          的位置 {{ current }}
        </div>
        <div v-else class="flex justify-between w-full">
          <Button type="primary" size="large" @click="reset">重新选择</Button>
          <Button type="primary" size="large" @click="set">确定</Button>
        </div>
      </div>
      <Steps :items="items" :current="current" />
    </Card>

    <!-- 全屏的点击区域 -->
    <div
      v-show="!finish"
      class="absolute w-full h-full top-0 left-0"
      @click="handleClick"
    ></div>

    <ShowPoint v-for="(item, i) in tempLocals" :key="i" :local="item" />
  </div>
</template>
