<template>
  <div class="select-card">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      highlight-current-row
      @get-list="getList"
      @clickReset="clickReset">
    </byTable>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
const loading = ref(false);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "组合名称",
        prop: "name",
      },
    },
    {
      attrs: {
        label: "操作",
        width: 120,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "选择",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              selectAssembly(row);
            },
          },
          {
            attrs: {
              label: "删除",
              type: "danger",
              text: true,
            },
            el: "button",
            click() {
              clickDelete(row);
            },
          },
        ];
      },
    },
  ];
});
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("/packagingAssembly/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const emit = defineEmits(["selectAssembly"]);
const selectAssembly = (item) => {
  emit("selectAssembly", item);
};
const clickDelete = (row) => {
  ElMessageBox.confirm("你是否确认此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.post("/packagingAssembly/delete", { id: row.id }).then(() => {
        ElMessage({ message: "删除成功", type: "success" });
        getList();
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.select-card {
  height: calc(100vh - 184px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
