<template>
  <div class="pageIndexClass">
    <div>
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
               :selectConfig="selectConfig" :action-list="[
              
        ]" @get-list="getList">

        <template #pic="{ item }">
          <div v-if="item.fileList &&item.fileList.length > 0">
            <img :src="item.fileList[0].fileUrl" class="pic" @click="handleClickFile(item.fileList[0])" />
          </div>
          <div v-else></div>
        </template>

        <template #picOne="{ item }">
          <div v-if="item.fileListOne &&item.fileListOne.length > 0">
            <img :src="item.fileListOne[0].fileUrl" class="pic" @click="handleClickFile(item.fileListOne[0])" />
          </div>
          <div v-else></div>
        </template>

        <template v-for="(slotItem, index) in processesData" v-slot:[slotItem.id]="{ item }" :key="slotItem.id">
          <div style="width:100%">
            <div v-if="isShowCotent(slotItem,item)">
              <el-icon :size="20" color="green">
                <CircleCheckFilled />
              </el-icon>
            </div>
            <div v-else>
              <el-icon :size="20" color="red">
                <CircleClose />
              </el-icon>
            </div>
          </div>
        </template>

      </byTable>
    </div>
    <el-dialog :title="'打印二维码'" v-model="dialogVisible" width="350px" destroy-on-close>
      <div>
        <div id="pdfDom" style="width:100%">
          <div style="font-size:20px;text-align:center">
            {{printData.name}}
          </div>
          <div style="border-top: 1px solid #000;border-bottom: 1px solid #000; padding: 10px 0; margin:10px auto;text-align:center">
            <div :ref="printData.id" style="width:200px;margin-left:55px">
              {{printData.scanValue}}
            </div>
            <div style="font-size:20px;text-align:center;font-weight:700;margin-top:10px">
              {{printData.createTime}}
            </div>
            <!-- 换页 -->
            <!-- <div style="page-break-after: always"></div> -->
          </div>
          <div style="margin-left:10px;display:flex;flex-direction:column;justify-content:space-around">
            <div style="font-size:14px;margin-top:8px"> 产品编码：{{printData.productName}}</div>
            <div style="font-size:14px;margin-top:8px">
              产品名称：{{printData.productSpec}}
            </div>
            <div style="font-size:14px;margin-top:8px">
              原材料编码：{{printData.productSpec}}
            </div>
            <div style="font-size:14px;margin-top:8px">
              原材料名称：{{printData.productSpec}}
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false" size="defualt">取 消</el-button>
        <el-button type="primary" v-print="printObj" size="defualt">打 印</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import QRCode from "qrcodejs2-fix";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
  },
});
const treeData = ref([]);
const dialogVisible = ref(false);
const modalType = ref("add");
const statusData = ref([
  {
    label: "未开始",
    value: "0",
  },
  {
    label: "进行中",
    value: "1",
  },
  {
    label: "已完成",
    value: "2",
  },
]);
const selectConfig = computed(() => [
  {
    label: "生产状态",
    prop: "produceStatus",
    data: statusData.value,
  },
  {
    type: "time",
    label: "交期",
    placeholder: "开始日期",
    prop: "staDeliveryPeriod",
    placeholderOne: "结束日期",
    propOne: "endDeliveryPeriod",
  },
  {
    type: "time",
    label: "下单日期",
    placeholder: "开始日期",
    prop: "beginTime",
    placeholderOne: "结束日期",
    propOne: "endTime",
  },
]);
const config = ref([
  {
    attrs: {
      label: "订单号",
      prop: "orderCode",
      width: 130,
    },
  },
  {
    attrs: {
      label: "设计图",
      slot: "picOne",
      width: 80,
    },
  },
  {
    attrs: {
      label: "产品图片",
      slot: "pic",
      width: 80,
    },
  },
  {
    attrs: {
      label: "产品编码",
      prop: "productCode",
      width: 130,
    },
  },
  {
    attrs: {
      label: "产品名称",
      prop: "productName",
      "min-width": 130,
    },
  },
  {
    attrs: {
      label: "生产件数",
      prop: "quantity",
      width: 100,
    },
  },
  {
    attrs: {
      label: "生产状态",
      prop: "produceStatus",
      width: 100,
    },
    render(val) {
      return proxy.dictValueLabel(val, statusData.value);
    },
  },
  {
    attrs: {
      label: "下单时间",
      prop: "orderCreateTime",
      width: 160,
    },
  },
  {
    attrs: {
      label: "交期",
      prop: "deliveryPeriod",
      width: 160,
    },
  },
  {
    attrs: {
      label: "投产时间",
      prop: "produceTime",
      width: 160,
    },
  },
  {
    attrs: {
      label: "完成时间",
      prop: "finishTime",
      width: 160,
    },
  },
  {
    attrs: {
      label: "生产用时",
      prop: "usageTime",
      width: 100,
    },
  },
]);
const formData = reactive({
  data: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const formDom = ref(null);
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "code",
      label: "店铺编号",
      itemWidth: 100,
      disabled: false,
    },
    {
      type: "input",
      prop: "name",
      label: "店铺名称",
      itemWidth: 100,
      disabled: false,
    },
    {
      type: "treeSelect",
      prop: "deptId",
      label: "负责部门",
      data: treeData.value,
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 100,
      disabled: false,
    },
  ];
});
const rules = ref({
  deptId: [{ required: true, message: "请选择负责部门", trigger: "change" }],
  name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入店铺编号", trigger: "blur" }],
});

