<template>
  <div class="controls">
    <div class="input-number" :class="{ disabled: canEdit }">
      <div class="reduce" @click="changeCartNumber(-1)">
        <el-icon>
          <Minus />
        </el-icon>
      </div>
      <span class="text" @click="changeCartNumberShow()">{{ carts.selCart.number || 1 }}</span>
      <div class="add" @click="changeCartNumber(1)">
        <el-icon>
          <Plus />
        </el-icon>
      </div>
    </div>
    <el-button v-for="(item, index) in controls" :key="index" size="large" :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: "gift" },
  { label: "打包", key: "is_pack", disabled: false, per: "pack" },
  { label: "删除", key: "del", disabled: false, per: "del" },
  { label: "转桌", key: "rottable", disabled: false, per: "rottable" },
  // { label: "存单", key: "saveCart", disabled: false, per: "saveCart" },
  // { label: "取单", key: "getCart", disabled: false, per: "getCart" },
  { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
  { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
  { label: "退菜", key: "return", disabled: false, per: "return" },
  { label: "免厨打", key: "is_print", disabled: false, per: "print" },
  { label: "单品改价", key: "changePriceClick", disabled: false, per: "changePriceClick" },
  { label: "等叫", key: "is_wait_call", disabled: false, per: "cart" },
  // { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
]);

const emits = defineEmits([
  "noteClick",
  "changePriceClick",
  "packClick",
  "return",
  "rottable",
  "changeCartNumberShow",
]);
function changeCartNumberShow() {
  if (!carts.selCart.id) {
    return;
  }
  emits("changeCartNumberShow");
}
function controlsClick(item) {
  // console.log(item);
  // const originGoodsItem = carts.goods.find(val => val.id == carts.selCart.product_id)
  // console.log('originGoodsItem===', originGoodsItem);

  switch (item.key) {
    case "is_gift":
      carts.updateTag("is_gift", carts.selCart.is_gift ? 0 : 1);
      break;
    case "is_pack":
      if (
        carts.selCart.number * 1 == 1 ||
        carts.selCart.pack_number * 1 == 1 ||
        carts.selCart.product_type == "weight"
      ) {
        carts.updateTag("pack_number", carts.selCart.pack_number * 1 == 1 ? 0 : 1);
        return;
      }

      emits(
        "packClick",
        carts.selCart.pack_number,
        carts.selCart.type == "weight" ? 1 : 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 "rottable":
      emits("rottable", carts.selCart);
      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();
    case "return":
      emits("return", carts.selCart);
      break;
  }
}
const perList = computed(() => {
  const originGoodsItem = carts.goods.find(val => val.id == carts.selCart.product_id)
  // if (!carts.oldOrder.id) {
  //   return ["all-wating", "all-note", "rottable"];
  // }
  let arr = [];
  if (!carts.selCart.id) {
    arr = ["all-wating"];
  }
  if (carts.isCanSelectGroup) {
    arr = ["all-wating", "all-note", "del", "pack", "gift", "print", "one-note"];
  }
  if (carts.selCart.id) {
    if (carts.isOldOrder) {
      arr = ["return"];
    } else {
      arr = ["cart", "del", "pack", "gift", "save", "one-note", "print", "all-note", "all-wating"];
    }
  }
  if (carts.oldOrder.id) {
    arr.push("rottable");
  }
  if (originGoodsItem && originGoodsItem.id) {
    if (originGoodsItem.isAllowTempModifyPrice == 1 || carts.selCart.is_temporary) {
      arr.push('changePriceClick');
    }
  }
  // if (!carts.isEmpty) {
  //   arr.push("saveCart");
  // }
  console.log('carts.selCart===', carts.selCart);
  console.log('perList=======', arr);
  return arr;
});
const canEdit = computed(() => {
  return !perList.value.includes("cart");
});

function btnDisabled(item) {
  const canClick = perList.value.includes(item.per);

  console.log('canClick===', canClick);

  if (item.key == "return") {
    return !canClick || carts.selCart.returnNum >= carts.selCart.number;
  } else {
    return !canClick;
  }
}
function returnLabel(item) {
  if (item.key == "is_gift") {
    return carts.selCart.is_gift ? "取消赠送" : "赠送";
  }
  if (item.key == "is_pack") {
    return carts.selCart.pack_number * 1 > 0 ? "取消打包" : "打包";
  }
  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;
}
function changeCartNumber(step) {
  if (perList.value.includes("cart")) {
    carts.changeNumber(step, carts.selCart);
  }
}
</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 {}
}

.disabled {
  cursor: not-allowed;
}
</style>