<template xmlns="http://www.w3.org/1999/html">
  <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="剩余天数" show-overflow-tooltip>
           <template #default="scope">
            <span :class="[scope.row.remaining_days <0?'danger':'warn']">
            {{scope.row.remaining_days <0?'已过期':scope.row.remaining_days+"天后到期"}}
            </span>
           </template>
         </el-table-column>
         <el-table-column label="商品数量" prop="" show-overflow-tooltip>
           <template #default="scope">
             {{
               scope.row.whole_number
             }}{{ scope.row.packaging_unit }}
             <span v-if="scope.row.fragment_number>0">
                {{ scope.row.fragment_number }}{{ scope.row.min_packaging_unit }}
              </span>
           </template>
         </el-table-column>
         <el-table-column label="过期时间" prop="expiry_date"></el-table-column>
         <el-table-column label="采购单号" prop="inventory_purchase_code" show-overflow-tooltip></el-table-column>
         <el-table-column label="批次号" prop="production_batch_code" show-overflow-tooltip></el-table-column>
         <el-table-column label="生产日期" prop="production_date" show-overflow-tooltip></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/expiryDateWarning",{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>