<template>
  <Mask :top="50" :height="600" :width="900" :is-show="show">
    <CloseBtn @click="show = false"></CloseBtn>
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="header">选择批次</div>
        </div>
      </template>

      <div class="detail">
        <div class="total">
          <div class="name">{{ item.name }}</div>
          <div class="number">总量
            <el-input-number v-model="item.retailNumber" @change="changeTotalNumber()"></el-input-number>
            {{ item.selectedUnit }}
          </div>
        </div>
        <div class="batch">
          <table class="simple-table table">
            <thead>
            <tr>
              <th>生产批号</th>
              <th>效期</th>
              <th>生产日期</th>
              <th>进价</th>
              <th>入库日期</th>
              <th>库存</th>
              <th>数量</th>
              <th>单位</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(subItem,index) in item.retailOrderList">
              <td>{{ subItem.inventory.purchaseUnitPrice }}</td>
              <td>{{ subItem.inventory.expiryDate }}</td>
              <td>{{ subItem.inventory.productionDate }}</td>
              <td>￥{{ subItem.inventory.purchaseUnitPrice.toFixed(2) }}</td>
              <td>{{ subItem.inventory.createDatetime }}</td>
              <td>{{ subItem.inventory.wholeNumber }}{{ subItem.inventory.packagingUnit }}
                <template v-if="item.trdnFlag ==1">
                  {{ subItem.inventory.fragmentNumber }}{{ subItem.inventory.minPackagingUnit }}
                </template>
              </td>
              <td>
                <template v-if="item.selectedUnit == item.packagingUnit">
                  <el-input-number v-model="subItem.deductWhole" @click="changeBatchNumber()"></el-input-number>
                </template>
                <template v-else>
                  <el-input-number v-model="subItem.deductFragment" @click="changeBatchNumber()"></el-input-number>
                </template>

              </td>
              <td>{{ item.selectedUnit }}</td>
            </tr>
            </tbody>


          </table>

        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="show = false" type="primary">确定</el-button>
          <el-button @click="show = false">关闭</el-button>
        </div>
      </template>
    </el-card>


  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/Mask.vue";
import {ref} from "vue";
import {post} from "@/utils/request.ts";
import CloseBtn from "@/components/CloseBtn.vue";

const item = ref();
const show = ref(false);
const init = (data: any) => {
  item.value = data;
  show.value = true;
  console.log("tllllllllllll",item.value)
}
defineExpose({init});

const getPreout = (item: any) => {
  post("retail/preout", {id: item.value.id, wholeNumber: item.value.retailNumber}).then((res: any) => {
    item.value.retailOrderList = res;
  })
}
const changeBatchNumber = () => {
  item.value.retailNumber = 0;
  item.value.retailOrderList.forEach((subItem: any) => {
    item.value.retailNumber += subItem.deductWhole;
  })
  item.value.totalPrice = Number(item.value.retailNumber) * Number(item.value.unitPrice)
}

const changeTotalNumber = () => {
  item.value.totalPrice = Number(item.value.retailNumber) * Number(item.value.unitPrice)
  getPreout(item);
}
</script>
<style scoped lang="scss">
.header {
  font-size: 18px;
  font-weight: bold;
}

.detail {
  margin-top: 10px;
  height: 350px;
  .total {
    display: flex;

    .name {
      width: 70%;
    }

    .number {
      margin-left: 20px;
    }
  }
}

</style>