<template>
  <el-card class="box-card">
    <div style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="clickAddBOM()">选择BOM</el-button>
    </div>
    <vue-draggable-next v-model="columns" tag="transition-group" @end="dragEnd">
      <transition-group>
        <div v-for="(item, index) in columns" :key="index" class="columns-items">
          <el-row type="flex">
            <el-col :span="18">
              <div class="div-top">{{ item.code }}</div>
              <div class="div-bottom">
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <div style="max-width: 600px; word-break: break-all">{{ item.name }}</div>
                  </template>
                  <div style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{ item.name }}</div>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="6" style="border-left: 1px solid #999">
              <div style="position: relative; height: 100%">
                <div class="div-top"></div>
                <div class="div-bottom"></div>
                <span style="font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">{{ item.inventoryQuantity }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </transition-group>
    </vue-draggable-next>

    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="90%">
      <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM>
      <template #footer>
        <el-button @click="openBOM = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

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

const { proxy } = getCurrentInstance();
const columns = ref([]);
const getList = () => {
  proxy.post("/bomSpec/getBoard", {}).then((res) => {
    columns.value = res;
  });
};
getList();
const openBOM = ref(false);
const clickAddBOM = () => {
  openBOM.value = true;
};
const selectBOM = (item) => {
  let idList = [];
  if (columns.value && columns.value.length > 0) {
    let list = columns.value.filter((itemFilter) => itemFilter.id === item.id);
    if (list && list.length > 0) {
      return ElMessage("该BOM已添加");
    }
    idList = columns.value.map((itemMap) => itemMap.id);
  }
  idList.push(item.id);
  proxy.post("/bomSpec/editBoard", { bomSpecIdList: idList }).then(() => {
    ElMessage({ message: "选择完成", type: "success" });
    getList();
  });
};
const dragEnd = () => {
  let idList = columns.value.map((item) => item.id);
  proxy.post("/bomSpec/editBoard", { bomSpecIdList: idList }).then();
};
</script>

<style lang="scss" scoped>
.item {
  background-color: #f0f0f0;
  margin-bottom: 10px;
  padding: 10px;
  cursor: move;
}
::v-deep(.el-card__body) {
  transition-group {
    display: flex;
    flex-wrap: wrap;
  }
}
.columns-items {
  margin-right: 30px;
  margin-bottom: 30px;
  width: calc(33% - 30px);
  border: 1px solid #999;
  cursor: pointer;
  .div-top {
    padding: 8px;
    height: 37px;
    background-color: #c280ff;
    font-weight: 700;
  }
  .div-bottom {
    padding: 8px;
    height: 37px;
    background-color: #00ffff;
    font-weight: 700;
  }
}
</style>
