<template>
  <div class="controls">
    <div class="input-number">
      <div class="reduce">
        <el-icon @click="carts.changeNumber(-1, carts.selCart)"><Minus /></el-icon>
      </div>
      <span class="text">{{ carts.selCart.number || 1 }}</span>
      <div class="add">
        <el-icon @click="carts.changeNumber(1, carts.selCart)"><Plus /></el-icon>
      </div>
    </div>
    <el-button
      v-for="(item, index) in controls"
      :key="index"
      v-bund="item"
      :disabled="btnDisabled(item)"
      @click="controlsClick(item)"
    >
      {{ returnLabel(item) }}
    </el-button>
  </div>
</template>

<script setup>
const number = ref(1);
import { useCartsStore } from "@/store/modules/carts";
const carts = useCartsStore();

const controls = ref([
  { label: "规格", key: "", disabled: false, per: "sku" },
  { label: "赠送", key: "is_gift", disabled: false, per: "cart" },
  { label: "打包", key: "is_pack", disabled: false, per: "cart" },
  { label: "删除", key: "del", disabled: false, per: "cart" },
  { label: "存单", key: "", disabled: false, per: "save" },
  { label: "取单", key: "", disabled: false },
  { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
  { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
  { label: "退菜", key: "", disabled: false, per: "order" },
  { label: "免厨打", key: "is_print", disabled: false, per: "cart" },
  { label: "单品改价", key: "changePriceClick", disabled: false, per: "cart" },
  { label: "等叫", key: "is_wait_call", disabled: false, per: "cart" },
  { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
]);

const emits = defineEmits(["noteClick", "changePriceClick", "packClick"]);
function controlsClick(item) {
  switch (item.key) {
    case "is_gift":
      carts.updateTag("is_gift", carts.selCart.is_gift ? 0 : 1);
      break;
    case "is_pack":
      emits("packClick", carts.selCart.pack_number, carts.selCart.number);
      break;
    case "is_print":
      carts.updateTag("is_print", carts.selCart.is_print ? 0 : 1);
      break;
    case "del":
      carts.del(carts.selCart);
      break;
    case "changePriceClick":
      emits("changePriceClick", carts.selCart);
      break;
    case "one-note":
      emits("noteClick", true);
      break;
    case "all-note":
      emits("noteClick", false);
      break;
    case "is_wait_call":
      carts.updateTag("is_wait_call", carts.selCart.is_wait_call ? 0 : 1);
      break;
    case "all-wating":
      carts.allWating();
      break;
  }
}
const perList = computed(() => {
  if (!carts.selCart.id) {
    return ["all-wating", "all-note"];
  }
  if (carts.selCart.id) {
    return ["cart", "save", "one-note", "all-note", "all-wating"];
  }
});

function btnDisabled(item) {
  return !perList.value.includes(item.per);
}
function returnLabel(item) {
  if (item.key == "is_gift") {
    return carts.selCart.is_gift ? "取消赠送" : "赠送";
  }
  if (item.key == "is_pack") {
    return carts.selCart.is_pack ? "取消打包" : "打包";
  }
  if (item.key == "is_print") {
    return carts.selCart.is_print ? "免厨打" : "打印";
  }
  if (item.key == "is_wait_call") {
    return carts.selCart.is_wait_call ? "取消等叫" : "等叫";
  }
  return item.label;
}
</script>

<style scoped lang="scss">
$gap: 10px;
.controls {
  display: flex;
  height: 100%;
  flex-direction: column;
  width: 106px;
  padding: 14px 10px;
  background-color: #f7f7fa;
}
.el-button + .el-button {
  margin-top: $gap;
  margin-left: 0;
}
.input-number {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  margin-bottom: $gap;
  cursor: pointer;
  .reduce,
  .text,
  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
  }
  .text {
    height: 48px;
    font-size: 30px;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
  }
  .reduce {
  }
  .add {
  }
}
</style>