<template>
  <Mask :width="1200" :height="600"  :is-show="isShow" @close="exit" title="查看领用" :show-footer="true">
    <div style="margin-top: 24px;padding: 0 24px">
      <el-descriptions border label-width="100">
        <el-descriptions-item label="领用人" width="200">
          <el-input v-model="formData.name" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-input v-model="formData.remark" disabled></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <table class="simple-table" style="margin-top: 15px">
        <thead>
        <tr>
          <th>名称</th>
          <th>批次</th>
          <th>生产批号</th>
          <th>有效期</th>
          <th>变化前</th>
          <th>出库数量</th>
        </tr>
        </thead>
        <tbody>
        <template v-for="(item,index) in tableList" :key="index">
          <tr>
            <td>{{ item.name }}</td>
            <td>
              <el-select
                  v-model="item.selectList"
                  multiple
                  @change="addLine(item)"
                  :teleported="false"
                  style="width: 100px;"
                  collapse-tags
                  popper-class="table-select">
                <div class="select-header">
                  <span>批次ID</span>
                  <span>生产批号</span>
                  <span>入库数据</span>
                  <span>有效期</span>
                  <span>进价</span>
                </div>
                <el-option
                    v-for="(subItem) in item.batchList"
                    :key="subItem.id"
                    :label="subItem.id"
                    :value="subItem.id"
                    :disabled="true"
                >
                  <div class="option-row">
                    <span>{{ subItem.id }}</span>
                    <span>{{ subItem.productionBatchCode }}</span>
                    <span>{{ subItem.productionDate }}</span>
                    <span>{{ subItem.expiryDate }}</span>
                    <span>{{ subItem.purchaseUnitPrice }}</span>
                  </div>
                </el-option>
              </el-select>
            </td>
            <td></td>
            <td>
            </td>
            <td>
              {{ item.wholeNumber }}{{ item.packagingUnit }}
              <template v-if="item.trdnFlag == 1">
                {{ item.fragmentNumber }}{{ item.minPackagingUnit }}
              </template>
            </td>
            <td>
              {{ item.totalOutWholeNumber }}{{ item.packagingUnit }}
              <template v-if="item.trdnFlag == 1">
                {{ item.totalFragmentNumber }}{{ item.minPackagingUnit }}
              </template>
            </td>
          </tr>
          <template v-for="subItem in item.children">
            <tr>
              <td>-</td>
              <td>-</td>
              <td>{{ subItem.productionBatchCode }}</td>
              <td>{{ subItem.expiryDate }}</td>
              <td>
                {{ subItem.wholeNumber }}{{ subItem.packagingUnit }}
                <template v-if="item.trdnFlag == 1">
                  {{ subItem.fragmentNumber }}{{ subItem.minPackagingUnit }}
                </template>
              </td>
              <td>
                {{ subItem.outWholeNumber }}{{ subItem.packagingUnit }}
                <template v-if="item.trdnFlag == 1">
                  {{ subItem.outFragmentNumber }}{{ subItem.minPackagingUnit }}
                </template>
              </td>
            </tr>
          </template>
        </template>
        </tbody>
      </table>
    </div>
    <template #footer>
      <div class="bottom">
        <el-button type="primary" @click="exit">关闭</el-button>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps} from "vue";
import {post} from "@/utils/request.ts";
import CloseBtn from "@/components/CloseBtn.vue";
import Mask from "@/components/common/Mask.vue";

const props = defineProps({
  id: {
    type: String,
    default: null
  }
})
const isShow = ref<any>(false)
const emit = defineEmits(['close'])
const exit = () => {
  formData.value = {
    useUserId: null,
    name: '',
    username: "",
    remark: ''
  }
  isShow.value = false
  emit('close')
}

const formData = ref({
  useUserId: null,
  name: '',
  username: "",
  remark: ''
})

