<template>
  <view class="result-container">
    <el-button type="primary" @click="handleGetPrice">获取价格</el-button>
    <el-input v-model="priceReulst" type="textarea" style="width: 400px; height: 400px" rows="10" resize="none" readonly></el-input>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { getProductPrice } from "@/api/product/index.js";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  numberUnit: {
    type: String,
    default: "个",
  },
  sizeUnit: {
    type: String,
    default: "cm",
  },
});

const priceReulst = ref("");

const emits = defineEmits(["verifyCraftData"]);

const handleGetPrice = () => {
  priceReulst.value = "";
  emits("verifyCraftData", (result) => {
    let { valid, message } = result;
    if (!valid) {
      ElMessage({
        message: message || "报价数据验证失败",
        type: "error",
        grouping: true,
      });
      return;
    }
    getProductPrice(props.data).then((res) => {
      let { code, data, msg } = res;
      if (code === 200) {
        let result = "";
        let resultList = [];
        resultList.push(props.data.product);
        resultList.push(props.data.material);
        resultList.push(`${props.data.length}*${props.data.width}${props.sizeUnit}`);
        result = resultList.join("-") + "\n";

        if (props.data.crafts && props.data.crafts.length > 0) {
          result += "工艺：";
          resultList = [];
          props.data.crafts.forEach((craft) => {
            resultList.push(`${craft.text}`);
          });
          result += resultList.join(",") + "\n";
        }
        data.forEach((item) => {
          result += `${props.data.number}款 ${item.count}${props.numberUnit}，共${item.price}元\n`;
        });
        result += "包邮，免费设计呢~（偏远地区需补邮费）";
        priceReulst.value = result;
      }
    });
  });
};
</script>
<style lang="scss" scoped>
.result-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
</style>
