<template>
  <el-card class="box-card">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :searchConfig="searchConfig"
      highlight-current-row
      :table-events="{
        select: selectRow,
        'select-all': selectRow,
      }"
      :action-list="[
        {
          text: '打印生产面单',
          action: () => clickSelectPrint(),
        },
      ]"
      @get-list="getList"
      @clickReset="clickReset"
      @changeRadioGroup="changeRadioGroup">
      <template #code="{ item }">
        <div>
          <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickCode(item)">{{ item.code }}</a>
        </div>
      </template>
      <template #address="{ item }">
        <div>{{ item.province }}, {{ item.city }}, {{ item.county }}, {{ item.detailedAddress }}</div>
      </template>
    </byTable>
    <div style="display: none">
      <div style="width: 250px" id="printMe">
        <div v-for="(item, index) in QRcodeList" :key="index">
          <div style="height: 442px; padding-top: 2px; overflow: hidden; position: relative">
            <div style="border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center">
              <CycleBarcode :value="item.orderWlnCode || item.orderCode" :index="index" style="max-width: 100%"></CycleBarcode>
            </div>
            <div style="display: flex; align-items: center; justify-content: center">
              <div style="width: 150px; height: 150px; margin-top: 8px" :id="'print' + index" :ref="'print' + index">
                <img src="" alt="" style="vertical-align: middle; height: 100%; width: 100%" />
              </div>
            </div>
            <div style="text-align: center; font-size: 18px; font-weight: 700; padding: 4px 0; border-bottom: 1px solid #000">{{ item.completeTime }}</div>
            <div style="word-break: break-all; padding: 2px">SKU品号：{{ item.skuSpecCode }}</div>
            <div style="word-break: break-all; padding: 2px">SKU品名：{{ item.skuSpecName }}</div>
            <div style="word-break: break-all; padding: 2px">BOM品号：{{ item.bomSpecCode }}</div>
            <div style="word-break: break-all; padding: 2px">BOM品名：{{ item.bomSpecName }}</div>
            <div v-if="item.orderWlnCode" class="one">
              <div class="two">
                <div class="three">万里牛</div>
              </div>
            </div>
          </div>
          <div style="page-break-after: always"></div>
        </div>
      </div>
      <el-button type="primary" style="display: none" v-print="printObj" id="printBtnMini"></el-button>
    </div>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { getNearDays } from "/src/utils/util";
import QRCode from "qrcodejs2-fix";
import { ElMessage } from "element-plus";
import CycleBarcode from "/src/components/CycleBarcode";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    orderCode: "",
    orderWlnCode: "",
    skuSpecCode: "",
    skuSpecName: "",
    bomSpecCode: "",
    bomSpecName: "",
    productionWorkOrderCode: "",
    beginTime: "",
    endTime: "",
    type: 3,
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "orderCode",
      label: "订单号",
    },
    {
      type: "input",
      prop: "orderWlnCode",
      label: "E10单号",
    },
    {
      type: "input",
      prop: "skuSpecCode",
      label: "SKU品号",
    },
    {
      type: "input",
      prop: "skuSpecName",
      label: "SKU品名",
    },
    {
      type: "input",
      prop: "bomSpecCode",
      label: "BOM品号",
    },
    {
      type: "input",
      prop: "bomSpecName",
      label: "BOM品名",
    },
    {
      type: "input",
      prop: "productionWorkOrderCode",
      label: "工单号",
    },
    {
      type: "radio-group",
      prop: "type",
      label: "交期",
      data: [
        {
          dictKey: 1,
          dictValue: "近3天",
        },
        {
          dictKey: 3,
          dictValue: "近7天",
        },
        {
          dictKey: 15,
          dictValue: "近31天",
        },
      ],
    },
    {
      type: "date",
      propList: ["beginTime", "endTime"],
      label: "日期",
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "selection",
      attrs: {
        checkAtt: "isCheck",
      },
    },
    {
      attrs: {
        label: "订单号",
        prop: "orderCode",
        width: 150,
      },
    },
    {
      attrs: {
        label: "工单号",
        prop: "code",
        width: 190,
      },
    },
    {
      attrs: {
        label: "E10单号",
        prop: "orderWlnCode",
        width: 150,
      },
    },
    {
      attrs: {
        label: "SKU品号",
        prop: "skuSpecCode",
        width: 140,
      },
    },
    {
      attrs: {
        label: "SKU品名",
        prop: "skuSpecName",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "BOM品号",
        prop: "bomSpecCode",
        width: 130,
      },
    },
    {
      attrs: {
        label: "BOM品名",
        prop: "bomSpecName",
        "min-width": 280,
      },
    },
    {
      attrs: {
        label: "生产状态",
        prop: "status",
        width: 80,
      },
      render(val) {
        if (val == 0) {
          return "待投产";
        }
      },
    },
    {
      attrs: {
        label: "完成时间",
        prop: "completeTime",
        width: 160,
        align: "center",
        fixed: "right",
      },
    },
    {
      attrs: {
        label: "操作",
        width: 120,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "打印生产面单",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickPrint([row]);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
      type: 3,
      beginTime: getNearDays(3).beginTime,
      endTime: getNearDays(3).endTime,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/productionWorkOrder/page", sourceList.value.pagination).then((res) => {
    if (res.rows && res.rows.length > 0) {
      sourceList.value.data = res.rows.map((item) => {
        return {
          ...item,
          isCheck: true,
        };
      });
    } else {
      sourceList.value.data = [];
    }
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList({ beginTime: getNearDays(3).beginTime, endTime: getNearDays(3).endTime });
const clickReset = () => {
  getList("", true);
};
const changeRadioGroup = () => {
  getList({ beginTime: getNearDays(sourceList.value.pagination.type).beginTime, endTime: getNearDays(sourceList.value.pagination.type).endTime });
};
const clickCode = (row) => {
  proxy.$router.replace({
    path: "/addOrder",
    query: {
      detailId: row.id,
      text: "订单详情",
      random: proxy.random(),
      orderInquiry: true,
    },
  });
};
const printObj = ref({
  id: "printMe",
  popTitle: "",
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});
const selectData = ref([]);
const selectRow = (data) => {
  selectData.value = data;
};
const QRcodeList = ref([]);
const clickPrint = (list) => {
  QRcodeList.value = list;
  nextTick(() => {
    for (let i = 0; i < QRcodeList.value.length; i++) {
      proxy.$refs["print" + i][0].innerHTML = ""; //清除二维码方法一
      let text = QRcodeList.value[i].skuSpecCode;
      new QRCode(proxy.$refs["print" + i][0], {
        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: 150,
        height: 150,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    }
    nextTick(() => {
      const btn = document.getElementById("printBtnMini");
      btn.click();
    });
  });
};
const clickSelectPrint = () => {
  if (selectData.value && selectData.value.length > 0) {
    clickPrint(selectData.value);
  } else {
    return ElMessage("请选择需要打印的工单");
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.one {
  position: absolute;
  right: 10px;
  top: 320px;
  width: 70px;
  height: 70px;
  z-index: 99;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #000;
  .two {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    border: 1px dashed #000;
    .three {
      rotate: -45deg;
      font-size: 14px;
    }
  }
}
</style>