<script setup>
import { defineProps, inject, watch } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { getDashboardDevice } from "@/apis/dashboard";
import { postProductSettingPoint } from "@/apis/productSetting";
import useDashboardOption from "@/hooks/useDashboardOption";

const props = defineProps({
  title: String,
  onCancel: Function,
});

const {
  items: types,
  changeActiveBtn: changeActiveTypeBtn,
  setItems: setTypeItems,
  selectedBtn: selectedTypeBtn,
} = useActiveBtn(); // Type
const options = useDashboardOption(setTypeItems, "productSetting_items");

const {
  items: builings,
  changeActiveBtn: changeActiveBuildingBtn,
  setItems: setBuildingItems,
  selectedBtn: selectedBuildingBtn,
} = useActiveBtn(); // building

const { initialData } = inject("productSetting_items");

watch(
  initialData,
  (newValue) => {
    console.log("initialData", newValue);
    newValue &&
      setBuildingItems(
        newValue.options.map(({ option, text }, index) => ({
          title: text,
          key: `option_${option}`,
          active: index === 0,
          value: option,
        }))
      );
  },
  {
    deep: true,
    immediate: true,
  }
);

const {
  items: devices,
  changeActiveBtn: changeActiveDeviceBtn,
  setItems: setDeviceItems,
  selectedBtn: selectedDeviceBtn,
} = useActiveBtn("multiple"); // Device

const getDeviceList = async (option) => {
  const res = await getDashboardDevice({ option });
  let data = [];
  res.data
    .filter(({ is_batch }) => is_batch === 1)
    .forEach(({ device }) => {
      data = [
        ...data,
        ...device.map(({ device_number, full_name }) => ({
          title: full_name,
          key: device_number,
          active: false,
          device_number,
        })),
      ];
    });
  setDeviceItems(data);
};

watch(
  selectedBuildingBtn,
  (newValue) => {
    newValue && getDeviceList(newValue.value);
  },
  {
    immediate: true,
  }
);

const onOk = async () => {
  const res = await postProductSettingPoint(
    selectedTypeBtn.value,
    selectedDeviceBtn.value
  );
  props.onCancel();
};
</script>

<template>
  <Modal
    id="production_setting_PS4_modal"
    :title="title"
    :onCancel="onCancel"
    width="700"
  >
    <template #modalContent>
      <div class="mt-7">
        <p class="text-lg">煮食種類</p>
        <ButtonGroup
          :items="types"
          :withLine="true"
          class="my-2"
          :onclick="
            (e, item) => {
              changeActiveTypeBtn(item);
            }
          "
        />
      </div>
      <div class="mt-7">
        <p class="text-lg">廠區</p>
        <ButtonGroup
          :items="builings"
          :withLine="true"
          class="my-2"
          :onclick="
            (e, item) => {
              changeActiveBuildingBtn(item);
            }
          "
        />
      </div>
      <div class="mt-7">
        <p class="text-lg">設備(複選)</p>
        <ButtonGroup
          :items="devices"
          :withLine="false"
          class="my-2"
          :onclick="
            (e, item) => {
              changeActiveDeviceBtn(item);
            }
          "
        />
      </div>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        取消
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.stop.prevent="onOk"
      >
        確定
      </button>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
