<template>
  <Mask :width="1100" :height="600" :is-show="show" title="库存预警详情" @close="close">
    <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.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>
  </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>