<template>
  <div class="container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>消息通知</span>
        </div>
      </template>
      <div class="content_item">
        <el-scrollbar height="65vh">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="outboundType" label="出库类型" min-width="200" header-align="center" 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="materialGroup" label="物资名称" min-width="300" header-align="center" align="center">
              <template #default="scope">
                {{
                  (scope.row.materialGroup ? scope.row.materialGroup : "") +
                  " / " +
                  (scope.row.materialType ? scope.row.materialType : "") +
                  " / " +
                  (scope.row.materialName ? scope.row.materialName : "") +
                  " / " +
                  (scope.row.unit ? scope.row.unit : "")
                }}
              </template>
            </el-table-column>
            <el-table-column prop="specs" label="规格" min-width="200" header-align="center" align="center" />
            <el-table-column prop="quantity" label="数量" min-width="200" header-align="center" align="center" />
            <el-table-column prop="province" label="调用省份" min-width="200" header-align="center" align="center">
              <template #default="scope">
                {{ scope.row.province ? showCh(scope.row.province, province_ch) : scope.row.province }}
              </template>
            </el-table-column>
            <el-table-column
              prop="outboundTime"
              label="出库日期"
              min-width="200"
              header-align="center"
              align="center"
            />
          </el-table>
          <pagination
            v-show="page.total > 0"
            v-model:page="page.currentPage"
            v-model:limit="page.pageSize"
            :total="page.total"
            layout="->,total, sizes, prev, pager, next, jumper"
            @pagination="getList"
          />
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { kuList } from "@/api/home/index";
import { ref, reactive, toRefs, onMounted } from "vue";
import { useDict } from "@/hooks/dict";

const { outdound_type, province_ch } = useDict("outdound_type", "province_ch");

const data = reactive({
  tableData: []
});
let page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

let { tableData } = toRefs(data);

// const list = ref([
//   {
//     content: "信息",
//     overTime: "时间"
//   },
//   {
//     content: "关于调拨出库的通知....",
//     overTime: "2024-03-11"
//   },
//   {
//     content: "关于调拨出库的通知....",
//     overTime: "2024-03-11"
//   },
//   {
//     content: "关于调拨出库的通知....",
//     overTime: "2024-03-11"
//   },
//   {
//     content: "关于调拨出库的通知....",
//     overTime: "2024-03-11"
//   }
// ]);

// 获取统计数据
const getList = () => {
  const data = reactive({
    size: page.pageSize,
    current: page.currentPage
  });
  kuList(data).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data.records;
      page.total = res.data.total;
    }
  });
};

// 根据码回显中文
const showCh = (value: any, option: any) => {
  const filterItem = option.filter((item: any) => item.value == value);
  return filterItem.length ? filterItem[0].label : "-";
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
:deep(.el-card) {
  width: 100%;
  height: 100%;
  .card-header {
    height: 20px;
    font-size: 18px;
    line-height: 20px;
    // font-weight: bolder;
  }
  .el-card__body {
    height: 100%;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // padding-top: 100px;
    // font-size: 20px;
    .content_item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
