<template>
  <view class="container">
    <view class="left-info">
      <h1 style="font-weight: bold">不干胶</h1>
      <el-form>
        <el-form-item>
          <el-radio-group v-model="data.types" @change="handleChange">
            <el-radio label="常用种类" value="常用种类" size="large" border />
            <el-radio label="专版打印" value="专版打印" size="large" border />
          </el-radio-group>
        </el-form-item>
        <view class="form-title">品种</view>
        <el-form-item>
          <el-select v-model="data.material" placeholder="请选择" size="large" style="width: 300px">
            <template v-for="item in materials" :key="item.name">
              <el-option :label="item.name" :value="item.name"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <view class="form-title">尺寸</view>
        <el-form-item>
          <number-input style="width: 150px" v-model="data['length']">
            <template #append> <text>cm</text></template>
          </number-input>
          <text style="margin: 0 10px">X</text>
          <number-input style="width: 150px" v-model="data['width']">
            <template #append> <text>cm</text> </template>
          </number-input>
        </el-form-item>
        <view class="form-title">个数</view>
        <el-form-item>
          <number-input style="width: 300px" v-model="data.count" placeholder="请输入数量" size="large"></number-input>
        </el-form-item>
        <view class="form-title">款数</view>
        <el-form-item>
          <number-input style="width: 300px" v-model="data.number" placeholder="请输入数量" size="large"></number-input>
        </el-form-item>
        <view class="form-title">客户旺旺</view>
        <el-form-item>
          <el-input style="width: 300px" v-model="data.customerWw" placeholder="请输入客户旺旺" size="large"></el-input>
        </el-form-item>
        <component v-if="currentCraftComponent" :is="currentCraftComponent" ref="componentRef" v-model="data.crafts" />
        <PriceResult :data="data" @verifyCraftData="handleVerifyCraftData" />
      </el-form>
    </view>
    <view class="right-image">
      <ImageRemark :images="images" :remark="remark" />
    </view>
  </view>
</template>
<script setup>
import { ref, watch, shallowRef } from "vue";
import copperplate from "./crafts/copperplate.vue";
import pvc from "./crafts/pvc.vue";
import transparent from "./crafts/transparent.vue";
import NumberInput from "@/components/NumberInput";
import ImageRemark from "@/components/ImageRemark";
import PriceResult from "@/components/PriceResult";

