<!-- 结算订单 -->
<template>
  <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
    <div class="drawer_wrap">
      <div class="cart_list">
        <div class="nav_wrap card">
          <div class="return" @click="returnHandle">
            <el-icon class="icon">
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div class="info">
            <div class="master_id">
              <span>{{ goodsStore.orderListInfo.tableCode || store.shopInfo.shopName }}</span>
              <div class="member_info" v-if="goodsStore.vipUserInfo.id">
                <span>用户昵称：{{ formatPhoneNumber(goodsStore.vipUserInfo.phone) }}</span>
                <span class="vip" v-if="goodsStore.vipUserInfo.memberLevelName">{{
                  goodsStore.vipUserInfo.memberLevelName }}</span>
              </div>
              <div class="member_info s" v-if="goodsStore.vipUserInfo.id">当前积分：
                {{ goodsStore.vipUserInfo.accountPoints }}
              </div>
              <div class="member_info s between" v-if="goodsStore.vipUserInfo.id">
                <span>当前余额：{{ goodsStore.vipUserInfo.amount }}</span>
                <el-button size="small" @click="userChangeRef.show()">去充值</el-button>
              </div>
            </div>
            <div class="btm">
              <span class="p">服务员：{{ store.userInfo.name || store.shopInfo.shopName }}</span>
              <span class="t">{{ dayjs().format("M月D日 HH:mm") }}</span>
            </div>
          </div>
        </div>
        <div class="list_wrap card" style="margin-top: var(--el-font-size-base)">
          <!-- <SettleItem :list="cartList" /> -->
          <SettleItem :list="orderList" />
          <SettleItem
            :list="[{ id: 'tableFee', product_name: '客座费', number: goodsStore.tableInfo.num, salePrice: store.shopInfo.tableFee, memberPrice: store.shopInfo.tableFee }]"
            v-if="!store.shopInfo.isTableFee && goodsStore.tableInfo.name && (goodsStore.cartList.length || goodsStore.orderList.length) && !goodsStore.allSelected" />
        </div>
        <div class="footer">
          <!-- <el-button icon="Edit"></el-button> -->
          <div class="button">
            <el-checkbox v-model="isPrint" :true-value="1" :false-value="0" border label="打印结算小票" style="width: 100%" />
          </div>
          <!-- <div class="print">
            <el-button type="warning" :loading="discountLoading" @click="showStaffDiscountHandle">添加折扣</el-button>
          </div> -->
          <div class="print">
            <el-button type="primary" :loading="printLoading" @click="printHandle">打印预结单</el-button>
          </div>
        </div>
      </div>
      <div class="pay_wrap">
        <payCard ref="payCardRef" :orderList="orderList" :amount="cartInfo.totalAmount"
          :orderId="goodsStore.orderListInfo.id" @paySuccess="paySuccess" @orderExpired="orderExpiredHnadle"
          :isPrint="0" @reset="show" />
      </div>
    </div>
    <!-- <el-dialog v-model="showStaffDiscount" title="员工折扣" @close="global.updateData(true)">
      <el-form>
        <el-form-item label="折扣比例">
          <div>
            <el-input-number v-model="discount" :min="staffDiscount" :max="0.99" :step="0.1"
              :disabled="staffDiscount == 0" />
            <div class="tips">最低折扣比例：{{ staffDiscount }}</div>
          </div>
        </el-form-item>
        <el-form-item label="优惠金额">
          <div>
            <el-input-number v-model="discount" :min="staffDiscount" :max="0.99" :step="0.1"
              :disabled="staffDiscount == 0" />
            <div class="tips">最低折扣比例：{{ staffDiscount }}</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="footer_wrap">
        <div class="btn">
          <el-button style="width: 100%;" @click="showStaffDiscount = false">取消</el-button>
        </div>
        <div class="btn">
          <el-button type="primary" style="width: 100%;" @click="discountConfirm">确认</el-button>
        </div>
      </div>
    </el-dialog> -->
  </el-drawer>
  <user-charge ref="userChangeRef" :userInfo="goodsStore.vipUserInfo" @pay-success="chargeSuccess" />
</template>

