<template>
  <view>
    <view class="line-container">
      <view class="form-title">裁切工艺：</view>
      <ChekcBoxOnly :data="craftData[0].options" v-model="craftData[0].value" />
    </view>
    <view class="line-container">
      <view class="form-title">覆膜工艺：</view>
      <ChekcBoxOnly :data="craftData[1].options" v-model="craftData[1].value" />
    </view>
    <view class="line-container">
      <!-- 刮刮膜带有子选择 -->
      <view class="form-title">刮刮膜：</view>
      <ChekcBoxOnly :data="craftData[2].options" v-model="craftData[2].value" />
      <el-select v-if="craftData[2].value.length > 0" v-model="craftData[2].size" placeholder="选择尺寸" style="width: 100px; margin-left: 20px">
        <el-option label="6*18mm" value="6*18" />
      </el-select>
    </view>
  </view>
</template>

<script setup>
import { ref, defineEmits, defineProps, watch } from "vue";
import ChekcBoxOnly from "@/components/CheckBoxOnly";

const craftData = ref([
  {
    value: ["模切"],
    options: [
      { value: "模切", label: "模切" },
      { value: "裁切", label: "裁切" },
    ],
  },
  {
    value: [],
    options: [
      { value: "覆哑膜", label: "覆哑膜" },
      { value: "覆亮膜", label: "覆亮膜" },
    ],
  },
  {
    value: [],
    process: [],
    size: "",
    options: [
      { value: "配刮刮膜", label: "配刮刮膜" },
      { value: "粘刮刮膜", label: "粘刮刮膜" },
    ],
  },
]);

const emit = defineEmits(["update:modelValue"]);

watch(
  craftData,
  (val) => {
    let params = [];
    val.forEach((item) => {
      if (item.value.length > 0) {
        item.value.forEach((i) => {
          let info = {
            name: i,
            value: i,
          };
          if (i == "配刮刮膜" || i == "粘刮刮膜") {
            info.size = item.size;
          }
          params.push(info);
        });
      }
    });
    emit("update:modelValue", params);
  },
  { deep: true },
);
</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>
