<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @search-change="searchChange"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange1"
    >
      <template #menu-left="{}">
        <el-button
          v-if ="info.workOrderState  === '1' || info.workOrderState  === '2' || info.workOrderState  === '0'"
          type="primary"
          icon="el-icon-plus"
          @click="addObj"
        >新增</el-button>

        <el-button
          v-if ="info.workOrderState  === '1' || info.workOrderState  === '2' || info.workOrderState  === '0'"
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          @click="multipleDelete"
        >删除</el-button>
        <el-button
            :disabled="toDeleteIds.length < 1"
            class="ml-3"
            @click="printCode">打印
        </el-button>
      </template>
      <template #menu-right="{}">
        <el-dropdown split-button
        >导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                  @click="downloadTemplate('/api/v1/plan/seq/template')"
              >
                <i-ep-download />下载模板
              </el-dropdown-item>
              <el-dropdown-item @click="importExcelData">
                <i-ep-top />导入数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button
            class="ml-3"
            @click="exportData('/api/v1/plan/seq/export')"
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>

    </avue-crud>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="1250px"
        @close="dialog.visible = false"
    >
      <div style="display: flex;flex-wrap: wrap;" ref="toPrintRef">
        <div v-for="item of clickObjs" style="width: 238px;overflow: hidden;font-size:10px;">
          <div style="float: left;padding-bottom: 30px">
          <div style="padding-left: 70px">
            <el-text style="margin: 0 auto">mes专用</el-text>
          </div>
          <vue-qrcode  :value="item.seqNo"  size="45" error-level="H"></vue-qrcode>

          <div>
            <el-text>{{item.seqNo}}</el-text>
          </div>
          <div>
            <el-text>工单号:</el-text><el-text>{{info.workOrderCode}}</el-text>
          </div>
          <div>
            <el-text>订单编号:</el-text><el-text>{{info.orderCode}}</el-text>
          </div>
          <div>
            <el-text>物料号:</el-text><el-text>{{info.materialCode}}</el-text>
          </div>
          <div>
            <el-text>物料名称:</el-text><el-text>{{info.materialName}}</el-text>
          </div>
          <div>
            <el-text>物料型号:</el-text><el-text>{{info.materialModel}}</el-text>
          </div>
          </div>

        </div>
        <div v-for="item of clickObjs" style="width: 238px;overflow: hidden;font-size:10px;">
          <div style="float: left">
            <div style="padding-left: 50px" >
              <el-text style="margin: 0 auto">TDM及其他</el-text>
            </div>
            <vue-qrcode  :value="item.seqNo.replace('_','-')"  size="45" error-level="H"></vue-qrcode>

            <div>
              <el-text>{{tdmSeqNo(item.seqNo)}}</el-text>
            </div>
            <div>
              <el-text>工单号:</el-text><el-text>{{info.workOrderCode}}</el-text>
            </div>
            <div>
              <el-text>订单编号:</el-text><el-text>{{info.orderCode}}</el-text>
            </div>
            <div>
              <el-text>物料号:</el-text><el-text>{{info.materialCode}}</el-text>
            </div>
            <div>
              <el-text>物料名称:</el-text><el-text>{{info.materialName}}</el-text>
            </div>
            <div>
              <el-text>物料型号:</el-text><el-text>{{info.materialModel}}</el-text>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-footer" align="center">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="printPage">打印</el-button>
      </div>
    </el-dialog>
    <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  </div>
</template>
<script setup>
import {defineProps, ref} from "vue";
import { useCrud } from "@/hooks/userCrud";
import { useCommonStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
import { html2CanvasPrint } from "@/utils/common";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const toPrintRef = ref(null);
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const info = ref({})
const props = defineProps({
  workOrderInfo: {
    type: Object,
    default: () => {
      return null;
    }
  }
})
const printPage = ()=>{
  html2CanvasPrint(toPrintRef.value);
}
const dialog = reactive({
  title: "二维码打印",
  visible: false,
});
const clickObjs = ref([])
const selectionChange1 =(row)=>{
  toDeleteIds.value = [];
  row?.forEach((element) => {
    toDeleteIds.value.push(element.id);
  });
  clickObjs.value = row
}
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const addObj =()=>{
  form.value.workOrderCode = props.workOrderInfo.workOrderCode
  crudRef.value && crudRef.value.rowAdd();
}
watch(
    () => props.workOrderInfo,
    () => {
      form.value.workOrderCode = props.workOrderInfo.workOrderCode
      info.value = props.workOrderInfo
      search.value.workOrderCode = props.workOrderInfo.workOrderCode
      dataList();
    }
);

const tdmSeqNo=(seqNo)=>{
  return seqNo.replace("_","-");
}
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/plan/seq",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具

const printCode = () =>{
  dialog.visible = true
}


// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: true,
  search: false,
  filterBtn: false,
  columnBtn: false,
  editBtn: false,
  addBtn: false,
  viewBtn: false,
  menu: false,
  column: [
    {
      label: "流转卡号",
      prop: "seqNo",
      width: 220,
      search: true,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "流转卡号不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "workOrderCode",
      prop: "workOrderCode",
      hide: true,
      addDisplay: false,
      editDisplay: false,
    },
    {
      label: "编号",
      prop: "nameplateNo",
      search: true,
      overHidden: true,
    },
    {
      label: "状态",
      prop: "state",
      minWidth: 60,
      display: false,
      type: "select",
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.work_order_seq_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      }
    },
  ],
});

onMounted(() => {
  info.value = props.workOrderInfo
  form.value.workOrderCode = props.workOrderInfo.workOrderCode
  search.value.workOrderCode = props.workOrderInfo.workOrderCode
  dataList();
});
/**
 * 上传excel相关
 */
const uploadRef = ref(null);
const uploadFinished = () => {
  // 上传完成后的刷新操作
  page.currentPage = 1;
  dataList();
};
const importExcelData = () => {
  if (uploadRef.value) {
    uploadRef.value.show("/api/v1/plan/seq/import","流转号导入",{workOrderCode: search.value.workOrderCode});
  }
};
</script>