interface Inventory {
  goodId: string | number;
  batchList?: any[];// 添加 batchList 属性
  children: childCheck[];
  packagingUnit?: string;
  minPackagingUnit?: string;
  totalOutWholeNumber: number;
  totalFragmentNumber: number;
  wholeNumber?: number;
  fragmentNumber?: number;
  selectList?: number[]; // 添加 selectList 属性并指定类型
  name?: string;
  trdnFlag?: number;
}

const tableList = ref<Inventory[]>([]);

interface childCheck {
  id?: number,
  goodsId: number,
  name: string,
  productionBatchCode: string,
  minPackagingNumber: number,
  productionDate: string
  expiryDate: string,
  purchaseUnitPrice: number,
  wholeNumber: number,
  packagingUnit: string,
  fragmentNumber: number,
  fragmentPrice: string,
  minPackagingUnit: string;
  outFragmentNumber: number;
  outWholeNumber: number;


}

const addLine = (row: any) => {
  post('inventory/goods/getListByIds', {idList: row.selectList}).then((list: any) => {
    let children = [];
    for (let i = 0; i < list.length; i++) {
      let inventoryGoods = list[i];
      let index = row.children ? row.children.findIndex((item: any) => item.id === inventoryGoods.id) : -1;
      if (index > -1) {
        children.push(row.children[index]);
      } else {
        let childCheck: childCheck = {
          name: inventoryGoods.name,
          id: inventoryGoods.id,
          goodsId: inventoryGoods.goodId,
          minPackagingNumber: row.minPackagingNumber,
          productionBatchCode: inventoryGoods.productionBatchCode,
          productionDate: inventoryGoods.productionDate,
          expiryDate: inventoryGoods.expiryDate,
          purchaseUnitPrice: inventoryGoods.purchaseUnitPrice,
          wholeNumber: inventoryGoods.wholeNumber,
          packagingUnit: inventoryGoods.packagingUnit,
          fragmentNumber: inventoryGoods.fragmentNumber,
          fragmentPrice: inventoryGoods.fragmentPrice,
          minPackagingUnit: row.minPackagingUnit,
          outFragmentNumber: inventoryGoods.outFragmentNumber,
          outWholeNumber: inventoryGoods.outWholeNumber,

        }
        children.push(childCheck);
      }
    }
    row.children = children;
  })
}
const getUserInfo = () => {
  post("manager/user/verify").then((res: any) => {
    formData.value.useUserId = res.id;
    formData.value.name = res.name;
    formData.value.username = res.username;
  })
}
const detail = (id: any) => {
  isShow.value = true
  post("inventory/apply/getApplyDetail", {id}).then((res: any) => {
    tableList.value = JSON.parse(res);
  })
}
onMounted(() => {

})
const init=(id: any) => {
  getUserInfo()
  detail(id)
}
defineExpose({init})
</script>
<style scoped lang="scss">
.simple-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: none;
  color: #606266;

  thead {
    background-color: #f5f7fa;

    th {
      padding: 12px 0;
      text-align: left;
      font-weight: bold; /* 表头加粗 */
      font-size: 14px; /* 表头字号 */
      border-bottom: 1px solid #ebeef5;
    }
  }
}

tbody {
  tr:hover {
    background-color: #f5f7fa; /* 悬停效果 */
  }

  td {
    padding: 12px 0;
    text-align: left;
    font-size: 14px; /* 单元格字号 */
    border-bottom: 1px solid #ebeef5;
  }
}

.table-select {
  .el-select-dropdown__item {
    padding: 0 !important;
    height: auto;
  }

  // 表头样式
  .select-header {
    display: flex;
    padding: 8px 16px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;

    span {
      flex: 1;
      min-width: 110px;
      font-weight: bold;
    }
  }

  // 选项行样式
  .option-row {
    display: flex;
    padding: 8px 16px;

    span {
      flex: 1;
      min-width: 110px;
    }
  }
}

.remark {
  // 前置标签背景色
  :deep(.el-input-group__prepend) {
    background-color: #fffdec;
  }

  // 输入框主体背景色
  :deep(.el-input__wrapper) {
    background-color: #fffdec;
  }
}

.btn {
  margin-top: 5px;
}


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