<template>
  <view class="box u-font-32">
    <view class="u-flex gap-30">
      <text>开单时间：</text>
      <text class="color-666" v-if="cartStore.order">{{ cartStore.order.createTime }}</text>
    </view>
    <view class="u-flex gap-30 u-m-t-50">
      <text>就餐人数：</text>
      <text class="color-666">{{ cartStore.personCount}} 人</text>
      <up-icon name="edit-pen" size="16" @click="editPersonCount"></up-icon>
    </view>
    <view class="u-flex gap-30 u-m-t-50">
      <text>员工名称：</text>
      <text class="color-666">{{accountStore.shopStaff.name}}</text>
    </view>
    <view class="font-700" style="margin-top: 92rpx"> 订单操作 </view>
    <view class="u-flex btns u-m-t-32">
      <view
        v-for="(item, index) in orderBtns"
        :key="index"
        @click="orderBtnClick(item)"
        :class="[servingSel == item.value ? 'active' : '']"
        class="item tranistion"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>
    <view class="font-700" style="margin-top: 60rpx"> 台桌操作 </view>
    <view class="u-flex btns u-m-t-32">
      <view
        v-for="(item, index) in tableBtns"
        :key="index"
        @click="tableBtnClick(item)"
        :class="[tableSel == item.value ? 'active' : '']"
        class="item tranistion"
      >
        <text >{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, toRaw, watch, computed ,inject} from "vue";
const accountStore=inject('accountStore')
const cartStore=inject('cartStore')
const $orderBtns = [
  {
    name: "单品改价",
    value: "changePrice",
  },
  {
    name: "单品转台",
    value: "transfer",
  },
  {
    name: "赠菜",
    value: "gift",
  },
  {
    name: "打包",
    value: "pack",
  },
  // {
  //   name: "等叫",
  //   value: "wait",
  // },
  // {
  //   name: "免厨打",
  //   value: "noPrint",
  // },
  // {
  //   name: "单品备注",
  //   value: "remark",
  // },
  {
    name: "单品上菜",
    value: "serve",
  },
  {
    name: "整单上菜",
    value: "serveAll",
  },
  {
    name: "起菜",
    value: "startCooking",
  },
];
const tableBtns = [
  {
    name: "换台",
    value: "changeTable",
  },
  {
    name: "清台",
    value: "clearTable",
  },
];


const payBeforeBtns = ['单品改价','单品转台','赠菜','打包'];
const orderBtns=computed(()=>{
  if(cartStore.shopInfo.registerType=='after'){
    return $orderBtns
  }
  return $orderBtns.filter(v=>payBeforeBtns.find(item=>item==v.name))

})

const selCart = defineModel("selCart", {
  default: null,
});

const servingSel = ref("");
const tableSel = ref("");
const emits = defineEmits(["btnClick"]);
function orderBtnClick(item) {
  servingSel.value = item.value;
  emits("btnClick", item.value);
}

function tableBtnClick(item) {
  tableSel.value = item.value;
  emits("btnClick", item.value);
}
function editPersonCount(){
  emits("btnClick", 'editPersonCount');
}
</script>
<style scoped lang="scss">
.box {
  padding: 32rpx 50rpx;
  position: fixed;
}
.gap-30 {
  gap: 30rpx;
}
.btns {
  display: flex;
  flex-wrap: wrap;
  .item {
    padding: 14rpx 38rpx;
    margin-right: 26rpx;
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    border: 2rpx solid $my-main-color;
    color: $my-main-color;
    font-size: 28rpx;
    &.active {
      background-color: $my-main-color;
      color: #fff;
    }
  }
}
</style>
