<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form class="whole_form" :inline="true">
      <el-form-item label="调出仓库">
        <el-select v-model="searchList.deptId" style="width: 200px" filterable clearable>
          <el-option
            v-for="item in dcckOptions"
            :key="item.deptId"
            :label="item.abbreviationName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出库类型">
        <el-select v-model="searchList.outboundType" style="width: 200px" clearable>
          <el-option v-for="item in outdound_type" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="物资名称">
        <el-input v-model="searchList.materialName" style="width: 200px" clearable />
      </el-form-item>
      <el-form-item label="出库凭证">
        <el-input v-model="searchList.orderName" style="width: 200px" clearable />
      </el-form-item>
      <el-form-item label="调用省份">
        <el-select v-model="searchList.province" multiple filterable style="width: 250px" clearable>
          <el-option v-for="item in province_ch" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
        <el-button type="primary" :icon="Plus" @click="openDetail">新增</el-button>
        <!-- <el-upload
          v-if="hasBtn('ck:xf:import')"
          class="upload-btn"
          :action="fileUrl"
          :data="paramsData"
          :headers="myHeader"
          :on-success="handleSuccess"
          :on-error="errorUpload"
          :before-upload="beforeUploadFun"
        >
          <el-button :icon="Upload" type="primary">导入</el-button>
        </el-upload> -->
        <el-button type="primary" :icon="Download" @click="exportTemplate" v-if="hasBtn('ck:xf:export')"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="序号" align="center" width="60">
        <template #default="scope">
          {{ (page.currentPage - 1) * page.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderName" label="出库凭证" align="center" />
      <el-table-column prop="warehouse" label="调出仓库" align="center" />
      <el-table-column prop="outboundType" label="出库类型" align="center">
        <template #default="scope">
          {{ scope.row.outboundType ? showCh(scope.row.outboundType, outdound_type) : scope.row.outboundType }}
        </template>
      </el-table-column>
      <el-table-column prop="materialName" label="物资名称" align="center" />
      <el-table-column prop="quantity" label="数量" align="center" width="80" />
      <el-table-column prop="province" label="调用省份" align="center"></el-table-column>
      <el-table-column prop="submitTime" label="填写时间" align="center" width="115" />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="{ row }">
          <el-button link type="success" size="small" @click="openDetail(row, 'look')">查看</el-button>
          <el-button link type="primary" size="small" v-if="row.status == 8" @click="openDetail(row, 'edit')"
            >编辑</el-button
          >
          <el-button link type="danger" size="small" v-if="row.status == 8" @click="deleteClick(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
      v-model:page="page.currentPage"
      v-model:limit="page.pageSize"
      :total="page.total"
      @pagination="getList"
    />
  </basic-container>
</template>

<script setup lang="ts">
import { Plus, Search, RefreshRight, Upload, Download } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { deleteOutDataNew, getDeptTypeList, exportcjxxxf, getOutPageNew } from "@/api/inAndOut/formationFilling/out";
import router from "@/router";
import { ElMessage, UploadProps, ElMessageBox } from "element-plus";
import { useDict } from "@/hooks/dict";
import store from "@/store";
import { errorUpload, beforeUploadFun, fileNameDispose } from "@/global/importFile";
import { setQuery } from "@/hooks/detailQuery/index";
import exportBlob from "@/global/exportBlob";
import { useGetters } from "@/hooks/storeHooks";
const { access_token } = useGetters(["access_token"]);
import hasBtn from "@/global/hasBtn";
const { outdound_type, province_ch } = useDict("outdound_type", "province_ch");

const dcckOptions = ref([]);
const searchList = ref({
  outboundType: "",
  materialName: "",
  deptId: "", //调出仓库id
  provinceSiteIdList: [],
  orderName: "",
  province: ""
});
const tableData: any = ref([]);
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const handleClick = () => {
  console.log("click");
};
// 根据码回显中文
const showCh = (value, option) => {
  const filterItem = option.filter((item) => item.value == value);
  return filterItem.length ? filterItem[0].label : "-";
};

// 清空搜索条件
const clearSearch = () => {
  searchList.value = {
    outboundType: "",
    materialName: "",
    deptId: "", //调出仓库id
    provinceSiteIdList: [],
    orderName: "",
    province: ""
  };
  getList();
};
/** 添加/修改/查看进入详情操作 */
const openDetail = (row: any, type: string) => {
  setQuery("/InformationFilling/outIssueDetail", { id: row.orderId, type: type });
  // router.push({
  //   path: "/InformationFilling/outIssueDetail",
  //   query: {id: row.outboundId, type: type}
  // });
};
/** 列表数据获取 */
const getList = () => {
  console.log(store.state.searchQuery);
  store.commit("SET_SEARCH_QUERY", {
    outIssue: {
      outboundType: searchList.value.outboundType,
      materialName: searchList.value.materialName,
      deptId: searchList.value.deptId
    }
  });
  const data = reactive({
    // status: 7,
    size: page.pageSize,
    current: page.currentPage,
    ...searchList.value
  });
  getOutPageNew(data).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data.records;
      page.total = res.data.total;
    }
  });
};
/** 删除操作 */
const deleteClick = (row: any) => {
  ElMessageBox.confirm(`是否删除此条数据？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteOutDataNew(row.orderId).then((res: any) => {
      if (res.code === 0) {
        getList();
        ElMessage({
          message: "删除成功！",
          type: "success"
        });
      } else {
        ElMessage({
          message: "删除失败！",
          type: "error"
        });
      }
    });
  });
};
//导入模板
const fileUrl = "/admin/out/lower/import";
let paramsData = reactive({
  bucket: "bound"
});
const myHeader = { Authorization: "Bearer " + access_token.value };
// 附件相关
const handleSuccess: UploadProps["onSuccess"] = () => {
  getList();
};
/** -----------------附件结束--------------- */
/** 初始化 **/
searchList.value = store.state.searchQuery.searchQuery.outIssue || {};
getDeptTypeList().then((res: any) => {
  if (res.code === 0) {
    dcckOptions.value = res.data;
  }
});
//导出
const exportTemplate = async () => {
  try {
    const data = reactive({
      // status: 7,
      lower: 1,
      size: page.pageSize,
      current: page.currentPage,
      ...searchList.value
    });
    const response = await exportcjxxxf(data);
    exportBlob(response, "出库信息下发表");
  } catch (error) {
    console.error("Error exporting Excel:", error);
  }
};

getList();
</script>

<style lang="scss" scoped></style>