const materials = [
  {
    name: "铜板纸不干胶",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E9%93%9C%E7%89%88%E7%BA%B8%E4%B8%8D%E5%B9%B2%E8%83%B6/%E4%BA%AE%E8%86%9C.jpg"],
    remark: "广东:数量500-1000张（顺丰14点前当天发货 普通快递16点前当天发货） 中通 圆通 顺丰;\n江苏：（3-4天发货） 韵达 顺丰;",
  },
  {
    name: "pvc不干胶",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E8%A6%86%E4%BA%AE%E8%86%9C.jpg"],
  },
  {
    name: "透明不干胶",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E9%80%8F%E6%98%8E%E4%B8%8D%E5%B9%B2%E8%83%B6/%E4%BA%AE%E8%86%9C.jpg"],
  },
  {
    name: "牛皮纸",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-牛皮纸不干胶.jpg"],
  },
  {
    name: "哑金不干胶",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-哑金.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6%E5%8D%B0%E5%88%B71%E8%89%B2.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6%E5%8A%A0%E5%87%B9%E5%87%B8.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6%E5%8D%B02%E8%89%B2.jpg"],
  },
  {
    name: "哑银不干胶",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-哑银.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%93%91%E9%93%B6%E4%B8%8D%E5%B9%B2%E8%83%B6/%E5%93%91%E9%87%91%E4%B8%8D%E5%B9%B2%E8%83%B6%E5%8D%B01%E8%89%B2.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%93%91%E9%93%B6%E4%B8%8D%E5%B9%B2%E8%83%B6/%E5%93%91%E9%93%B6%E4%B8%8D%E5%B9%B2%E8%83%B6%E5%8A%A0%E5%87%B9%E5%87%B8.jpg"],
  },
  {
    name: "书写纸不干胶",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E4%B9%A6%E5%86%99%E7%BA%B8%E4%B8%8D%E5%B9%B2%E8%83%B6.jpeg"],
  },
  {
    name: "银平光",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-银平光.jpg"],
  },
  {
    name: "拉丝金",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-拉丝金.jpg"],
  },
  {
    name: "拉丝银",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-拉丝银.jpg", "https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-拉丝银 (2).jpg"],
  },
  {
    name: "美纹纸",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/不干胶-美纹纸.jpg"],
  },
  {
    name: "PP合成纸",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/PP%E5%90%88%E6%88%90%E7%BA%B8.png"],
  },
  {
    name: "易碎纸不干胶",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20210722/易碎贴.jpg", "https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E6%98%93%E7%A2%8E%E7%BA%B8%E4%B8%8D%E5%B9%B2%E8%83%B6.jpg"],
  },
  {
    name: "刚古水纹超白",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20220323/刚古水纹超白.png"],
  },
  {
    name: "红底散金",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20220323/红底散金.png"],
  },
  {
    name: "布纹纸超白",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20220323/布纹纸超白.png"],
  },
  {
    name: "珠光超白",
    images: ["https://offer.lingtao8.com/upImg/upload/product/20220323/珠光超白.png"],
  },
  {
    name: "10C静电膜",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/10C%E9%9D%99%E7%94%B5%E8%86%9C.png"],
  },
  {
    name: "树纹纸",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/swz/%E6%BF%80%E5%87%B8.png"],
  },
  {
    name: "草香纸/大地纸",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%A4%A7%E5%9C%B0%E7%BA%B8%E6%BF%80%E5%87%B8.png"],
  },
  {
    name: "单防热敏纸（底纸白色）",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E5%8D%95%E9%98%B2%E7%83%AD%E6%95%8F%E7%BA%B8%EF%BC%88%E5%BA%95%E7%BA%B8%E7%99%BD%E8%89%B2%EF%BC%89.png"],
  },
  {
    name: "三防热敏纸（底纸蓝色）",
    images: ["https://ltcloudfile.oss-cn-hangzhou.aliyuncs.com/price_img/20240229/%E4%B8%89%E9%98%B2%E7%83%AD%E6%95%8F%E7%BA%B8%EF%BC%88%E5%BA%95%E7%BA%B8%E8%93%9D%E8%89%B2%EF%BC%89.png"],
  },
];

const craftMap = {
  铜板纸不干胶: copperplate,
  pvc不干胶: pvc,
  透明不干胶: transparent,
};
const currentCraftComponent = shallowRef(null);
const componentRef = ref(null);
const images = ref([]);
const remark = ref("");
const data = ref({
  product: "不干胶",
  types: "常用种类",
  material: "",
  length: null,
  width: null,
  count: null,
  number: 1,
  customerWw: "",
  crafts: [],
});

watch(
  () => data.value.material,
  (mat) => {
    handleGetImages(mat);
    currentCraftComponent.value = craftMap[mat] || null;
    data.value.crafts = [];
  },
);

const handleChange = (val) => {
  const initData = {
    product: "不干胶",
    types: val,
    material: "",
    length: null,
    width: null,
    count: null,
    number: 1,
    customerWw: "",
    crafts: [],
  };
  data.value = initData;
};

const handleGetImages = (name) => {
  images.value = [];
  if (name) {
    let item = materials.find((item) => item.name === name) || {
      images: [],
    };
    images.value = item.images;
  } else {
    materials.forEach((item) => {
      images.value.push(...item.images);
    });
  }
  remark.value = materials.find((item) => item.name === name)?.remark || "";
};

const handleVerifyCraftData = (callback) => {
  if (data.value.material == "") {
    callback({ valid: false, message: "请选择材质" });
    return;
  }
  if (!data.value.width) {
    callback({ valid: false, message: "请输入宽度" });
    return;
  }
  if (!data.value.length) {
    callback({ valid: false, message: "请输入长度" });
    return;
  }
  if (!data.value.count) {
    callback({ valid: false, message: "请输入数量" });
    return;
  }
  if (typeof componentRef.value?.verifyCraftData === "function") {
    let { valid, message } = componentRef.value.verifyCraftData();
    callback({ valid, message });
    return;
  }
  callback({ valid: true, message: "工艺数据验证通过" });
};
handleGetImages();
</script>
<style lang="scss" scoped>
.el-form-item--default {
  margin-bottom: 10px;
}
.container {
  margin: 0 20px;
  display: flex;
}
.form-title {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
.left-info {
  flex: 1;
}
.right-image {
  flex: 1;
}
</style>
