<script setup>
import { ref, inject, onMounted, defineProps, watch, watchEffect } from "vue";
import dayjs from "dayjs";
import useActiveBtn from "@/hooks/useActiveBtn";

const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

const formState = ref({
  pot: 0,
  "130g": 0,
  "150g": 0,
  "1kg": 0,
  "2kg": 0,
});

const date = ref([
  {
    key: "date",
    value: dayjs(),
    dateFormat: "yyyy-MM-dd",
    placeholder: "日期設定",
  },
]);

onMounted(() => {
  setItems([
    { title: "產品 A", key: 1, active: true },
    { title: "產品 B", key: 2, active: false },
    { title: "產品 C", key: 3, active: false },
  ]);
});
</script>

<template>
  <DateGroup :isBottomLabelExist="false" :items="date" :withLine="false">
    <template #topLeft>日期</template>
  </DateGroup>
  <ButtonConnectedGroup
    :items="items"
    :className="`w-full mt-8 mb-4`"
    size="md"
    color="info"
    :onclick="
      (e, item) => {
        changeActiveBtn(item);
      }
    "
  />
  <div class="flex flex-col items-start">
    <div class="flex justify-between">
      <InputNumber :value="formState" width="150" class="mr-4" name="pot">
        <template #topLeft>總數</template>
      </InputNumber>
    </div>
  </div>

  <div class="flex flex-col items-start">
    <p class="text-base">包裝類型</p>
    <div class="flex justify-between">
      <InputNumber
        v-for="size in ['130g', '150g', '1kg', '2kg']"
        :key="size"
        :value="formState"
        width="150"
        class="mr-4"
        :name="size"
      >
        <template #topLeft>{{ size }}</template>
      </InputNumber>
    </div>
  </div>
</template>

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