<template>
  <Mask :width="1200" :height="540" :is-show="isShow"  @close="exit" title="查看盘点" :show-footer="true">
    <div class="body_wrapper">
      <div class="top">
        <el-form :model="form" style="width: 100%" label-width="auto" class="demo-ruleForm" label-position="top">
          <el-form-item label="备注" style="width: 100%;margin-right: 0">
            <el-input disabled v-model="form.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <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 list">
            <tr>
              <td>{{ item.name }}</td>
              <td v-if="item.childIdList.length=0">无</td>
              <td v-else>
                <el-select
                    v-model="item.childIdList"
                    multiple
                    :teleported="false"
                    style="width: 150px;"
                    collapse-tags
                    popper-class="table-select"
                    :collapse-tags-tooltip="true"
                >
                  <div class="select-header">
                    <span>批次ID</span>
                    <span>生产批号</span>
                    <span>入库时间</span>
                    <span>有效期</span>
                    <span>进价</span>
                  </div>
                  <el-option
                      v-for="(subItem,subIndex) in item.selectList"
                      :key="subItem.id"
                      :label="subItem.id"
                      :value="subItem.id"
                      disabled
                  >
                    <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>{{ item.minPackagingNumber }}</td>
              <td>
                {{ item.before.wholeNumber }}{{ item.packagingUnit }}
                <template v-if="item.trdnFlag ==1">
                  {{ item.before.fragmentNumber }}{{ item.minPackagingUnit }}
                </template>
              </td>
              <td>
                {{ item.after.wholeNumber }}{{ item.packagingUnit }}
                <template v-if="item.trdnFlag ==1">
                  {{ item.after.fragmentNumber }}{{ item.minPackagingUnit }}
                </template>
              </td>
              <td>
                {{ item.change.wholeNumber }}{{ item.packagingUnit }}
                <template v-if="item.trdnFlag ==1">
                  {{ item.change.fragmentNumber }}{{ item.minPackagingUnit }}
                </template>
              </td>
            </tr>
            <template v-for="(subItem,subIndex) in item.children">
              <tr>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>
                  {{ subItem.before.wholeNumber }}{{ item.packagingUnit }}
                  <template v-if="item.trdnFlag ==1">
                    {{ subItem.before.fragmentNumber }}{{ item.minPackagingUnit }}
                  </template>
                </td>
                <td>
                  {{ subItem.after.wholeNumber }}{{ item.packagingUnit }}
                  <template v-if="item.trdnFlag ==1">
                    {{ subItem.after.fragmentNumber }}{{ item.minPackagingUnit }}
                  </template>
                </td>
                <td>
                  {{ subItem.change.wholeNumber }}{{ item.packagingUnit }}
                  <template v-if="item.trdnFlag ==1">
                    {{ item.change.fragmentNumber }}{{ item.minPackagingUnit }}
                  </template>
                </td>
              </tr>
            </template>
          </template>
          </tbody>
        </table>
      </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="btn">
          <el-button @click="exit" type="primary">关闭</el-button>
        </div>
      </div>
    </template>
  </Mask>



</template>


<script setup lang="ts">
import {onMounted,defineProps} from "vue";
import {post} from "@/utils/request.ts";
import {ref} from "vue";
import Mask from "@/components/common/Mask.vue";
const props = defineProps({
  id: {
    type: String,
    default: null
  }
})
const form=ref<any>({
  remark: "",
})
interface Check {
  id?: number,
  goodsId: number,
  name: string,
  minPackagingUnit: string,
  packagingUnit: string,
  minPackagingNumber: number,
  listSize: number,
  trdnFlag: number,
  childIdList: number[],
  before: {
    wholeNumber: number,
    fragmentNumber: number,
  },
  after: {
    wholeNumber: number,
    fragmentNumber: number,
  },
  change: {
    wholeNumber: number,
    fragmentNumber: number,
  }
  children: childCheck[],
  selectList: seletcType[],
}

interface seletcType {
  id: number,
  wholeNumber: number,
  fragmentNumber: number,
  productionBatchCode: string,
  productionDate: string,
  expiryDate: string,
  purchaseUnitPrice: string
}

interface childCheck {
  id?: number,
  goodsId: number,
  name: string,
  minPackagingNumber: number,
  before: {
    wholeNumber: number,
    fragmentNumber: number,
  },
  after: {
    wholeNumber: number,
    fragmentNumber: number,
  },
  change: {
    wholeNumber: number,
    fragmentNumber: number,
  }

}

const list = ref<Check[]>([])
const emit = defineEmits(['close'])
let exit = () => {
  form.value = {
    remark: ""
  }
  list.value=[]
  isShow.value = false
  emit('close');
}
const detail = (id: any) => {
  isShow.value = true
  post("inventory/check/getCheckDetail",{id}).then((res: any) => {
    list.value = JSON.parse(res);
  })
}
const isShow = ref(false)
defineExpose({detail})
</script>
<style scoped lang="scss">
.body_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 0;
  flex-direction: column;
  margin-top: 24px;
  padding: 0 24px;

  .top {
    position: relative;
    width: 100%;
    height: 60px;
  }

  .content {
    display: block;
    width: 100%;
    flex: 1;
    //min-height: 0;

    table {
      //border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      //border: 1px solid #ccc;
      padding: 8px;
      text-align: left;

    }

    th {
      //background-color: #F9F9F9;
    }

    /* 可选：为可点击的行添加鼠标悬停效果 */
    tr:hover {
      //background-color: #f5f5f5;
    }
  }

  .bottom {
    height: 60px;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}

.header {
  display: flex;

  .text {
    font-size: 16px;
    width: 200px;
    color: #6a6a6a;
  }
}

/* 表格容器 */
.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;
  }
}

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