<template>
  <div style="max-height: calc(100vh - 176px); overflow-y: auto; overflow-x: hidden">
    <el-form :model="sourceList" ref="assembly">
      <el-table
        :data="sourceList.data"
        :row-style="{ height: '35px' }"
        header-row-class-name="tableHeader"
        v-loading="loading"
        :row-key="
          (row) => {
            return row.id;
          }
        ">
        <el-table-column type="expand">
          <template #default="props">
            <div style="padding: 10px 20px">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div style="margin-bottom: 10px">
                    <el-button type="primary" size="small" @click="clickPackingFittings(props.$index)">选择包材配件</el-button>
                  </div>
                  <el-table :data="props.row.packagingMaterialList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
                    <el-table-column label="数量" width="120">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :prop="'data.' + props.$index + '.packagingMaterialList.' + $index + '.quantity'"
                          :rules="[{ required: true, message: '请输入数量', trigger: 'blur' }]"
                          :inline-message="true"
                          style="width: 100%">
                          <el-input-number
                            onmousewheel="return false;"
                            v-model="row.quantity"
                            placeholder="数量"
                            style="width: 100%"
                            :controls="false"
                            :min="0"
                            :precision="0" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="bomSpecName" min-width="220" />
                    <el-table-column label="操作" align="center" fixed="right" width="60">
                      <template #default="{ $index }">
                        <el-button type="danger" @click="clickDeletePackingFittings(props.$index, $index)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="margin-top: 10px">
                    <el-button type="primary" size="small" @click="clickSave(props.$index)">确 认</el-button>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div style="margin-bottom: 10px">
                    <el-button type="primary" size="small" @click="clickExpressPacking(props.$index)">选择快递包装</el-button>
                  </div>
                  <el-table :data="props.row.expressPackingList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
                    <el-table-column label="数量" width="120">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :prop="'data.' + props.$index + '.expressPackingList.' + $index + '.quantity'"
                          :rules="[{ required: true, message: '请输入数量', trigger: 'blur' }]"
                          :inline-message="true"
                          style="width: 100%">
                          <el-input-number
                            onmousewheel="return false;"
                            v-model="row.quantity"
                            placeholder="数量"
                            style="width: 100%"
                            :controls="false"
                            :min="0"
                            :precision="0" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="bomSpecName" min-width="220" />
                    <el-table-column label="操作" align="center" fixed="right" width="60">
                      <template #default="{ $index }">
                        <el-button type="danger" @click="clickDeleteExpressPacking(props.$index, $index)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="组合名称" prop="name" />
        <el-table-column label="操作" align="center" fixed="right" width="60">
          <template #default="{ row }">
            <el-button type="primary" @click="selectAssembly(row)" text>选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <el-row style="padding: 10px 0" justify="end" type="flex">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="sourceList.pagination.pageNum"
        :page-size="sourceList.pagination.pageSize"
        :total="sourceList.pagination.total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange" />
    </el-row>

    <el-dialog title="选择包材配件" v-if="openPackingFittings" v-model="openPackingFittings" width="84%">
      <SelectBOM :selectStatus="true" :bomClassifyIdList="[2, 3]" @selectBOM="selectPackingFittings"></SelectBOM>
      <template #footer>
        <el-button @click="openPackingFittings = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="选择快递包装" v-if="openExpressPacking" v-model="openExpressPacking" width="84%">
      <SelectBOM :selectStatus="true" :expressStatus="true" @selectBOM="selectExpressPacking"></SelectBOM>
      <template #footer>
        <el-button @click="openExpressPacking = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import SelectBOM from "/src/views/group/BOM/management/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
