<template>
  <div style="padding: 0 20px">
    <el-table :data="fileDatas" class="tableView">
      <el-table-column prop="fileName" label="文件名称" align="center" />
      <el-table-column prop="fileCode" label="文档编码" align="center" />
      <el-table-column prop="materialCode" label="物料编码" align="center" />
      <el-table-column prop="sourceType" label="来源类型" align="center">
        <template #default="{ row }">
          {{ row.sourceType == "1" ? "PDM同步" : "手动维护" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <PDFView
            :need-to-show-pdf="true"
            content-type="button"
            :is-link="true"
            :pdf-source="setSource(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="pageObj.pageSize"
      v-model:page="pageObj.pageNo"
      :position="'right'"
      :total="pageObj.total"
      @pagination="getDatas"
    />
  </div>
</template>
<script setup>
import { getData, delData } from "@/api/prosteps/pdmfile.ts";
import { useProcessStore } from "@/store";
import { downloadFile } from "@/utils/downLoad";

defineOptions({
  name: "Gongxuwenjian",
});
const addKey = ref(false);
const addStatus = ref(false);
const srcList = ref([]);
const fileNameList = ref([]);
const filePath = import.meta.env.VITE_APP_UPLOAD_URL;
const setSource = (row) => {
  if (row.sourceType == 1) {
    return row.filePath;
  } else if (row.sourceType == 2) {
    return filePath + row.filePath;
  }
};
const testFiles = () => {
  form.value.filePath = srcList.value[0];
};
const form = ref({
  fileName: "",
});
const formRef = ref(null);
const rules = reactive({
  filePath: [{ required: true, trigger: "change" }],
});
const resetAdd = () => {
  addKey.value = !addKey.value;
  addStatus.value = false;
  form.value.filePath = "";
  srcList.value = [];
  fileNameList.value = [];
};
const delDatas = async (id) => {
  const { data, code } = await delData({
    id,
  });
  if (code == "200") {
    ElMessage.success("操作成功！");
    getDatas();
  }
};
//新增提交
const submit = async () => {
  await formRef.value.validate(async (valid) => {
    if (valid) {
      const { data, code } = await addData({
        fileName: fileNameList.value[0],
        filePath: srcList.value[0],
        operationId: store.odersData.operationId,
        processId: store.scanInfo.id,
        seqNo: store.scanInfo.seqNo,
        workOrderCode: store.odersData.workOrderCode,
      });
      if (code == "200") {
        ElMessage.success("新增成功！");
        resetAdd();
        getDatas();
      }
    } else {
      ElMessage.error("请检查表单");
    }
  });
};

const store = useProcessStore();
const tpDatas = ref([]);
const fileDatas = ref([]);
const downLoad = async (url, name) => {
  let names = name.split(".")[0];
  let resUrl = url;
  await downloadFile(resUrl, names);
};
//模版数据获取
const getTpDatas = async () => {
  const { data } = await templateData({
    pageNo: 1,
    pageSize: 999,
    processId: store.odersData.operationId,
  });
  tpDatas.value = data.records;
};
const pageObj = ref({
  pageSize: 10,
  pageNo: 1,
  total: 0,
});
//数据列表获取
const getDatas = async () => {
  const { data } = await getData({
    pageNo: pageObj.value.pageNo,
    pageSize: pageObj.value.pageSize,
    materialCode: store.scanInfo.materialCode,
  });
  fileDatas.value = data.records;
  pageObj.value.total = data.totalCount;
};
onMounted(() => {
  getDatas();
});
</script>
<style lang="scss" scoped>
.tableView {
  width: 100%;
  height: calc(100vh - 160px);
  padding: 20px 0px;
  border-radius: 16px;
}
.stepsViewScrollH {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  padding: 20px;
  padding-top: 0px;
  .right {
    flex: 1;
    border-radius: 16px;
    margin-left: 20px;
    .tableView {
      width: 100%;
      height: calc(100vh - 340px);
      padding: 20px 0px;
      border-radius: 16px !important;
    }
    .btns {
      height: 50px;
      display: flex;
      align-items: center;
      background-color: rgb(241, 243, 245);
      .btn {
        height: 30px;
      }
    }
  }
}
</style>
