<template>
  <div>
    <div
      style="max-height: calc(100vh - 174px); overflow-x: hidden; overflow-y: auto"
      v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
      <div style="box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px" v-for="(item, index) in formData.data.orderEncasementList" :key="index">
        <div style="background-color: #edf0f5; padding: 4px">
          <el-row :gutter="4" class="row-top">
            <el-col :span="8">包裹规格格（cm）</el-col>
            <el-col :span="8">包裹净重（kg）</el-col>
            <el-col :span="8">包裹体积（m³）</el-col>
          </el-row>
          <el-row :gutter="4" class="row-bottom">
            <el-col :span="8">{{ `${item.length}*${item.width}*${item.height}` }}</el-col>
            <el-col :span="8">{{ item.netWeight / 1000 }}</el-col>
            <el-col :span="8">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
          </el-row>
        </div>
        <div style="background-color: white; border: 1px solid #ebeef5">
          <el-table
            border
            :data="item.orderEncasementDetailList"
            :row-style="{ height: '35px' }"
            :cell-style="{ padding: '0' }"
            header-row-class-name="tableHeaderTwo">
            <el-table-column label="产品品号" prop="skuSpecCode" width="150" />
            <el-table-column label="产品品名" prop="skuSpecName" />
            <el-table-column label="打包数量" align="center" width="120">
              <template #default="{ row }">
                <div>
                  {{ row.quantity ? row.quantity : 0 }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="text-align: center; margin: 10px">
      <el-button @click="clickCancel()" size="large">关 闭</el-button>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
  rowData: Object,
});
const loading = ref(false);
const formData = reactive({
  data: {
    skuInfoList: [],
    orderEncasementList: [],
  },
});
onMounted(() => {
  if (props.rowData && props.rowData.id) {
    getDetails();
  }
});
const getDetails = () => {
  loading.value = true;
  proxy.post("/issueBill/assemblyDetail", { id: props.rowData.id }).then(
    (res) => {
      formData.data = res;
      loading.value = false;
    },
    (err) => {
      console.log(err);
      loading.value = false;
    }
  );
};
const emit = defineEmits(["clickCancel"]);
const clickCancel = () => {
  emit("clickCancel", false);
};
</script>

<style lang="scss" scoped>
.row-top .el-col {
  text-align: center;
  height: 32px;
  line-height: 32px;
}
.row-bottom .el-col {
  text-align: center;
  color: red;
  font-weight: 700;
  height: 32px;
  line-height: 32px;
}
::v-deep(.tableHeaderTwo) {
  th {
    background-color: white !important;
    height: 35px;
    padding: 0;
  }
}
</style>
