<template>
  <div
    class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
  >
    <span class="block w-full">{{ apName }}</span>
    <div v-if="state.result === undefined">
      <span class="block w-full">{{ state.state }}</span>
      <progress
        class="block w-full"
        :max="state.total"
        :value="state.current"
      ></progress>
      <span class="block w-full">{{ state.status }}</span>
    </div>
    <div v-else class="w-full flex">
      <span class="flex-1 mr-2"
        >SwitchPortID {{ state.result.switchportid }}</span
      >
      <span class="flex-1 mr-2"
        >New SwitchPortID {{ state.result.switchportid_new }}</span
      >
      <span class="flex-1 mr-2">UserPortID {{ state.result.userportid }}</span>
      <span class="flex-1 mr-2"
        >SwitchPortID {{ state.result.userportid_new }}</span
      >
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import { useIntervalFn } from "@vueuse/core";
import { getStateOfTask, StateOfTask } from "../api";

export default {
  name: "VTaskState",
  emits: ["finished"],
  props: {
    taskID: {
      type: String,
      required: true,
    },
    apName: {
      type: String,
      required: true,
    },
  },
  setup(props: { taskID: string }) {
    const { taskID } = toRefs(props);

    const state = reactive<StateOfTask>({
      state: "",
      current: "",
      total: undefined,
      result: undefined,
      status: null,
    });

    const { pause, resume } = useIntervalFn(async () => {
      const s = await getStateOfTask(taskID.value);
      Object.assign(state, s);
      if (s.result !== undefined) pause();
    }, 300);

    return { state };
  },
};
</script>

<style scoped></style>