const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/produceOrderDetail/page", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res.rows;
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
      const productIdList = res.rows.map((x) => x.productId);
      // 请求文件数据并回显
      if (productIdList.length > 0) {
        proxy.getFile(productIdList, sourceList.value.data, "productId");
      }

      const productIdListOne = res.rows.map((x) => x.contractDetailId);
      // 请求文件数据并回显
      if (productIdListOne.length > 0) {
        proxy.getFile(
          productIdListOne,
          sourceList.value.data,
          "contractDetailId",
          "fileListOne"
        );
      }
    });
};

const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formData.data = {
    definition: "2",
    fileList: [],
  };
  if (currencyData.value && currencyData.value.length > 0) {
    formData.data.currency = currencyData.value[0].dictKey;
    formData.data.costCurrency = currencyData.value[0].dictKey;
  }
};

const submitForm = () => {
  formDom.value.handleSubmit((valid) => {
    submitLoading.value = true;
    proxy.post("/shopInfo/" + modalType.value, formData.data).then(
      (res) => {
        proxy.msgTip("操作成功", 1);
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const getDtl = (row) => {
  modalType.value = "edit";
  proxy.post("/shopInfo/detail", { id: row.id }).then((res) => {
    formData.data = res;
    dialogVisible.value = true;
  });
};
const processesData = ref([]);
const getProcesses = () => {
  proxy
    .post("/productionProcesses/page", { pageNum: 1, pageSize: 9999 })
    .then((res) => {
      for (let i = 0; i < res.rows.length; i++) {
        const ele = res.rows[i];
        let attrs = {
          label: `[ ${ele.name} ]`,
          slot: ele.id,
          isNeedHeaderSlot: false,
          width: 90,
          fixed: "right",
        };
        config.value.push({
          attrs,
        });
      }

      config.value.push({
        attrs: {
          label: "操作",
          width: "100",
          align: "center",
          fixed: "right",
        },
        renderHTML(row) {
          return [
            {
              attrs: {
                label: "打印二维码",
                type: "primary",
                text: true,
              },
              el: "button",
              click() {
                printQrCode(row);
              },
            },
          ];
        },
      });
      processesData.value = res.rows;
    });
};
getProcesses();
getList();
const printData = ref({});
const printQrCode = (row) => {
  printData.value = row;
  dialogVisible.value = true;
  nextTick(() => {
    proxy.$refs[row.id].innerHTML = ""; //清除二维码方法一
    new QRCode(proxy.$refs[row.id], {
      text: row.id,
      width: 200,
      height: 200,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  });
};
const printObj = ref({
  id: "pdfDom",
  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 handleClickFile = (file) => {
  window.open(file.fileUrl, "_blank");
};

const isShowCotent = (slot, item) => {
  if (item && item.productionProcessesList) {
    return item.productionProcessesList.some((x) => x.id == slot.id);
  } else {
    return false;
  }
};
</script>

<style lang="scss" scoped>
::v-deep(.el-progress__text) {
  font-size: 14px !important;
}
.content {
  padding: 20px;
}
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}
</style>