<template>
  <Mask :width="1100" :height="600" :is-show="show" title="库存预警详情" @close="close" :show-footer="true">
    <template #default>
      <div style="height: 100%;padding: 24px">
        <el-table border :data="tableData" style="width: 100%;height: 100%" class="table" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
          <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="剩余库存">
            <template #default="scope">
           <span :class="[scope.row.inventoryWholeNumber===0 && scope.row.inventoryFragmentNumber===0?'danger':'warn']">
          {{
               scope.row.inventoryWholeNumber
             }}{{ scope.row.packagingUnit }}
          <span v-if="scope.row.inventoryFragmentNumber>0">
                {{ scope.row.inventoryFragmentNumber }}{{ scope.row.minPackagingUnit }}
              </span>
           </span>
            </template>
          </el-table-column>
          <el-table-column label="库存预警线">
            <template #default="scope">
              小于等于{{ scope.row.inventoryWarnNumber }}{{ scope.row.packagingUnit }}
            </template>
          </el-table-column>
          <el-table-column label="医保码" prop="hilistCode" show-overflow-tooltip></el-table-column>
          <el-table-column label="生产企业" prop="producer" show-overflow-tooltip></el-table-column>
          <el-table-column label="商品备注" prop="remark" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否允许拆零">
            <template #default="scope">
              {{ scope.row.trdnFlag ? "允许" : "不允许" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import {ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";

const tableData = ref<any>([]);
const show = ref(false);
const init = () => {
  show.value = true;
  post("statistics/numberEarlyWarning", {pageNum: pageNum.value, pageSize: pageSize.value}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
};
defineExpose({init})
const close = () => {
  show.value = false;
  tableData.value = []
};
const pageNum = ref(1);
const pageSize = ref(20);
const total = ref(0);
const changePage = (value: any) => {
  pageNum.value = value
  init()
}
</script>
<style scoped lang="scss">
.table {
  .danger {
    color: #FF282E;
  }

  .warn {
    color: #F69C51;
  }
}

.footer {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>