<script setup>
import _ from 'lodash'
import { ref, nextTick } from "vue";
import { useUser } from "@/store/user.js";
import payCard from "@/components/payCard/payCard.vue";
import SettleItem from './settleItem.vue'
import { print } from "@/api/pay";
import { shopStaffInfo, shopUserDetail } from '@/api/account.js'
import { dayjs, ElMessage } from "element-plus";
import { formatPhoneNumber, getOrderByIdAjax, commOrderPrintData } from '@/utils/index.js'
import useStorage from '@/utils/useStorage.js'
import { useGlobal } from '@/store/global.js'
import { usePrint } from '@/store/print.js'
import { useGoods } from '@/store/goods.js'
import { useSocket } from '@/store/socket.js'
import { orderPrint } from '@/api/order.js'
import { } from '@/utils/coupon-utils.js'

import { staffPermission } from '@/api/user.js'
import UserCharge from "@/views/member/components/userCharge.vue";

const userChangeRef = ref(null);

const goodsStore = useGoods()

const global = useGlobal()
const printStore = usePrint()

const store = useUser();
const socket = useSocket()

const emits = defineEmits(['success']);

const cartInfo = ref('')

const printLoading = ref(false);
const showStaffDiscount = ref(false)
const staffDiscount = ref('')
const discount = ref(0)

const dialogVisible = ref(false);
const props = defineProps({
  amount: {
    type: [Number, String],
    default: 0,
  },
  remark: {
    type: String,
    default: "",
  },
  masterId: {
    type: String,
    default: "",
  },
  member: {
    type: Object,
    default: {}
  },
  type: {
    type: String,
    default: 'cart' // cart 代客下单 table 桌台结算 order 订单结算
  }
});

const orderList = ref([])
const isPrint = ref(1);
const discountLoading = ref(false)

// 支付失败，订单已过期
function orderExpiredHnadle() {
  dialogVisible.value = false
  useStorage.del('tableCode')
  socket.cartInit()
  goodsStore.successClearCart()
}

// 显示员工折扣
async function showStaffDiscountHandle() {
  try {
    discountLoading.value = true
    // await staffPermission('yun_xu_da_zhe')
    await getStaffDiscountAjax()
    discountLoading.value = false
    if (staffDiscount.value <= 0) {
      ElMessage.error('暂无折扣，请稍后再试')
    } else {
      showStaffDiscount.value = true
      discountLoading.value = false
      // global.updateData(false)
    }
  } catch (error) {
    console.log(error);
  }
  discountLoading.value = false
}

// 获取员工折扣
async function getStaffDiscountAjax() {
  try {
    const res = await shopStaffInfo()
    if (res.data) {
      staffDiscount.value = res
      discount.value = res
    } else {
      Promise.reject()
    }
  } catch (error) {
    console.log(error);
  }
}

// 预打印操作
const printHandle = _.throttle(async function () {
  printLoading.value = true
  await printOrderLable(true)
}, 1500, { leading: true, trailing: false })


// 在 usePrint 的 actions 中添加（比如放在 pushReceiptData 方法下方） 
function calcAllCartsTotalSum(cartObj) {
  // 初始化总和为0
  let totalSum = 0;
  // 遍历原始对象的所有键（0、1、2...）
  Object.keys(cartObj).forEach(key => {
    const carts = cartObj[key] || [];
    // 累加当前分类下的菜品总价（num × unitPrice）
    carts.forEach(item => {
      const num = Number(item.num) - Number(item.returnNum) || 0; // 防错：非数字转0
      const unitPrice = Number(item.unitPrice) || 0;
      totalSum += num * unitPrice;
    });
  });
  return totalSum; // 返回所有菜品的总价总和
}

// 打印订单标签
async function printOrderLable(isBefore = false) {
  try {
    let orderId = goodsStore.orderListInfo.id
    let data = await getOrderByIdAjax(orderId);

    console.log(`打印订单标签数据${isBefore}===`, data);

    if (isBefore) {
      data.originAmount = calcAllCartsTotalSum(data.detailMap)
    }

    if (data.seatAmount > 0 && data.dineMode == 'dine-in' && isBefore) {
      data.originAmount += data.seatAmount
    }

    let packFee = 0

    data.cartList.forEach(item => {
      packFee += item.num - item.returnNum * item.packAmount
    })

    if (packFee > 0 && isBefore) {
      data.originAmount += packFee
      data.packFee = packFee
    }

    let printList = useStorage.get("printList") || [];

    console.log('printStore.deviceNoteList.length:', printStore.deviceNoteList.length);

    // 防止重复打印
    if (!printList.some((el) => el == orderId)) {
      if (!isBefore) {
        printList.push(orderId);
        useStorage.set("printList", _.uniq(printList));
      }

      if (printStore.deviceLableList.length) {
        if (!isBefore) {
          // 预结算不打印标签
          printStore.labelPrint(commOrderPrintData(data))
        }
      }
      console.log('printStore.deviceNoteList', printStore.deviceNoteList);
      if (printStore.deviceNoteList.length) {
        // 使用本地打印机打印
        printStore.pushReceiptData(commOrderPrintData({ ...data, isBefore: isBefore }));
      } else {
        // 本地没有可用打印机使用云打印机
        await orderPrint({
          type: isBefore ? 1 : 0,
          id: orderId,
        });
        ElMessage.success(`云打印${isBefore ? '预' : ''}结算单成功`);
      }
    }
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    printLoading.value = false
  }, 2500)
}

