<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-table :data="tableData" style="width: 100%; margin-top: 50px" stripe border>
      <el-table-column type="index" label="序号" align="center" width="60">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="gameName" v-if="deptType === '2'" label="垂管局" align="center" />
      <el-table-column prop="province" v-if="deptType === '1'" label="省份" align="center" />
      <el-table-column prop="warehouse" v-if="deptType === '3'" label="库点简称" align="center" />
      <el-table-column prop="materialGroupVo" label="物资大类" align="center" />
      <el-table-column prop="materialTypeVo" label="物资类别" align="center" />
      <el-table-column prop="materialNameVo" label="物资名称" align="center" />
      <el-table-column prop="entryDate" label="入库日期" align="center" />
      <el-table-column prop="quantity" label="数量" align="center" />
      <el-table-column prop="unitPrice" label="单价" align="center" />
      <el-table-column prop="maintenanceTime" label="维护保养时间" align="center"> </el-table-column>
      <el-table-column prop="maintenanceUnit" label="维护保养单位" align="center"> </el-table-column>
      <el-table-column prop="maintenancePerson" label="维护保养人" align="center"> </el-table-column>
      <el-table-column prop="fileName" label="附件" align="center">
        <template #default="scope">
          <el-form-item v-if="props.type != 'look'" :prop="'materialMaintenanceStatuses.' + scope.$index + '.fileName'">
            <el-upload
              :disabled="props.type == 'look'"
              v-model:file-list="scope.row.filePartList"
              class="upload-demo"
              style="width: 100%"
              :action="fileUrl"
              :data="paramsData"
              :headers="myHeader"
              :on-preview="handlePreview"
              multiple
              :on-remove="handleRemove"
              :before-remove="(response:any, file:any, index:number) => beforeRemove(response, file, scope.$index)"
              :on-success="(response, file, index) => getFileInfo(response, file, scope.$index)"
              :on-error="errorUpload"
              :before-upload="beforeUpload"
              :limit="1"
              :on-exceed="handleExceed"
            >
              <el-button v-if="props.type != 'look'" size="small" type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <p v-else @click="handlePreviewDetail(scope.row.filePart)" style="cursor: pointer; color: #409eff">
            {{ scope.row.fileName }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <div class="operationbox">
      <el-button @click="returnPage">返回</el-button>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { lookInData } from "@/api/upkeep/statistics";
import { ElMessage, ElMessageBox } from "element-plus";
import store from "@/store";
import router from "@/router";
import { useGetters } from "@/hooks/storeHooks";
const { access_token } = useGetters(["access_token"]);
import { getQuery } from "@/hooks/detailQuery/index";
const props = getQuery("/upkeep/StatisticsDetail");
const deptType = ref("");
const { userInfo } = useGetters(["userInfo"]);
import { dictTree, sysFile } from "@/api/inAndOut/formationFilling/in";
const tableData: any = ref([]);
/** 列表数据获取 */
const getList = () => {
  lookInData(props.id).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data;
    }
  });
};
onMounted(() => {
  getList();
  deptType.value = userInfo.value.deptType ? userInfo.value.deptType : "";
  console.log(deptType.value);
});
/** 返回 */
const returnPage = () => {
  store.commit("DEL_TAG", store.getters.tag);
  router.push({
    path: "/upkeep/statistics"
  });
};
//附件部分
const fileUrl = "/admin/sysFile/uploadVoucher";
let paramsData = reactive({
  bucket: "bound"
});
const myHeader = { Authorization: "Bearer " + access_token.value };
// 附件相关
const getFileInfo = (res: any, file: any, index: number) => {
  tableData.value[index].filePart = res.data.fileName;
  tableData.value[index].fileName = file.name;
};
const handleRemove = (file: any, uploadFiles: any) => {
  console.log(file, uploadFiles);
};
const handlePreview = (file: any) => {
  if (file.url) {
    sysFile(file.url).then((res: any) => {
      const blob = new Blob([res], { type: "application/pdf;charset=UTF-8" });
      const bFile = URL.createObjectURL(blob);
      window.open(bFile);
    });
  }
};

const handlePreviewDetail = (url: string) => {
  sysFile(url).then((res: any) => {
    const blob = new Blob([res], { type: "application/pdf;charset=UTF-8" });
    const bFile = URL.createObjectURL(blob);
    window.open(bFile);
  });
};
const handleExceed = (files: any, uploadFiles: any) => {
  ElMessage.warning(`限制上传一个文件`);
};
const beforeRemove = (uploadFile: any, uploadFiles: any, index: number) => {
  tableData.value[index].filePart = "";
  tableData.value[index].fileName = "";
};
const errorUpload = (err: any, file: any, fileList: any) => {
  ElMessage.error("文件上传失败，UploadAjaxError：" + JSON.parse(JSON.stringify(err)).status);
};
// 上传前对附件进行的操作
const beforeUpload: UploadProps["beforeUpload"] = (file) => {
  // const typeList = ".pdf.jpg.png.gif.jpeg.PDF.JPG.PNG.GIF.JPEG";
  const typeList = ".pdf"; //限制为pdf格式
  const { name, type } = fileNameDispose(file.name);
  if (!typeList.includes(type)) {
    ElMessage.error("仅支持pdf类型文件，请重新上传。");
    return false;
  }
  if (name.length > 30) {
    ElMessage.error("文件名不可超30字，请重新命名后再上传。");
    return false;
  }
  const isLt20M = file.size / 1024 / 1024 < 100;
  if (!isLt20M) {
    ElMessage.error("文件大小不可超过 100MB。");
    return false;
  }
  return true;
};
// 获取上传附件的名字和类型
const fileNameDispose = (name: string) => {
  const arr = name.split(".");
  if (arr.length === 2) {
    return { name: arr[0], type: arr[1] };
  } else {
    const type = arr.splice(arr.length - 1, 1)[0];
    const name = arr.join(".");
    return { name, type };
  }
};
/** -----------------附件结束--------------- */
</script>

<style lang="scss" scoped>
.upload-btn {
  margin: 0px 10px;
  .el-upload-list {
    margin: 0;
    height: 0px;
    overflow: hidden;
    width: 0px;
  }
}
.w-200 {
  width: 200px;
}
.operationbox {
  text-align: center;
  margin-top: 30px;
}
</style>
