<template>
  <div class="list">
    <div class="carts">
      <template v-if="carts.list && carts.list.length >= 1">
        <!-- 当前购物车 -->
        <div v-for="(item, index) in carts.list" :key="index">
          <carts-item :item="item" :useVipPrice="carts.useVipPrice" @changeNumber="changeNumber"
            :selCart="carts.selCart" @itemClick="itemClick(item)" @editNote="editNote"></carts-item>
        </div>
      </template>

      <!-- 赠菜 -->
      <div class="cart-title" v-if="carts.giftList.length > 0"><span>以下是优惠菜品</span></div>
      <div v-for="(item, index) in carts.giftList" :key="index">
        <carts-item :item="item" @changeNumber="changeNumber" :useVipPrice="carts.useVipPrice" :selCart="carts.selCart"
          @itemClick="itemClick(item)" @editNote="editNote"></carts-item>
      </div>
      <el-empty :image-size="60" v-if="carts.isEmpty" description="点餐列表为空" />
      <!-- 打包费 -->
      <template v-if="carts.packNum > 0">
        <div class="cart-title"><span>打包费</span></div>
        <extra-fee name="打包费" :number="carts.packNum" :price="carts.orderCostSummary.packFee"></extra-fee>
      </template>
      <!-- 餐位费 -->
      <template v-if="perpole >= 1 && carts.dinnerType == 'dine-in'">
        <div class="cart-title"><span>餐位费</span></div>
        <extra-fee name="餐位费" :number="perpole" :price="canWeiFee"></extra-fee>
      </template>
      <!-- 历史订单 -->
      <div class="u-flex u-row-between u-m-b-10" v-if="carts.oldOrder.id && !isEmptyObject(carts.oldOrder.detailMap)">
        <span class="u-font-14">历史订单</span>
        <el-button link size="small" type="danger" @click="clearOldOrder()">清空</el-button>
      </div>
      <template v-for="(item, index) in carts.oldOrder.detailMap" :key="index">
        <div class="u-flex u-row-between">
          <div class="cart-title u-flex-1 u-p-r-6">
            <span>第{{ index }}次下单</span>
          </div>
          <el-button link size="small" type="danger" @click="clearOldOrder(index)">删除</el-button>
        </div>

        <div v-for="(detaiItem, index) in item" :key="index">
          <carts-item :useVipPrice="carts.useVipPrice" :canChangeNumber="false" isOld :dinerType="dinerType"
            :item="detaiItem" @changeNumber="changeNumber" :selCart="carts.selCart" @itemClick="itemClick(detaiItem)"
            @editNote="editNote"></carts-item>
        </div>
      </template>

      <div class="color-666 u-font-14" v-if="remark">订单备注:{{ remark }}</div>
    </div>
    <div class="bottom">
      <div class="u-flex u-row-right">
        <el-tooltip placement="top" effect="light" popper-class="youhui-tips" :popper-options="{
          'background-color': '#fff',
        }">
          <template #content>
            <div class="u-flex color-000 u-font-14 u-row-between">
              <span class="font-bold">会员优惠</span>
              <span class="u-m-l-30">
                {{ customTruncateToTwoDecimals(carts.vipDiscount) }}
              </span>
            </div>
            <div class="u-flex color-000 u-font-14 u-row-between">
              <span class="font-bold">赠送</span>
              <span class="u-m-l-30">{{ customTruncateToTwoDecimals(carts.giftMoney) }}</span>
            </div>
            <div class="u-flex color-000 u-font-14 u-row-between">
              <span class="font-bold">单品改价优惠</span>
              <span class="u-m-l-30">{{ customTruncateToTwoDecimals(carts.singleDiscount) }}</span>
            </div>
          </template>
          <div class="yiyouhui">{{ carts.yiyouhui }}</div>
        </el-tooltip>
      </div>

      <div class="u-flex u-row-between">
        <!-- <el-link type="primary">打印制作单</el-link> -->
        <div></div>
        <div>
          <span class="totalNumber">共{{ customTruncateToTwoDecimals(carts.totalNumber) }}件</span>
          <span class="totalPrice">￥{{ customTruncateToTwoDecimals(carts.payMoney) }}</span>
        </div>
      </div>
      <div class="btn-group" v-if="isXianFuKuan">
        <el-button type="primary" size="large" :disabled="!disabledMorePay" @click="createOrder('wx-aiplay')">
          微信/支付宝
        </el-button>
        <el-button type="primary" size="large" :disabled="!disabledMorePay" @click="createOrder('cash')">
          现金
        </el-button>
        <el-button type="primary" size="large" :disabled="!disabledMorePay" @click="createOrder('more-pay')">
          更多支付
        </el-button>
      </div>
      <div class="btn-group" v-else>
        <template v-if="!showOrder">
          <!-- <el-button type="primary" size="large" :disabled="!carts.isLinkFinshed || carts.isEmpty"
            @click="createOrder('only-create')">
            仅下单
          </el-button>
          <el-button type="primary" size="large" :disabled="disabledMorePay" @click="createOrder('to-pay')">
            去结账
          </el-button> -->
          <el-button type="primary" size="large" :disabled="carts.list.length == 0" @click="createOrder('only-create')">
            仅下单
          </el-button>
          <el-button type="primary" size="large"
            :disabled="carts.list.length == 0 && isEmptyObject(carts.oldOrder.detailMap)"
            @click="createOrder('to-pay')">
            去结账
          </el-button>
        </template>
        <template v-else>
          <el-button type="warning" size="large" @click="hideOrder()">加菜/返回</el-button>
          <!-- <el-button type="primary" size="large" :disabled="!carts.isLinkFinshed" @click="createOrder('to-pay')">
            立即支付
          </el-button> -->
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import cartsItem from "./item.vue";
import extraFee from "./extra-fee.vue";
import { customTruncateToTwoDecimals } from "@/views/tool/Instead/util";
import { useCartsStore } from "@/store/modules/carts";
import { useUserStore } from "@/store/modules/user";

