<template>
  <ProductCraft :data="defaultCraftData" @change="handleCraftChange" />
</template>

<script setup>
import { ref } from "vue";
import ProductCraft from "@/components/ProductCraft";

const defaultCraftData = ref([
  {
    title: "裁切工艺",
    options: [
      {
        value: "模切",
        label: "模切",
        checked: true,
        disabled: false,
      },
    ],
  },
  {
    title: "覆膜工艺",
    options: [
      {
        value: "覆哑膜",
        label: "覆哑膜",
        checked: false,
        disabled: false,
      },
      {
        value: "覆亮膜",
        label: "覆亮膜",
        checked: true,
        disabled: false,
      },
    ],
  },
  {
    title: "印白工艺",
    options: [
      {
        value: "不印白",
        label: "不印白",
        checked: true,
        disabled: false,
      },
      {
        value: "印白墨",
        label: "印白墨",
        checked: false,
        disabled: false,
      },
    ],
  },
  {
    title: "排废工艺",
    options: [
      {
        value: "半排废",
        label: "半排废",
        checked: false,
        disabled: false,
      },
      {
        value: "全排废",
        label: "全排废",
        checked: false,
        disabled: false,
      },
    ],
  },
  {
    title: "烫金工艺",
    options: [
      {
        value: "纯烫金",
        label: "纯烫金",
        checked: false,
        disabled: false,
      },
      {
        value: "汤镭射银",
        label: "汤镭射银",
        checked: false,
        disabled: false,
      },
      {
        value: "彩色印刷+烫金/银",
        label: "彩色印刷+烫金/银",
        checked: false,
        disabled: false,
      },
    ],
  },
  {
    title: "特殊工艺",
    options: [
      {
        value: "内部模切",
        label: "内部模切",
        checked: false,
        disabled: false,
        children: [
          {
            type: "input",
            value: "",
            id: "count",
            placeholder: "个数",
          },
          {
            type: "input",
            value: "",
            id: "width",
            placeholder: "宽度",
          },
          {
            type: "input",
            value: "",
            id: "length",
            placeholder: "长度",
          },
        ],
      },
    ],
  },
]);

const handleCraftChange = (info) => {
  const { optionValue, itemIndex, data } = info;
  const currentItem = data[itemIndex];

  // 1. 处理当前工艺的单选：选中匹配的选项，取消同组其他选项
  currentItem.options.forEach((opt) => {
    if (opt.value === optionValue) {
    } else {
      opt.checked = false;
    }
  });

  // 2. 互斥逻辑：排废工艺 与 烫金工艺 不能同时存在被选中的选项
  const wasteCraft = data.find((item) => item.title === "排废工艺");
  const foilCraft = data.find((item) => item.title === "烫金工艺");

  if (wasteCraft && foilCraft) {
    const wasteHasChecked = wasteCraft.options.some((opt) => opt.checked);
    const foilHasChecked = foilCraft.options.some((opt) => opt.checked);

    if (wasteHasChecked) {
      // 排废工艺有选中 → 禁用烫金工艺所有选项，并清空其选中状态
      foilCraft.options.forEach((opt) => {
        opt.disabled = true;
        opt.checked = false;
      });
    } else if (foilHasChecked) {
      // 烫金工艺有选中 → 禁⽤排废工艺所有选项，并清空其选中状态
      wasteCraft.options.forEach((opt) => {
        opt.disabled = true;
        opt.checked = false;
      });
    } else {
      // 两者都未选中 → 同时启用两个工艺的所有选项（不清空，原本就无选中）
      wasteCraft.options.forEach((opt) => (opt.disabled = false));
      foilCraft.options.forEach((opt) => (opt.disabled = false));
    }
  }

  // 3. 更新响应式数据
  defaultCraftData.value = data;
};
</script>

<style lang="scss" scoped>
.line-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.form-title {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-right: 20px;
}
</style>
