<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form class="whole_form" :inline="true" label-suffix=":" :model="formData">
      <el-row>
        <el-col :span="6">
          <el-form-item label="储备仓库">
            <el-select v-model="formData.deptId" style="width: 200px" clearable filterable placeholder="请选择储备仓库">
              <el-option
                v-for="item in warehouseList"
                :key="item.deptId"
                :label="item.abbreviationName"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资大类">
            <el-select
              v-model="formData.materialGroup"
              @change="handlerChange"
              placeholder="物资大类"
              class="w-200"
              clearable
            >
              <el-option v-for="item in wzOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资类别">
            <el-select v-model="formData.materialType" style="width: 200px" clearable>
              <el-option v-for="item in wzOptions1" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资名称">
            <el-input v-model="formData.materialName" style="width: 200px" class="w-200" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入库时间">
            <el-date-picker v-model="formData.startEntryDate" type="date" value-format="YYYY-MM-DD"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- <el-form-item label="维护保养时间">
        <el-date-picker
          v-model="formData.date"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </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="Download" @click="exportTemplate">导出</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <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 fixed="right" label="操作" width="150" align="center">
        <template #default="{ row }">
          <el-button link type="success" size="small" @click="openDetail(row, 'look', 2)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </basic-container>
</template>

<script setup lang="ts">
import { Plus, Search, RefreshRight } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { getInPage, inExport, inImport } from "@/api/upkeep/statistics";
import router from "@/router";
import { UploadProps } from "element-plus";
import exportBlob from "@/global/exportBlob";
import store from "@/store";
import { setQuery } from "@/hooks/detailQuery/index";
import { useGetters } from "@/hooks/storeHooks";
const { access_token } = useGetters(["access_token"]);
import { getCityList } from "@/api/dataStatistics/index";
import { dictTree } from "@/api/inAndOut/formationFilling/in";
const formData = ref({
  materialGroup: "",
  materialName: "",
  startEntryDate: "",
  deptId: "",
  dmUpcode1List: "",
  materialType: ""
});
const deptType = ref("");
const { userInfo } = useGetters(["userInfo"]);
const tableData: any = ref([]);
const warehouseList: any = ref([]);
// 清空搜索条件
const clearSearch = () => {
  formData.value = {
    materialGroup: "",
    materialName: "",
    deptId: "",
    startEntryDate: "",
    dmUpcode1List: "",
    materialType: ""
  };
  getList();
};
const wzOptions: any = ref([]);
const wzOptions1: any = ref([]);
//物资大类获取
const getSelect = () => {
  dictTree({}).then((res: any) => {
    if (res.code === 0) {
      wzOptions.value = res.data;
    }
  });
};

const handlerChange = (value: number) => {
  wzOptions.value.forEach((item: any) => {
    if (item.id === value) {
      wzOptions1.value = item.children;
    }
  });
};

/** 添加/修改/查看进入详情操作 */
const openDetail = (row: any, type: string, show: any) => {
  setQuery("/upkeep/StatisticsDetail", { id: row.id, type, show });
};
// 获取物资类别
// getSysTreeDict({ type: 1, difference: 2, parentCodeList: "" }).then((res: any) => {
//   if (res.code === 0) {
//     suppliesList.value = res.data;
//   }
// });
/** 列表数据获取 */
const getList = () => {
  const data = reactive({
    ...formData.value
  });
  getInPage(data).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data.data;
    }
  });
};
// 获取储备仓库
let postData = {
  parentIdList: [userInfo.value.deptId],
  warehouseType: ""
};
getCityList(postData).then((res: any) => {
  if (res.code === 0) {
    warehouseList.value = res.data;
  }
});
//导出模板
const exportTemplate = async () => {
  try {
    // 假设 fetchExcelData 是一个函数，它发送请求到后台并返回 Blob 类型的响应
    const response = await inExport();
    exportBlob(response, "维护保养统计表");
  } catch (error) {
    console.error("Error exporting Excel:", error);
  }
};
//导入模板
const fileUrl = "/admin/in/fill/import";
let paramsData = reactive({
  bucket: "bound"
});
const myHeader = { Authorization: "Bearer " + access_token.value };
// 附件相关
const handleSuccess: UploadProps["onSuccess"] = () => {
  getList();
};
/** -----------------附件结束--------------- */

/** 初始化 **/
formData.value = store.state.searchQuery.searchQuery.enter || {};
getList();
onMounted(() => {
  getSelect();
  deptType.value = userInfo.value.deptType ? userInfo.value.deptType : "";
  console.log(deptType.value);
});
</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;
}
</style>