function isEmptyObject(obj) {
  // 步骤1：排除null和非对象类型
  if (obj === null || typeof obj !== "object") {
    return true;
  }
  // 步骤2：排除数组（数组也是对象，需单独判断）
  if (Array.isArray(obj)) {
    return true;
  }
  // 步骤3：判断自身可枚举属性是否为空
  return Object.keys(obj).length === 0;
}

const shopUser = useUserStore();
const carts = useCartsStore();

const props = defineProps({
  remark: {
    type: String,
    default: "",
  },
  table: {
    type: Object,
    default: () => {
      return {
        tableCode: "",
      };
    },
  },
  perpole: {
    type: [Number, String],
    default: 0,
  },
  showOrder: {
    type: Boolean,
    default: false,
  },
  goodsList: {
    type: Array,
    default: () => [],
  },
  dinerType: {
    type: [Number, String],
    default: 0,
  },
});
let isXianFuKuan = computed(() => {
  // if (!props.table.tableCode) {
  //   return true;
  // }
  return shopUser.userInfo.registerType === "before" ? true : false;
});
const canWeiFee = computed(() => {
  if (shopUser.userInfo.isTableFee) {
    return 0;
  }
  if (props.perpole >= 1) {
    return props.perpole * shopUser.userInfo.tableFee;
  }
});
const emits = defineEmits(["editNote", "createOrder", "hideOrder", "clearOldOrder"]);
function editNote() {
  emits("editNote");
}
function hideOrder() {
  emits("hideOrder");
}
function createOrder(key) {
  emits("createOrder", key);
}
function clearOldOrder(placeNum) {
  const title =
    placeNum === undefined ? "确定要删除全部历史订单吗?" : "确定要删除第" + placeNum + "次下单吗?";
  ElMessageBox.alert(title, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      shopId: shopUser.userInfo.shopId,
      orderId: carts.oldOrder.id,
    };
    if (placeNum) {
      params.placeNum = placeNum;
    }
    emits("clearOldOrder", params);
  });
}
function itemClick(item) {
  carts.changeSelCart(item);
}

function changeNumber(step, item) {
  carts.changeNumber(step * 1, item);
}
const disabledMorePay = computed(() => {
  if (carts.isLinkFinshed) {
    return true;
  }
  if (props.showOrder) {
    return true;
  }
  if (carts.oldOrder.detailMap.length) {
    return true;
  }

  return false;
});

defineExpose({
  carts,
});
</script>
<style scoped lang="scss">
.list {
  height: 100%;
  overflow: hidden;
}

.totalNumber {
  color: #666;
  font-size: 14px;
}

.totalPrice {
  font-size: 18px;
  color: #000;
}

.bottom {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid #ebebeb;

  .yiyouhui {
    text-align: right;
    color: #c12a2a;
    font-size: 13px;
    line-height: 16px;
    top: 14px;
  }
}

:deep(.btn-group) {
  display: flex;
  margin-top: 10px;

  .el-button {
    flex: 1;
  }
}

.carts {
  height: calc(100% - 120px);
  overflow-y: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 修改垂直滚动条 */
.carts::-webkit-scrollbar {
  width: 0;
  /* 修改宽度 */
}

/* 修改滚动条轨道背景色 */
.carts::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.cart-title {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);

  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ebebeb;
    margin-left: 10px;
  }
}
</style>
