<template>
  <div class="select_desk">
    <el-dialog title="可选套餐" v-model="show">
      <div v-for="(item, index) in listdata.groupSnap" :key="index">
        <div class="box">
          <h2 class="boxspan">{{ item.title }}</h2>
          <h4 class="boxspan">本组菜品{{ item.count }}选{{ item.number || 1 }}</h4>
          <el-alert
            v-if="item.alertshow"
            title="错误：请按照规定选择套餐"
            type="warning"
            :closable="false"
          ></el-alert>
        </div>
        <el-table
          ref="refdialogpackagetable"
          :data="item.goods"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange($event, index)"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="名称" prop="proName"></el-table-column>
          <el-table-column prop="name" label="规格"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
        </el-table>
      </div>
      <div class="buttonbox">
        <el-button type="primary" :disabled="disabledshow" @click="confirm">确定</el-button>
        <el-button @click="toggleSelection">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const state = reactive({
  show: false,
  disabledshow: true,
  listdata: {
    groupSnap: [],
  },
  tableData: [],
  multipleSelection: [],
});
const refdialogpackagetable = ref();
const { show, disabledshow, listdata, tableData, multipleSelection } = toRefs(state);

function toggleSelection() {
  try {
    refdialogpackagetable.value.forEach((a) => {
      a.clearSelection();
    });
    show.value = false;
  } catch (error) {}
}
function handleSelectionChange(val, index) {
  try {
    listdata.value.groupSnap.forEach((a, i) => {
      multipleSelection.value[index] = i === index ? val : multipleSelection.value[index] || [];
    });
    this.disabledshow = !listdata.value.groupSnap.every(
      (element, num) => element.number == multipleSelection.value[num].length
    );
  } catch (error) {}
  listdata.value.groupSnap[index] = {
    ...listdata.value.groupSnap[index],
    alertshow:
      listdata.value.groupSnap[index].number != multipleSelection.value[index].length
        ? true
        : false,
  };
}

const emits = defineEmits(["confirm"]);
function confirm() {
  const pro_group_info = listdata.value.groupSnap.map((v, index) => {
    return {
      ...v,
      goods: [...multipleSelection.value[index]],
    };
  });
  emits("confirm", listdata.value, pro_group_info);
  show.value = false;
}
function open(item) {
  console.log(item);
  listdata.value = item;
  try {
    refdialogpackagetable.value.forEach((a) => {
      a.clearSelection();
    });
  } catch (error) {}
  multipleSelection.value = [];
  disabledshow.value = true;
  show.value = true;
}

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
:deep(.el-button) {
  padding: 12px 20px;
}

.select_desk {
  .box {
    margin: 20px 10px;

    .boxspan {
    }
  }

  .buttonbox {
    margin: 0 auto;
    padding: 20px 0;
    text-align: right;
  }
}
</style>