<template>
  <div>
    <div style="padding: 8px; text-align: center" v-if="formData.data.code || formData.data.wlnCode">
      <span style="font-size: 18px; font-weight: 700">{{ formData.data.code }} </span>
      <span style="font-size: 18px; font-weight: 700" v-if="formData.data.wlnCode"> ({{ formData.data.wlnCode }})</span>
    </div>
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" ref="submit">
      <template #deletionReason>
        <div style="width: 100%; padding: 0 20px">{{ getDeleteReason() }}</div>
      </template>
      <template #orderSkuList>
        <div style="width: 100%; padding: 0 20px">
          <div v-for="(item, index) in formData.data.orderSkuList" :key="index" style="margin-bottom: 20px">
            <div style="border: 1px solid #edf0f5">
              <el-table :data="[item]" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" :cell-class-name="cellStyleName">
                <el-table-column label="产品" width="280">
                  <template #default="{ row }">
                    <div style="width: 100%">
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">商品名称: </span>
                        <span>{{ item.wlnSkuName }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">品号: </span>
                        <span>{{ item.code }}</span>
                      </div>
                      <div style="line-height: 35px; word-break: break-all">
                        <span style="color: black; font-weight: 700">品名: </span>
                        <span>{{ item.name }}</span>
                      </div>
                      <div style="line-height: 35px; display: flex">
                        <span style="color: black; font-weight: 700">数量: </span>
                        <span>{{ row.quantity }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">加工费: </span>
                        <span>{{ item.customProcessingFee }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">代发费: </span>
                        <span>{{ item.lssueFee }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">快递包材费: </span>
                        <span>{{ item.deliveryMaterialsFee }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">包装人工费: </span>
                        <span>{{ item.packingLabor }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">管理费: </span>
                        <span>{{ item.managementFee }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">单价: </span>
                        <span>{{ item.unitPrice }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="color: black; font-weight: 700">小计: </span>
                        <span>{{ getSubtotal(item) }}</span>
                      </div>
                      <div style="line-height: 35px">
                        <span style="width: 37px; color: black; font-weight: 700">打印: </span>
                        <el-form-item :prop="'orderSkuList.' + index + '.printType'" :inline-message="true" style="width: calc(100% - 37px)">
                          <el-radio-group v-model="item.printType">
                            <el-radio v-for="(itemType, index) in printType" :key="index" :label="itemType.dictKey">{{ itemType.dictValue }}</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="产品图稿" width="320">
                  <template #default="{ row }">
                    <div style="display: flex; width: 100%">
                      <div style="width: 80px">设计图:</div>
                      <div style="width: calc(100% - 80px)">
                        <el-image
                          fit="scale-down"
                          style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
                          v-if="row.blueprint"
                          :src="row.blueprint"
                          @click="openFile(row.blueprint)" />
                      </div>
                    </div>
                    <div style="display: flex; margin-top: 20px; width: 100%">
                      <div style="width: 80px">图稿文件:</div>
                      <div style="width: calc(100% - 80px)">
                        <a
                          style="color: #409eff; cursor: pointer; word-break: break-all; margin-right: 10px"
                          @click="openFile(row.productionDocument)"
                          v-if="row.productionDocument">
                          {{ row.productionDocument }}
                        </a>
                      </div>
                    </div>
                    <div style="font-weight: 700; margin-top: 20px">产品不干胶图稿</div>
                    <div style="display: flex; width: 100%">
                      <div style="width: 80px">不干胶图片:</div>
                      <div style="width: calc(100% - 80px)">
                        <el-image
                          fit="scale-down"
                          style="width: 148px; height: 148px; margin-right: 10px; cursor: pointer"
                          v-if="row.selfAdhesiveStickerFile && row.selfAdhesiveStickerFile.fileUrl"
                          :src="row.selfAdhesiveStickerFile.fileUrl"
                          @click="openFile(row.selfAdhesiveStickerFile.fileUrl)" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="包材配件/单品" min-width="600">
                  <template #default="{ row }">
                    <div style="width: 100%">
                      <el-table :data="row.orderSkuBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
                        <el-table-column label="单价¥" width="70">
                          <template #default="props">
                            <span>{{ moneyFormat(props.row.unitPrice, 2) }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="数量" width="90">
                          <template #default="props">
                            <span>{{ props.row.quantity }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="名称" prop="bomSpecName" min-width="130" />
                        <el-table-column label="总量" width="70">
                          <template #default="props">
                            {{ computeQuantity(index, props.$index) }}
                          </template>
                        </el-table-column>
                        <el-table-column label="小计¥" width="100">
                          <template #default="props">
                            {{ moneyFormat(computeMoney(index, props.$index), 2) }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="包装要求" min-width="500">
                  <template #default="{}">
                    <div v-html="getStyle(item.packageRemark)"></div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </template>
    </byForm>
  </div>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { useRoute } from "vue-router";

const { proxy } = getCurrentInstance();
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
  recordList: Array,
});
const route = useRoute();
const submit = ref(null);
const judgeStatus = () => {
  if (route.query.processType == 20 || route.query.processType == 10) {
    return true;
  }
  if (props.queryData.recordList && props.queryData.recordList.length > 0) {
    let data = props.queryData.recordList.filter((item) => item.status === 2 && item.nodeType !== 1);
    if (data && data.length > 0) {
      return true;
    }
  }
  return false;
};
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    remark: "",
    type: 1,
    orderSkuList: [],
    fileList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "删除原因",
      label: "",
    },
    {
      type: "slot",
      slotName: "deletionReason",
    },
    {
      type: "title",
      title: "产品",
      label: "",
    },
    {
      type: "slot",
      prop: "orderSkuList",
      slotName: "orderSkuList",
    },
  ];
});
const openFile = (path) => {
  window.open(path);
};
const getStyle = (text) => {
  if (text) {
    return text.replace(/\n|\r\n/g, "<br>");
  } else {
    return "";
  }
};
const printType = ref([
  {
    dictKey: 1,
    dictValue: "单面",
  },
  {
    dictKey: 2,
    dictValue: "双面",
  },
]);
const cellStyleName = ({ column, columnIndex }) => {
  if (column.label === "操作" && columnIndex === 4) {
    return "vertical-align";
  }
};
const computeQuantity = (index, indexSKU) => {
  let quantity = 0;
  if (formData.data.orderSkuList[index].quantity && formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity) {
    quantity = Number(
      Math.round(formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity * formData.data.orderSkuList[index].quantity * 100) / 100
    );
  }
  return quantity;
};
const computeMoney = (index, indexSKU) => {
  let money = 0;
  if (
    formData.data.orderSkuList[index].quantity &&
    formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity &&
    formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice
  ) {
    money = Number(
      Math.round(
        formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity *
          formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice *
          formData.data.orderSkuList[index].quantity *
          100
      ) / 100
    );
  }
  return money;
};
const getSubtotal = (item) => {
  let money = 0;
  if (item.quantity) {
    money = Number(
      Math.round(
        (item.customProcessingFee + item.deliveryMaterialsFee + item.lssueFee + item.packingLabor + item.managementFee + item.unitPrice) * item.quantity * 100
      ) / 100
    );
  }
  return money;
};
const getFormData = () => {
  return proxy.deepClone({ id: formData.data.id });
};
const handleSubmit = async () => {
  return true;
};
watch(
  () => props.queryData,
  (newValue) => {
    formOption.disabled = judgeStatus();
    if (props.queryData && ["10", "20", "30", "40"].includes(route.query.processType)) {
      formData.data = proxy.deepClone(newValue);
      let list = [];
      if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
        list = formData.data.orderSkuList.map((item) => item.id);
        proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
          for (let i = 0; i < formData.data.orderSkuList.length; i++) {
            if (fileObj[formData.data.orderSkuList[i].id] && fileObj[formData.data.orderSkuList[i].id].length > 0) {
              formData.data.orderSkuList[i].selfAdhesiveStickerFile = {
                id: fileObj[formData.data.orderSkuList[i].id][0].id,
                fileName: fileObj[formData.data.orderSkuList[i].id][0].fileName,
                fileUrl: fileObj[formData.data.orderSkuList[i].id][0].fileUrl,
              };
            }
          }
        });
      }
    }
  },
  {
    deep: true,
  }
);
const getDeleteReason = () => {
  let remark = "";
  if (props.recordList && props.recordList.length > 0) {
    remark = props.recordList[0].remark;
  }
  return remark;
};
// 向父组件暴露
defineExpose({ getFormData, handleSubmit });
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
:deep(.ql-editor) {
  height: auto;
}
:deep(.el-table__cell) {
  vertical-align: top;
}
:deep(.vertical-align) {
  vertical-align: middle;
}
</style>
