<template>
  <el-row :gutter="10">
    <el-col :span="7">
      <el-card class="box-card">
        <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">产品清单</div>
        <el-table :data="formData.data.skuInfoList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" height="calc(100vh - 315px)">
          <el-table-column label="产品规格">
            <template #default="{ row }">
              <div>{{ row.skuSpecCode }}</div>
              <div>{{ row.skuSpecName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="剩余可装箱数" prop="surplusQuantity" align="center" width="110" />
          <el-table-column label="净重（g）" width="120">
            <template #default="{ row }">
              <el-input-number
                onmousewheel="return false;"
                v-model="row.quantity"
                placeholder="净重"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="0"
                :max="row.surplusQuantity" />
            </template>
          </el-table-column>
        </el-table>
        <div style="font-size: 16px; font-weight: 700; margin: 10px 0">包裹规格信息</div>
        <el-form :model="formData.data" :rules="rules" label-width="120px" ref="refForm">
          <el-form-item label="尺寸（cm）" required>
            <el-row>
              <el-col :span="8">
                <el-form-item label="" prop="length">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="formData.data.length"
                    placeholder="长"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="" prop="width">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="formData.data.width"
                    placeholder="宽"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="" prop="height">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="formData.data.height"
                    placeholder="高"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button type="primary" style="width: 100%" @click="submitPack()" v-preReClick>装包裹</el-button>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="17">
      <el-card class="box-card">
        <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">包裹规格数据</div>
        <div
          style="max-height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto"
          v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
          <!-- <div class="packing" v-for="(item, index) in formData.data.orderEncasementList" :key="index">
            <div class="top">
              <div class="item">
                <div>单包裹规格格（cm）</div>
                <div class="red">{{ `${item.length}*${item.width}*${item.height}` }}</div>
              </div>
              <div class="item">
                <div>单包裹净重（kg）</div>
                <div class="red">{{ item.netWeight }}</div>
              </div>
              <div class="item">
                <div>单包裹体积（m³）</div>
                <div class="red">{{ item.bulking }}</div>
              </div>
              <div class="item">
                <div>总包裹数</div>
                <div class="red">{{ item.total }}</div>
              </div>
              <div class="item">
                <div>总净重（kg）</div>
                <div class="red">{{ item.netWeight }}</div>
              </div>
              <div class="item">
                <div>总体积（m³）</div>
                <div class="red">{{ item.bulkingTotal }}</div>
              </div>
              <div class="item" style="text-align: center">
                <div>操作</div>
                <div class="miniBtn">
                  <el-button type="text" size="mini" @click="copyBox(item.id)">复制包裹</el-button>
                  <el-button type="text" size="mini" style="color: #f56c6c" @click="handleDel(item.id)">删除</el-button>
                </div>
              </div>
            </div>
            <div class="mail-1">
              <el-table
                border
                :data="item.expressPackingProductList"
                size="small"
                :row-style="{ height: '35px' }"
                :cell-style="{ padding: '0' }"
                :span-method="arraySpanMethod">
                <el-table-column label="产品品号" prop="productColorCode" align="left" width="150" />
                <el-table-column label="产品品名" prop="productColorName" align="left" />
                <el-table-column label="打包数量" prop="quantity" align="left" width="90">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.quantity ? scope.row.quantity : 0 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="总包裹数" align="center" width="80">
                  <template>
                    <div>x {{ item.total }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div> -->
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const route = useRoute();
const loading = ref(false);
const formData = reactive({
  data: {
    skuInfoList: [],
    orderEncasementList: [],
  },
});
const rules = ref({
  length: [{ required: true, message: "请输入长", trigger: "blur" }],
  width: [{ required: true, message: "请输入宽", trigger: "blur" }],
  height: [{ required: true, message: "请输入高", trigger: "blur" }],
});
onMounted(() => {
  if (route.query && route.query.id) {
    getDetails();
  }
});
const getDetails = () => {
  loading.value = true;
  proxy.post("/issueBill/assemblyDetail", { id: route.query.id }).then(
    (res) => {
      formData.data = res;
      loading.value = false;
    },
    (err) => {
      console.log(err);
      loading.value = false;
    }
  );
};
const sum = (arr) => {
  return arr.reduce((prev, curr) => prev + curr);
};
const submitPack = () => {
  proxy.$refs.refForm.validate((valid) => {
    if (valid) {
      let list = formData.data.skuInfoList.filter((item) => item.quantity > 0);
      if (!(list && list.length > 0)) {
        return ElMessage("请至少输入一个装箱数量");
      }
      loading.value = true;
      proxy
        .post("/issueBill/addAllowance", {
          orderId: route.query.id,
          length: formData.data.length,
          width: formData.data.width,
          height: formData.data.height,
          orderEncasementDetailList: list,
          total: sum(list.map((item) => Number(item.quantity))),
        })
        .then(
          () => {
            ElMessage({ message: "装箱成功", type: "success" });
            getDetails();
          },
          (err) => {
            console.log(err);
            loading.value = false;
          }
        );
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.packing {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  .top {
    background-color: #edf0f5;
    height: 50px;
    display: flex;
    justify-content: space-between;
    .item {
      text-align: center;
      padding: 0 5px;
      display: flex;
      height: 50px;
      flex-direction: column;
      justify-content: space-around;
      .red {
        color: red;
        font-weight: 700;
      }
    }
  }
  .main-1 {
    padding: 20px 5vw;
    margin: 0 auto;
  }
}
</style>