<template>
  <div class="page-container row-container">
    <section class="list-part-container" style="flex: 2">
      <!-- 搜索区域 -->
      <el-form
        class="list-search-container"
        :model="queryParams"
        ref="queryRef"
        :inline="true"
      >
        <el-form-item class="section-title" label="合格证打印" />
        <el-form-item label="批次号：">
          <el-input
            placeholder="请输入批次号"
            v-model.trim="queryParams.lotCode"
            @keydown.enter.prevent
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="炉号：">
          <el-input
            placeholder="请输入炉号"
            v-model.trim="queryParams.furnaceNumber"
            @keydown.enter.prevent
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="产品描述：">
          <el-input
            placeholder="请输入产品描述"
            v-model.trim="queryParams.productDescription"
            @keydown.enter.prevent
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="包装线：">
          <el-select
            placeholder="请选择包装线"
            v-model.trim="queryParams.packageResourceGroupId"
            @keydown.enter.prevent
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in packageLineList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <!-- <el-button type="primary" @click="getInfoFromP2">拉取包装信息</el-button> -->
        </el-form-item>
      </el-form>
      <!-- 列表区域 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            ref="certificateTable"
            v-loading="loading"
            row-key="id"
            @row-click="handleRow"
            :data="certificateList"
            height="100%"
          >
            <el-table-column type="selection" width="55" align="center" />"
            <el-table-column
              label="行号"
              type="index"
              width="80"
              align="center"
            />
            <el-table-column
              label="产品编码"
              prop="productCode"
              align="center"
            />
            <el-table-column
              label="产品描述"
              prop="productDescription"
              align="center"
            />
            <el-table-column
              label="客户名称"
              prop="companyAlias"
              align="center"
            />
            <el-table-column label="炉号" prop="furnaceNumber" align="center" />
            <el-table-column label="批次号" prop="lotCode" align="center" />
            <el-table-column
              label="打印次数"
              prop="printCount"
              align="center"
            />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" @click="handleInfo(scope.row)"
                  >详情</el-button
                >
                <el-button type="primary" @click="handleHistory(scope.row)"
                  >历史记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </section>
    <form-dialog ref="formRef" :getList="handleQuery" />
    <HistoryDialog ref="historyDialogRef" />
    <!-- 设备档案管理表单 -->
  </div>
</template>

<script setup name="Equipment">
import { listCertificate, getDayworkList } from "@/api/business/certificate";
import { listGroup } from "@/api/business/packageResourceGroup";
import {
  getP2Accessories,
  getP2CompanyProductPackage,
} from "@/api/business/p2.js";
import { getToken } from "@/utils/auth";
import formDialog from "@/views/business/certificate/form";
import HistoryDialog from "./HistoryDialog.vue";
const { proxy } = getCurrentInstance();

const webHost = import.meta.env.VITE_APP_BASE_API;
const headers = { Authorization: getToken() };
/**字典数组 */
/** 设备档案管理 */
const selections = ref([]);
const certificateTable = ref(null);
const total = ref(0);
const sealItem = ref({});
const certificateList = ref([]);
const loading = ref(false);
const formRef = ref(null);
const historyDialogRef = ref(null);
const packageLineList = ref([]);
const webUrl = ref("");
/** 设备档案 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const form = ref({});
const formLoading = ref(false);

onMounted(() => {
  getList();
  getPackageLine();
  getInfoFromP2();
});

const getPackageLine = () => {
  listGroup({}).then((res) => {
    if (res.code == 200) {
      packageLineList.value = res.rows;
    }
  });
};

/** 获取设备档案列表 */
const getList = () => {
  form.value = {};
  getDayworkList(queryParams.value).then((res) => {
    if (res.code == 200) {
      certificateList.value = res.rows;
      if (certificateList.value.length > 0) {
        handleRow(certificateList.value[0]);
      }
      total.value = res.total;
    }
  });
};

function processImageUrl(data) {
  console.log("processImageUrl");
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var urlList = previewImageUrl(item.url);
    item.pictureList = urlList;
  }
}
function previewImageUrl(url) {
  var urlList = [];
  if (url) {
    var itemUrl = document.location.origin + webHost + url;
    console.log(itemUrl);
    urlList.push(itemUrl);
  }
  return urlList;
}

function handleRow(row) {
  sealItem.value = row;
}
/** 文件上传前的 回调事件 */
function beforeUpload(file) {
  formLoading.value = true;
  const allowedTypes = ["image/jpeg", "image/png"]; // 添加或修改为图片的MIME类型
  const isAllowed = allowedTypes.includes(file.type);
  console.log(isAllowed);
  if (!isAllowed) {
    proxy.$modal.msgError("只能上传图片格式的文件!");
    formLoading.value = false;
    return false;
  }
}

/**文件数量超出的回调 */
function handleExceed(files) {
  form.value.url = files[0].url;
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}
/**
 * @param {*} row
 */
function handleInfo(row) {
  formRef.value.open(row);
}

function handleHistory(row) {
  historyDialogRef.value.open({ dayworkId: row.id });
}

function handleQuery() {
  getList();
}

function getInfoFromP2() {
  proxy.$modal.loading("正在拉取数据，请稍后...");
  getP2Accessories()
    .then((res) => {
      if (res.code === 200) {
        getP2CompanyProductPackage()
          .then((res) => {
            if (res.code === 200) {
              proxy.$modal.closeLoading();
              // proxy.$modal.msgSuccess("拉取成功")
            } else {
              proxy.$modal.closeLoading();
              // proxy.$modal.msgError("拉取失败")
            }
          })
          .catch((err) => {
            proxy.$modal.closeLoading();
            // proxy.$modal.msgError("拉取失败")
          });
      } else {
        proxy.$modal.closeLoading();
        // proxy.$modal.msgError("拉取失败")
      }
    })
    .catch((err) => {
      proxy.$modal.closeLoading();
      // proxy.$modal.msgError("拉取失败")
    });
}
</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;
}

.move-handle {
  cursor: move;
  background-color: #eee;
}
</style>