const loading = ref(false);
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/commonPackingBom/page", sourceList.value.pagination).then((res) => {
    if (res.rows && res.rows.length > 0) {
      res.rows = res.rows.map((item) => {
        let packagingMaterialList = [];
        let expressPackingList = [];
        if (item.commonPackingBomDetailList && item.commonPackingBomDetailList.length > 0) {
          packagingMaterialList = item.commonPackingBomDetailList.filter((item) => item.type === 1);
          expressPackingList = item.commonPackingBomDetailList.filter((item) => item.type === 2);
        }
        return {
          ...item,
          packagingMaterialList: packagingMaterialList,
          expressPackingList: expressPackingList,
        };
      });
    }
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const handlePageChange = (val) => {
  getList({ pageNum: val });
};
const handleSizeChange = (val) => {
  getList({ pageNum: 1, pageSize: val });
};
const clickDeletePackingFittings = (index, indexTwo) => {
  sourceList.value.data[index].packagingMaterialList.splice(indexTwo, 1);
};
const clickDeleteExpressPacking = (index, indexTwo) => {
  sourceList.value.data[index].expressPackingList.splice(indexTwo, 1);
};
const rowIndex = ref(0);
const openPackingFittings = ref(false);
const clickPackingFittings = (index) => {
  rowIndex.value = index;
  openPackingFittings.value = true;
};
const openExpressPacking = ref(false);
const clickExpressPacking = (index) => {
  rowIndex.value = index;
  openExpressPacking.value = true;
};
const selectPackingFittings = (data) => {
  if (sourceList.value.data[rowIndex.value].packagingMaterialList && sourceList.value.data[rowIndex.value].packagingMaterialList.length > 0) {
    let list = sourceList.value.data[rowIndex.value].packagingMaterialList.filter((item) => item.bomSpecId === data.id);
    if (list && list.length > 0) {
      return ElMessage("包材配件已添加");
    }
    sourceList.value.data[rowIndex.value].packagingMaterialList.push({
      bomSpecId: data.id,
      quantity: 1,
      bomSpecName: data.name,
    });
  } else {
    sourceList.value.data[rowIndex.value].packagingMaterialList = [
      {
        bomSpecId: data.id,
        quantity: 1,
        bomSpecName: data.name,
      },
    ];
  }
  ElMessage({ message: "添加成功", type: "success" });
};
const selectExpressPacking = (data) => {
  if (sourceList.value.data[rowIndex.value].expressPackingList && sourceList.value.data[rowIndex.value].expressPackingList.length > 0) {
    let list = sourceList.value.data[rowIndex.value].expressPackingList.filter((item) => item.bomSpecId === data.id);
    if (list && list.length > 0) {
      return ElMessage("快递包材已添加");
    }
    sourceList.value.data[rowIndex.value].expressPackingList.push({
      bomSpecId: data.id,
      quantity: 1,
      bomSpecName: data.name,
    });
  } else {
    sourceList.value.data[rowIndex.value].expressPackingList = [
      {
        bomSpecId: data.id,
        quantity: 1,
        bomSpecName: data.name,
      },
    ];
  }
  ElMessage({ message: "添加成功", type: "success" });
};
const clickSave = (index) => {
  proxy.$refs.assembly.validate((valid) => {
    if (valid) {
      let commonPackingBomDetailList = [];
      commonPackingBomDetailList = commonPackingBomDetailList.concat(sourceList.value.data[index].packagingMaterialList);
      commonPackingBomDetailList = commonPackingBomDetailList.concat(sourceList.value.data[index].expressPackingList);
      if (commonPackingBomDetailList && commonPackingBomDetailList.length > 0) {
        proxy
          .post("/commonPackingBom/edit", {
            id: sourceList.value.data[index].id,
            name: sourceList.value.data[index].name,
            commonPackingBomDetailList: commonPackingBomDetailList,
          })
          .then(() => {
            ElMessage({ message: "提交成功", type: "success" });
          });
      } else {
        return ElMessage("请先添加包材配件和快递包装");
      }
    }
  });
};
const emit = defineEmits(["selectAssembly"]);
const selectAssembly = (item) => {
  emit("selectAssembly", item);
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
:deep(.el-form-item) {
  margin-bottom: 0px !important;
}
</style>
