<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="县局" prop="xj">
        <el-input
          v-model="queryParams.xj"
          placeholder="请输入县局"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="项目号" prop="xmNo">
        <el-input
          v-model="queryParams.xmNo"
          placeholder="请输入项目号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目描述" prop="xmMs">
        <el-input
          v-model="queryParams.xmMs"
          placeholder="请输入项目描述"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料号" prop="wlNo">
        <el-input
          v-model="queryParams.wlNo"
          placeholder="请输入物料号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料描述" prop="wlMs">
        <el-input
          v-model="queryParams.wlMs"
          placeholder="请输入物料描述"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="供应商编码" prop="gysNo">
        <el-input
          v-model="queryParams.gysNo"
          placeholder="请输入供应商编码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="供应商名称" prop="gysMc">
        <el-input
          v-model="queryParams.gysMc"
          placeholder="请输入供应商名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['query:jh:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['query:jh:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['query:jh:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Upload"
          @click="handleImport"
          v-hasPermi="['query:jh:import']"
        >导入供应计划</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['query:jh:export']">导出供应计划</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Upload"
         @click="handlePrint"
          v-print="printViewInfo"
        >打印</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- @selection-change="handleSelectionChange" -->
    <el-table v-loading="loading" :data="jhList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      
      <!-- <el-table-column label="县局" align="center" prop="xj" /> -->
      <el-table-column label="项目号" align="center" prop="xmNo" />
      <el-table-column label="项目描述" align="center" prop="xmMs" />
      <el-table-column label="物料号" align="center" prop="wlNo" />
      <el-table-column label="物料描述" align="center" prop="wlMs" />
      <el-table-column label="供应商编码" align="center" prop="gysNo" />
      <el-table-column label="供应商名称" align="center" prop="gysMc" />
      <el-table-column label="计划交货金额" align="center" prop="jhAmt" />
      <el-table-column label="合同单价" align="center" prop="htDj" />
      <el-table-column label="SAP订单编号" align="center" prop="sapNo" />
      <el-table-column label="行号" align="center" prop="xh" />
      <el-table-column label="计划交货数量" align="center" prop="jhQty" />
      <el-table-column label="合同数量" align="center" prop="htQty" />
      <el-table-column label="计量单位" align="center" prop="dw" />
      <!-- <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="是否删除" align="center" prop="isDelete" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['query:jh:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['query:jh:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 打印 -->
    <div  id="printMe" class="printMeBox" v-show="showContent">
      <div class="titleBox">
        <div>项目编号：{{ printList.length>0 ? printList[0].xmNo:"" }}</div>
        <div>项目描述：{{ printList.length>0 ? printList[0].xmMs:"" }}</div>
        <!-- <img :src="qrcodeDataURL" alt="二维码" /> -->
        
      </div>
      <el-col :span="24" class="card-box">
          <!-- <el-collapse > -->
        
          
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">订单号</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">二维码</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">供应商名称</div></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in printList" :key="item.id">
                  <td class="el-table__cell is-leaf"><div class="cell">{{ item.sapNo }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" ><qrcode-vue :value="item.sapNo" :size="60" level="H"></qrcode-vue></div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >{{ item.gysMc }}</div></td>
                </tr>
                <!-- <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">已用库位</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >89</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">可用库位</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >20</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >20%</div></td>
                </tr> -->
              </tbody>
            </table>
          </div>
        <!-- </el-collapse> -->
      </el-col>
    </div>
    <!-- 添加或修改供应计划对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="jhRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="县局" prop="xj">
          <el-input v-model="form.xj" placeholder="请输入县局" />
        </el-form-item>
        <el-form-item label="项目号" prop="xmNo">
          <el-input v-model="form.xmNo" placeholder="请输入项目号" />
        </el-form-item>
        <el-form-item label="项目描述" prop="xmMs">
          <el-input v-model="form.xmMs" placeholder="请输入项目描述" />
        </el-form-item>
        <el-form-item label="物料号" prop="wlNo">
          <el-input v-model="form.wlNo" placeholder="请输入物料号" />
        </el-form-item>
        <el-form-item label="物料描述" prop="wlMs">
          <el-input v-model="form.wlMs" placeholder="请输入物料描述" />
        </el-form-item>
        <el-form-item label="供应商编码" prop="gysNo">
          <el-input v-model="form.gysNo" placeholder="请输入供应商编码" />
        </el-form-item>
        <el-form-item label="供应商名称" prop="gysMc">
          <el-input v-model="form.gysMc" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="计划交货金额" prop="jhAmt">
          <el-input v-model="form.jhAmt" placeholder="请输入计划交货金额" />
        </el-form-item>
        <el-form-item label="合同单价" prop="htDj">
          <el-input v-model="form.htDj" placeholder="请输入合同单价" />
        </el-form-item>
        <el-form-item label="SAP订单编号" prop="sapNo">
          <el-input v-model="form.sapNo" placeholder="请输入SAP订单编号" />
        </el-form-item>
        <el-form-item label="行号" prop="xh">
          <el-input v-model="form.xh" placeholder="请输入行号" />
        </el-form-item>
        <el-form-item label="计划交货数量" prop="jhQty">
          <el-input v-model="form.jhQty" placeholder="请输入计划交货数量" />
        </el-form-item>
        <el-form-item label="合同数量" prop="htQty">
          <el-input v-model="form.htQty" placeholder="请输入合同数量" />
        </el-form-item>
        <el-form-item label="计量单位" prop="dw">
          <el-input v-model="form.dw" placeholder="请输入计量单位" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <!-- <el-form-item label="是否删除" prop="isDelete">
          <el-input v-model="form.isDelete" placeholder="请输入是否删除" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <!-- <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
            </div> -->
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> -->
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Jh">
// import { getToken } from "@/utils/auth";
// import { listJh, getJh, delJh, addJh, updateJh } from "@/api/query/jh";
// //生成二维码
// import QrcodeVue from 'qrcode.vue';

// const { proxy } = getCurrentInstance();

// const jhList = ref([]);
// const open = ref(false);
// const loading = ref(true);
// const showSearch = ref(true);
// const ids = ref([]);
// const single = ref(true);
// const multiple = ref(true);
// const total = ref(0);
// const title = ref("");
// const printList = ref([]);
// const showContent = ref(false); // 控制打印内容是否显示
// // const qrcodeDataURL = ref("")
// //文件上传--供应计划导入
// const upload = reactive({
//   // 是否显示弹出层（用户导入）
//   open: false,
//   // 弹出层标题（用户导入）
//   title: "",
//   // 是否禁用上传
//   isUploading: false,
//   // 是否更新已经存在的用户数据
//   updateSupport: 0,
//   // 设置上传的请求头部
//   headers: { Authorization: "Bearer " + getToken() },
//   // 上传的地址
//   url: import.meta.env.VITE_APP_BASE_API + "/query/jh/import"
// });

// const data = reactive({
//   form: {},
//   queryParams: {
//     pageNum: 1,
//     pageSize: 10,
//     // xj: null,
//     xmNo: null, //项目号
//     xmMs: null, //项目描述
//     wlNo: null, //物料号
//     wlMs: null, //物料描述
//     // gysNo: null,
//     gysMc: null,  //gysMc
//     // jhAmt: null,
//     // htDj: null,
//     // sapNo: null,
//     // xh: null,
//     // jhQty: null,
//     // htQty: null,
//     // dw: null,
//     // isDelete: null
//   },
//   rules: {
//   },
//   printViewInfo: {
//         id: "printMe", //打印区域的唯一的id属性
//         popTitle: '入库信息打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        
        
//         beforeOpenCallback () { 
//           showContent.value = false;
//          }, // 开始打印之前的callback
//         openCallback () {  }, // 调用打印时的callback
//         closeCallback () {  }, // 关闭打印的callback(无法区分确认or取消)
//         clickMounted () {  },

//         standard: '',
//         extarCss: ''
//       },
//       // printOption: {
// 			// 		id: 'printMe', // 打印元素的id 不需要携带#号
// 			// 		popTitle: '员工信息' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
// 			// 	},
// });

// const { queryParams, form, rules,printViewInfo } = toRefs(data);

// /** 查询供应计划列表 */
// function getList() {
//   loading.value = true;
//   listJh(queryParams.value).then(response => {
//     jhList.value = response.rows;
//     total.value = response.total;
//     loading.value = false;
//   });
// }

// // 取消按钮
// function cancel() {
//   open.value = false;
//   reset();
// }

// // 表单重置
// function reset() {
//   form.value = {
//     id: null,
//     xj: null,
//     xmNo: null,
//     xmMs: null,
//     wlNo: null,
//     wlMs: null,
//     gysNo: null,
//     gysMc: null,
//     jhAmt: null,
//     htDj: null,
//     sapNo: null,
//     xh: null,
//     jhQty: null,
//     htQty: null,
//     dw: null,
//     remark: null,
//     createBy: null,
//     createTime: null,
//     updateBy: null,
//     updateTime: null,
//     isDelete: null
//   };
//   proxy.resetForm("jhRef");
// }

// /** 搜索按钮操作 */
// function handleQuery() {
//   queryParams.value.pageNum = 1;
//   getList();
// }

// /** 重置按钮操作 */
// function resetQuery() {
//   proxy.resetForm("queryRef");
//   handleQuery();
// }

// // 多选框选中数据
// function handleSelectionChange(selection) {
//   // qrcodeDataURL.value = "101293361"
//   // console.log(selection)
//     //   let sapNo = "101293360"
//     // let width = 200
//     // let height = 200
//     // let correctLevel = 'M'
//     // QRCode.toDataURL({
//     //   sapNo,
//     //   width,
//     //   height,
//     //   correctLevel
//     // }).then((url) => {
//     //   qrcodeDataURL.value = url
//     // }).catch((error) => {
//     //   console.error(error)
//     // })
//   // printList.value = selection.map(item=>({
//   //   sapNo:item.sapNo,
//   //   gysMc:item.gysMc,
//   //   id:item.id
//   // }))
  
//   ids.value = selection.map(item => item.id);
//   single.value = selection.length != 1;
//   multiple.value = !selection.length;
//   printList.value = selection
//   // let printListData = 
//   // for(let i=0;i<selection.length;i++){
//   //   let sapNo = selection[i].sapNo
//   //   let width = 200
//   //   let height = 200
//   //   let correctLevel = 'M'
//   //   QRCode.toDataURL({
//   //     sapNo,
//   //     width,
//   //     height,
//   //     correctLevel
//   //   }).then((url) => {
//   //     this.qrcodeDataURL = url
//   //   }).catch((error) => {
//   //     console.error(error)
//   //   })
//   // }
// }

// /** 新增按钮操作 */
// function handleAdd() {
//   reset();
//   open.value = true;
//   title.value = "添加供应计划";
// }

// /** 修改按钮操作 */
// function handleUpdate(row) {
//   reset();
//   const _id = row.id || ids.value
//   getJh(_id).then(response => {
//     form.value = response.data;
//     open.value = true;
//     title.value = "修改供应计划";
//   });
// }

// /** 提交按钮 */
// function submitForm() {
//   proxy.$refs["jhRef"].validate(valid => {
//     if (valid) {
//       if (form.value.id != null) {
//         updateJh(form.value).then(response => {
//           proxy.$modal.msgSuccess("修改成功");
//           open.value = false;
//           getList();
//         });
//       } else {
//         addJh(form.value).then(response => {
//           proxy.$modal.msgSuccess("新增成功");
//           open.value = false;
//           getList();
//         });
//       }
//     }
//   });
// }

// /** 删除按钮操作 */
// function handleDelete(row) {
//   const _ids = row.id || ids.value;
//   proxy.$modal.confirm('是否确认删除供应计划编号为"' + _ids + '"的数据项？').then(function() {
//     return delJh(_ids);
//   }).then(() => {
//     getList();
//     proxy.$modal.msgSuccess("删除成功");
//   }).catch(() => {});
// }

// /** 导出按钮操作 */
// function handleExport() {
//   proxy.download('query/jh/export', {
//     ...queryParams.value
//   }, `jh_${new Date().getTime()}.xlsx`)
// }
// function handleImport() {
//   upload.title = "供应计划导入";
//   upload.open = true;
// };
// /**文件上传中处理 */
// const handleFileUploadProgress = (event, file, fileList) => {
//   upload.isUploading = true;
// };

// /** 文件上传成功处理 */
// const handleFileSuccess = (response, file, fileList) => {
//   upload.open = false;
//   upload.isUploading = false;
//   proxy.$refs["uploadRef"].handleRemove(file);
//   proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
//   getList();
// };

// /** 提交上传文件 */
// function submitFileForm() {
//   proxy.$refs["uploadRef"].submit();
// };
// // 打印
// function handlePrint(){
//   showContent.value = true;
//   // setTimeout(() => {
//   //   showContent.value = false;
//   // }, 300)
//   // Print.print('printMe');
//   // showContent.value = false;
// }
// getList();
</script>
<style scoped lang="scss">

.app-container{
  .printMeBox{
    
  }
}
.titleBox{
    margin-bottom: 20px;
  }
  @media print {
  @page {
    size: auto;
    margin: 10mm;
  }
}
</style>
