<template>
  <div class="page-container row-container">
    <section class="list-part-container" style="flex: 2;">
      <!-- 搜索区域 -->
      <el-form
        class="list-search-container"
        :inline="true"
        style="display: flex"
      >
        <el-form-item class="section-title" label="工段列表" />
        <el-form-item label="工段编码：">
          <el-input placeholder="请输入工段编码" clearable style="width: 120px"
            v-model.trim="queryDeptParams.deptCode" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item label="工段名称：">
          <el-input placeholder="请输入工段名称" clearable style="width: 120px"
            v-model.trim="queryDeptParams.deptName" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="getWorkSections">
            搜索
          </el-button>
          </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            ref="workSectionTable"
            v-loading="workSectionLoading"
            :data="workSectionList"
            row-key="id"
            height="100%"
            highlight-current-row
            @current-change="handleWorkSectionChange"
          >
            <el-table-column
              label="行号"
              type="index"
              width="50"
              align="center"
            />
            <el-table-column
              label="工段编码"
              prop="deptCode"
              align="center"
            />
            <el-table-column label="工段名称" prop="label" align="center" />
          </el-table>
        </div>
      </div>
    </section>
    <section class="list-part-container" style="flex: 3">
      <el-form class="list-search-container" :model="transferCodeParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="转运码管理" />
        <el-form-item label="转运码编号：">
          <el-input placeholder="请输入转运码编号" clearable style="width: 150px"
            v-model.trim="transferCodeParams.code" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryTransferCode">
            搜索
          </el-button>
          <el-button type="primary" icon="Plus" v-hasPermi="['business:transferCode:add']" @click="handleShowDialog">
            新增
          </el-button>
          <el-button :disabled="selections.length == 0" type="warning" icon="Printer"
            @click="handleBatchPrintQrCode">打印</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="transferCodeTable" v-loading="transferCodeLoading" row-key="id" @selection-change="handleSelectionChange"
            :data="storageCodeList" height="100%">
            <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
            <el-table-column type="index" label="序号"  align="center" />
            <el-table-column prop="code" label="编号"  align="center" />
            <el-table-column prop="startCode" label="起始编码"  align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center">
              <template #default="scope">
                {{
                  proxy
                    .moment(scope.row.createTime)
                    .format("YYYY-MM-DD HH:mm:ss")
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="transferCodeTotal > 0" :total="transferCodeTotal" v-model:page="transferCodeParams.pageNum"
        v-model:limit="transferCodeParams.pageSize" @pagination="getTransferCode" />
    </section>

    <!-- 载具类别表单 -->
    <transfer-code-form ref="transferCodeRef" @handleSaveSuccess="getTransferCode" />
    <div id="image-group" style="height: 0px; width: 0px">
      <el-image v-for="item in selections" :key="item.id" :src="webHost + item.qcCode" fit="cover"
        style="width: 100mm; height: 100mm">
      </el-image>
    </div>
  </div>
</template>

<script setup name="transferCode">
import { workSectionTree } from "@/api/system/dept";
import {
  listTransferCode
} from "@/api/business/transferCode";
import printJS from "print-js";
import transferCodeForm from "./form";
const webHost = import.meta.env.VITE_APP_PRODUCTION_API;
const { proxy } = getCurrentInstance();
const storageCodeList = ref([]);
const transferCodeLoading = ref(false);
const transferCodeTotal = ref(0);
const selections = ref([]);
/**工段 */
const workSectionList = ref([]);
const workSectionLoading = ref(false);
const currentWorkSection = ref({});
const data = reactive({
  form: {},
  queryDeptParams: {
    deptCode: "",
    deptName: "",
  },
  transferCodeParams: {
    code: "",
    deptId:null,
    pageNum: 1,
    pageSize: 10,
  },
});

const { transferCodeParams,queryDeptParams } = toRefs(data);

/****************************  转运托盘码相关事件  ****************************/
/** 获取工段列表 */
function getWorkSections() {
  workSectionLoading.value = true;
    //如果当前登录人不是管理员传true；否则传false
    queryDeptParams.value.getType = true
  workSectionTree(queryDeptParams.value).then((res) => {
    workSectionList.value = res.data;
    if (workSectionList.value.length > 0) {
      proxy.$refs.workSectionTable.setCurrentRow(workSectionList.value[0]);
    } else {
      workSectionList.value = [];
    }
    workSectionLoading.value = false;
  });
}
/**工段点击事件 */
const handleWorkSectionChange = (row) => {
  if (row) {
    proxy.$refs.transferCodeTable.clearSelection()
      selections.value = []
    transferCodeParams.value.code = "";
    transferCodeParams.value.pageNum = 1;
    currentWorkSection.value = row;
    transferCodeParams.value.deptId = row.id;
    getTransferCode();
  }
};

/**打开载具类别弹窗 */
function handleShowDialog() {
    proxy.$refs.transferCodeRef.open(transferCodeParams.value.deptId);
}

const getTransferCode = () => {
  transferCodeLoading.value = true;
  listTransferCode(transferCodeParams.value).then((res) => {
    transferCodeLoading.value = false;
    storageCodeList.value = res.rows;
    transferCodeTotal.value = res.total;
  });
};

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
  console.log(selections.value);
}
/**刷新载具 */
const handleRefreshStorageCode = () => {
  getTransferCode();
};
/**载具查询 */
const handleQueryTransferCode = () => {
  transferCodeParams.value.pageNum = 1;
  handleRefreshStorageCode();
};


const handleBatchPrintQrCode = async () => {
  if (selections.value.length > 0) {
      const imageGroup = document.getElementById("image-group");
        printJS({
          printable: "image-group", // 这里是你要打印内容的DOM元素的id
          type: "html",
          style: "@page { size: auto;  margin: 0mm; }", // 可以添加打印样式
        });
  }
};

onMounted(() => {
  getWorkSections();
});
</script>
<style scoped>
:deep(.el-tree-node__label) {
  font-size: 14px !important;
  display: inline-block;
  width: 100%;
}

:deep(.el-tree-node__content) {
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 8px 0;
  line-height: 23px;
}
</style>
