<!-- 出库信息审核 -->
<template>
  <basic-container>
    <el-form class="whole_form" :inline="true">
      <el-form-item label="物资名称">
        <el-input v-model="searchList.dmUpname2" style="width:200px" clearable />
      </el-form-item>
      <el-form-item label="调用省份">
        <el-select v-model="searchList.provinceSiteIdList" 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 label="调出仓库">
        <el-select v-model="searchList.warehouseDeptId" multiple filterable style="width: 250px" 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>
        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
        <el-button type="primary" v-if="hasBtn('tj:jz:export')" :icon="Download" @click="exportTemplate">导出</el-button>
      </el-form-item>
    </el-form>
    
    <div id="printTest">
      <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%; height:calc(100vh - 280px);" stripe border>
        <el-table-column type="index" label="序号" align="center" width="60">
          <template #default="scope">
            <span v-if="scope.$index == tableData.length-1">
              合计
            </span>
            <span v-else>
              {{ scope.$index +1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="materials3" label="物资名称" header-align="center" align="center" />
        <el-table-column prop="provinceLabel" label="调用省份" header-align="center" align="center" />
        <el-table-column prop="quantity" label="数量" header-align="center" align="center" />
        <el-table-column prop="unitPrice" label="单价 (万元)" header-align="center" align="center" />
        <el-table-column prop="totalPrice" label="价值 (万元)" header-align="center" align="center" />
        <el-table-column prop="warehouseName" label="调出仓库" header-align="center" align="center" />
      </el-table>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { selectDistributeListByMaterials, exportjzdywztjb } from "@/api/dataStatistics/dywz";
import { getDeptTypeList } from "@/api/inAndOut/formationFilling/out";
import { Search, RefreshRight, Download } from "@element-plus/icons-vue";
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import { useDict } from "@/hooks/dict";
import exportBlob from "@/global/exportBlob";
import hasBtn from "@/global/hasBtn";
const { province_ch } = useDict("province_ch");

const dcckOptions = ref([]);
const searchList = ref({
  dmUpname2: "",
  provinceSiteIdList: [],
  warehouseDeptId: []
});
const tableData = ref([])

// 获取列表
const getList = () => {
  const data = reactive({
    dmUpcode0List: [300],
    ...searchList.value
  });
  selectDistributeListByMaterials(data).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data;
    }
  });
};
const exportToExcel = () => {  
  const wb = XLSX.utils.table_to_book(document.querySelector("#printTest"))
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  const blob = new Blob([wbout], { type: 'application/octet-stream' })
  saveAs(blob, `救灾调用物资统计表.xlsx`)
};
interface SpanMethodProps {
  rowIndex: number
  columnIndex: number
}

const arraySpanMethod = ({
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (rowIndex === tableData.value.length - 1) {
    if (columnIndex === 0) {
      return [1, 3]
    } else if (columnIndex < 3) {
      return [0, 0]
    }
  }
}
// 查询
const handleSearch = () => {
  getList();
};
// 重置
const clearSearch = () => {
  searchList.value = {
    dmUpname2: "",
    provinceSiteIdList: [],
    warehouseDeptId: []
  };
  getList();
};

getDeptTypeList().then((res: any) => {
  if (res.code === 0) {
    dcckOptions.value = res.data;
  }
});
//导出
const exportTemplate = async () => {
  try {
    const data = reactive({
      dmUpcode0List: [300],
      ...searchList.value
    });
    const response = await exportjzdywztjb(data);
    exportBlob(response, "救灾调用物资");
  } catch (error) {
    console.error("Error exporting Excel:", error);
  }
};
getList();
</script>

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