<template xmlns="http://www.w3.org/1999/html">
  <Mask :width="1100" :height="600" :is-show="show" title="过期商品详情" @close="show=false">
      <el-table :data="tableData"  style="width: 100%" class="table" max-height="1000px">
        <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="剩余天数">
          <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="">
          <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"></el-table-column>
        <el-table-column label="批次号" prop="production_batch_code"></el-table-column>
        <el-table-column label="生产日期" prop="production_date"></el-table-column>

      </el-table>
  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import {ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";
const tableData = ref<any>([]);
const show = ref(false);
const init = (list:any) => {
  tableData.value = list;
  show.value = true;
};
defineExpose({init})
const close = () => {
  show.value = false;
};

</script>
<style scoped lang="scss">
.table{
  margin-top: 30px;
  .danger{
    color: #FF282E;
  }
  .warn{
    color: #F69C51;
  }
}
</style>