<template>
  <div>
    <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
              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="6">包裹净重（kg）</el-col>
                  <el-col :span="6">包裹体积（m³）</el-col>
                  <el-col :span="4">操作</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="6">{{ item.netWeight / 1000 }}</el-col>
                  <el-col :span="6">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="copyPack(item)" text>复制包裹</el-button>
                    <el-button type="danger" @click="deletePack(item)" text>删除</el-button>
                  </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>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="复制包裹" v-if="openCopy" v-model="openCopy" width="500">
      <el-form :model="formCopy.data" :rules="rulesCopy" label-width="100px" ref="refCopy">
        <el-form-item label="复制数量" prop="total">
          <el-input-number
            onmousewheel="return false;"
            v-model="formCopy.data.total"
            placeholder="请输入复制数量"
            style="width: 100%"
            :controls="false"
            :min="0"
            :precision="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="openCopy = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitCopy()" size="large" v-preReClick>提 交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } 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 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: 1,
        })
        .then(
          () => {
            ElMessage({ message: "装箱成功", type: "success" });
            getDetails();
          },
          (err) => {
            console.log(err);
            loading.value = false;
          }
        );
    }
  });
};
const openCopy = ref(false);
const formCopy = reactive({
  data: {
    id: "",
    total: undefined,
  },
});
const rulesCopy = ref({
  total: [{ required: true, message: "请输入复制数量", trigger: "blur" }],
});
const copyPack = (item) => {
  formCopy.data = {
    id: item.id,
    total: undefined,
  };
  openCopy.value = true;
};
const submitCopy = () => {
  proxy.$refs.refCopy.validate((valid) => {
    if (valid) {
      proxy.post("/issueBill/copyAllowance", formCopy.data).then(() => {
        openCopy.value = false;
        ElMessage({ message: "复制成功", type: "success" });
        getDetails();
      });
    }
  });
};
const deletePack = (row) => {
  ElMessageBox.confirm("你是否确认此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.post("/issueBill/deleteAllowance", { id: row.id }).then(() => {
        ElMessage({ message: "删除成功", type: "success" });
        getDetails();
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.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>