// 订单已支付
function paySuccess() {
  if (isPrint.value) printOrderLable()
  emits('success')
  dialogVisible.value = false;
  ElMessage.success('支付成功')
  goodsStore.clearCart()
  useStorage.del('tableCode')
  socket.cartInit()
  goodsStore.successClearCart()
  goodsStore.clearVipUserInfo()
  payCardRef.value.resetCouponFormHandle()
}

const payCardRef = ref(null)
function show(t) {
  goodsStore.payType = props.type
  dialogVisible.value = true;
  cartInfo.value = { ...goodsStore.cartInfo }
  if (props.type === 'table' || props.type === 'order') {
    orderList.value = goodsStore.orderList.map(item => item.goods).flat()
  } else {
    orderList.value = [...goodsStore.cartList, ...goodsStore.orderList.map(item => item.goods).flat()]
  }

  console.log('orderListInfo===================', { ...goodsStore.orderListInfo });

  // 每次初始化paycard
  nextTick(() => {
    payCardRef.value.payCardInit()
  })

  console.log('vipUserInfo===', goodsStore.vipUserInfo)
}

// 会员充值成功
async function chargeSuccess() {
  try {
    const res = await shopUserDetail({
      id: goodsStore.vipUserInfo.id,
    })

    console.log(res)
    goodsStore.vipUserInfo = res
  } catch (e) {
    console.log(e)
  }
}

// 不支付返回清楚所有优惠
function returnHandle() {
  dialogVisible.value = false
  goodsStore.calcCartInfo({
    pointsPerYuan: '',
    maxDeductionAmount: '',
    userPoints: '',
    backendCoupons: [],
    fixedAmount: ''
  })

  payCardRef.value.resetCouponFormHandle()
}

defineExpose({
  show,
});
</script>

<style>
.el-drawer {
  background-color: #efefef !important;
}
</style>

<style scoped lang="scss">
.footer_wrap {
  display: flex;
  gap: 10px;

  .btn {
    flex: 1;
  }
}

.drawer_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  padding: var(--el-font-size-base) 0;

  .cart_list {
    flex: 1;

    .nav_wrap {
      display: flex;
      align-items: center;
      padding: 0 var(--el-font-size-base);

      .return {
        $size: 50px;
        width: $size;
        height: $size;
        border-radius: 50%;
        border: 2px solid #333;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          color: #333;
          font-size: var(--el-font-size-base);
        }
      }

      .info {
        flex: 1;
        padding-left: var(--el-font-size-base);
        $padding: 10px;

        .master_id {
          height: 127px;
          font-size: calc(var(--el-font-size-base) + 10px);
          border-bottom: 1px solid #ececec;
          padding: $padding 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .member_info {
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;

            &.s {
              color: #999;
              font-size: 14px;
            }

            &.between {
              justify-content: space-between;
            }

            .vip {
              background-color: #F8F8F8;
              border-radius: 6px;
              color: #333;
              font-size: 12px;
              padding: 4px 8px;
              color: #333;
            }
          }
        }

        .btm {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: $padding 0;

          .p {
            color: #999;
            width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .list_wrap {
      padding: 0 var(--el-font-size-base);
      height: calc(100vh - 270px);
      overflow-y: auto;
    }

    .footer {
      display: flex;
      padding-top: var(--el-font-size-base);
      gap: var(--el-font-size-base);

      .editor {
        border: 1px solid #ececec;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
      }

      .button {
        flex: 1;

        :deep(.el-checkbox.el-checkbox--large) {
          height: var(--el-component-size-large);
          background-color: #fff;
        }

        :deep(.el-checkbox__inner) {
          width: 20px;
          height: 20px;

          &::after {
            border-width: 2px;
            top: 3px;
            left: 7px;
          }
        }

        :deep(.el-checkbox__label) {
          font-size: var(--el-font-size-base) !important;
        }
      }
    }
  }

  .pay_wrap {
    flex: 1.5;
    padding-left: 20px;
  }
}
</style>
