<template>
  <div class="order-box">
    <div class="left">
      <div class="user bg-fff u-p-20">
        <div class="userinfo" v-if="user.id" @click="chooseUser">
          <el-avatar class="avatar" :size="50" />
          <div class="u-m-l-12">
            <p>
              <span class="name u-font-16">{{ user.nickName }}</span>
              <span class="vip" v-if="user.isVip">VIP{{ user.isVip }}</span>
            </p>
            <p class="u-font-14 color-666 u-m-t-10">
              <span class="money">余额：{{ user.amount }}</span>
              <span class="score u-m-l-10">积分：{{ user.accountPoints }}</span>
            </p>
          </div>
        </div>
        <div class="userinfo" v-else @click="chooseUser">
          <el-avatar class="avatar" :size="50" />
          <div class="u-m-l-12 no-wrap">
            <p>
              <span class="name u-font-16">服务员下单</span>
            </p>
            <p class="u-font-14 color-666 u-m-t-10">
              <span class="money">余额：</span>
              <span class="score u-m-l-10">积分：</span>
            </p>
          </div>
        </div>
        <template v-if="user.id">
          <div class="score">
            <div class="u-flex u-col-center u-m-t-10">
              <span class="u-font-14 font-bold u-m-r-20">积分抵扣</span>
              <el-radio-group v-model="score.sel" size="small" class="">
                <el-radio :value="-1">
                  <span class="u-font-14">不使用</span>
                </el-radio>
                <el-radio :value="0" :disabled="!pointsRes.usable">
                  <span class="u-font-14">全部抵扣</span>
                </el-radio>
                <el-radio :value="1" :disabled="!pointsRes.usable">
                  <span class="u-font-14">部分抵扣</span>
                </el-radio>
              </el-radio-group>
              <el-input-number
                class="u-m-l-10"
                v-if="score.sel == 1"
                v-model="usePointsNumber"
                step-strictly
                placeholder="请输入积分抵扣数量"
                :min="pointsRes.minDeductionPoints"
                :max="pointsRes.maxUsablePoints"
                @change="pointsToMoney"
              ></el-input-number>
            </div>
            <p
              class="u-font-14 color-666 u-m-t-10"
              v-if="pointsRes.unusableReason && !pointsRes.usable"
            >
              <span class="color-red">*</span>
              <span>{{ pointsRes.unusableReason }}</span>
            </p>
            <p class="u-font-14 color-666 u-m-t-10" v-else>
              <span class="color-red">*</span>
              <span>{{ pointsRes.equivalentPoints }}积分等于1元</span>
            </p>
          </div>
          <div class="u-flex u-col-center u-m-t-20 no-wrap">
            <span class="u-font-14 font-bold u-m-r-20">团购代金券</span>
            <div class="u-flex my-select">
              <span class="u-m-r-10">代金券名称</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <svg-icon iconClass="scan" size="30" class="u-m-l-10 cur-pointer"></svg-icon>
          </div>
          <div class="u-flex u-col-center u-m-t-20 no-wrap">
            <span class="u-font-14 font-bold u-m-r-20">优惠券</span>
            <div class="u-flex my-select" @click="openCoupon">
              <span class="u-m-r-10">选择优惠券</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
          </div>
          <div class="u-m-t-20" v-if="quansSelArr.length > 0">
            <div class="font-bold u-m-b-10">已选优惠券</div>
            <el-table empty-text="未选择优惠券" :data="quansSelArr">
              <el-table-column type="index" width="50" label="#"></el-table-column>
              <el-table-column prop="name" label="券名称"></el-table-column>
              <el-table-column label="券类型" width="80">
                <template v-slot="scope">
                  {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
                </template>
              </el-table-column>
              <el-table-column label="商品信息" width="120">
                <template v-slot="scope">
                  <div class="u-flex" v-if="scope.row.type == 2">
                    <div class="u-flex">
                      <el-image
                        :src="scope.row.productImg"
                        fit="cover"
                        style="width: 40px; height: 40px"
                        :preview-src-list="[scope.row.productImg]"
                      ></el-image>
                    </div>
                    <div class="u-p-l-10">
                      <div class="">{{ scope.row.productName }}</div>
                      <div class="">x{{ scope.row.num || "" }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="抵扣">
                <template v-slot="scope">
                  <span class="color-red" v-if="scope.row.type == 1">
                    ￥{{ scope.row.discountAmount }}
                  </span>
                  <span class="color-red" v-if="scope.row.type == 2">
                    ￥{{ returnProDiscount(scope.row, scope.row.index) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="useRestrictions" label="">
                <template v-slot="scope">
                  <el-button type="danger" size="small" @click="delQuan(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </div>

      <div class="u-m-t-30">
        <el-button size="large" @click="discountShow">
          {{ checkOrderPay.discount ? checkOrderPay.discount / 10 + "折" : "整单打折/减免" }}
        </el-button>
      </div>
      <div class="u-m-t-30">
        <p class="u-font-16 font-bold u-m-r-20 font-bold u-flex">选择支付方式</p>
        <div class="u-m-t-20">
          <el-button
            v-for="(item, index) in payTypes.list"
            :key="index"
            size="large"
            :type="index == payTypes.sel ? 'primary' : ''"
            :disabled="canUsePayType(item)"
            @click="changePayType(index)"
          >
            {{ item.payName }}
          </el-button>
        </div>
        <div class="u-m-t-20">
          <el-button type="primary" size="large" @click="nowPayClick()">立即支付</el-button>
        </div>
      </div>
    </div>
    <div class="right">
      <h3>账单明细</h3>
      <p class="u-font-12 u-m-b-20">
        <span class="color-red">*</span>
        <span class="color-red">餐位费和打包费不参与折扣和满减</span>
      </p>
      <div class="order-info">
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">订单号：</span>
          <span class="u-m-l-10 value">{{ orderInfo.orderNo }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">餐位费</span>
          <span class="u-m-l-10 value">￥{{ seatAmount }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">打包费</span>
          <span class="u-m-l-10 value">￥{{ carts.packFee }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">商品订单金额</span>
          <span class="u-m-l-10 value">￥{{ carts.goodsTotal }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">商品优惠券</span>
          <span class="u-m-l-10 value">￥{{ productCouponDiscountAmount }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">满减优惠券</span>
          <span class="u-m-l-10 value">￥{{ fullCouponDiscountAmount }}</span>
        </div>

        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">整单改价</span>
          <span class="u-m-l-10 value">-￥{{ discountAmount }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">积分抵扣</span>
          <span class="u-m-l-10 value">-￥{{ pointsDiscountAmount }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">抹零</span>
          <span class="u-m-l-10 value">-￥{{ 0 }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">总价(商品订单金额-商品优惠券-满减券-整单改价-积分抵扣)</span>
          <span class="u-m-l-10 value color-red">￥{{ totalMoney }}</span>
        </div>
        <div class="u-flex u-m-b-10 u-row-between">
          <span class="title">应付金额(总价+客座费+打包费)</span>
          <span class="u-m-l-10 value price">￥{{ currentpayMoney }}</span>
        </div>
      </div>
    </div>
    <!-- 扫码 -->
    <scanPay ref="refScanPay" :order="orderInfo" @confirm="refScanPayConfirm"></scanPay>
    <!-- 打折 -->
    <discount ref="refDiscount" @confirm="discountConfirm"></discount>
    <!-- 优惠券 -->
    <popup-coupon ref="refCoupon" :user="user" @confirm="refCouponConfirm"></popup-coupon>
    <!-- 挂账 -->
    <chooseGuaZahng
      ref="refGuaZhang"
      :payMoney="currentpayMoney"
      @confirm="refGuaZhangConfirm"
    ></chooseGuaZahng>
  </div>
</template>

<script  setup>
import * as quanUtil from "../quan_util.js";

import { useCartsStore } from "@/store/modules/carts";
import { useUserStore } from "@/store/modules/user";
import chooseGuaZahng from "./popup-choose-guazhang.vue";
const shopUser = useUserStore();
const carts = useCartsStore();

import popupCoupon from "./popup-coupon.vue";
import PointsApi from "@/api/account/points";

import payTypeApi from "@/api/account/payType";
import payApi from "@/api/order/pay";
import scanPay from "./scan-pay.vue";
import discount from "./discount.vue";
import { ElLoading } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";

//挂账
const refGuaZhang = ref();
function refGuaZhangConfirm(guazhangRen) {
  payOrder("arrears", true, guazhangRen);
}
function refGuaZhangShow() {
  refGuaZhang.value.open();
}
//商品列表
let goodsArr = [];

//优惠券
let $goodsPayPriceMap = {};
const refCoupon = ref();
let quansSelArr = ref([]);
function openCoupon() {
  refCoupon.value.open(carts.goodsTotal, props.orderInfo);
}
//返回商品券抵扣金额
function returnProDiscount(row) {
  //相同商品抵扣券数组
  const arr = quansSelArr.value.filter((v) => v.type == 2 && v.proId == row.proId);
  console.log(arr);
  const index = arr.findIndex((v) => v.id == row.id);
  const item = goodsArr.find((v) => v.productId == row.proId);
  if (index != -1) {
    const n = quanUtil.returnProductCoupAllPrice(
      $goodsPayPriceMap[row.proId],
      index,
      row.num,
      props.user.id && props.user.isVip
    );
    return n.toFixed(2);
  } else {
    return 0;
  }
}
function refCouponConfirm(e, goodsPayPriceMap, goodsList) {
  goodsArr = goodsList;
  usePointsNumber.value = 0;
  pointsDiscountAmount.value = 0;
  score.sel = -1;
  quansSelArr.value = e;
  $goodsPayPriceMap = goodsPayPriceMap;
}
function delQuan(row) {
  const index = quansSelArr.value.findIndex((v) => v.id == row.id);
  if (index != -1) {
    quansSelArr.value.splice(index, 1);
  }
}
function couponChange(data) {}

//打折
const refDiscount = ref();
const checkOrderPay = reactive({
  discountAmount: 0, //手动优惠金额
  discount: 0,
});
function discountConfirm(e) {
  console.log(e);
  Object.assign(checkOrderPay, e);
  if (e.discount) {
    checkOrderPay.discountAmount = carts.goodsTotal - (carts.goodsTotal * (100 - e.discount)) / 100;
  } else {
    checkOrderPay.discount = 0;
  }
}
function discountShow(e) {
  refDiscount.value.open({
    amount: carts.goodsTotal - productCouponDiscountAmount.value,
  });
}

const props = defineProps({
  table: {
    type: Object,
    default: () => {},
  },
  user: {
    type: Object,
    default: () => {
      return { id: "" };
    },
  },
  perpole: {
    type: [Number, String],
    default: 0,
  },
  orderInfo: {
    type: Object,
    default: () => {},
  },
});
const seatAmount = computed(() => {
  if (shopUser.userInfo.isTableFee) {
    return "0.00";
  }
  if (props.perpole >= 1) {
    return (props.perpole * shopUser.userInfo.tableFee).toFixed(2);
  }
  return "0.00";
});
watch(
  () => props.user.id,
  (newval) => {
    if (newval !== "") {
      pointsInit();
    }
  }
);
watch(
  () => props.orderInfo.id,
  (newval) => {
    if (newval !== "") {
      pointsInit();
    }
  }
);

//002-获取订单可用积分及抵扣金额（支付页面使用）
const pointsRes = ref({ usable: true, maxUsablePoints: 0, minDeductionPoints: 0 });
const usePointsNumber = ref(0);
const orderAmountOrderAmount = computed(() => {
  return (carts.goodsTotal - checkOrderPay.discountAmount).toFixed(2);
});
const pointsDiscountAmount = ref(0);
watch(
  () => orderAmountOrderAmount.value,
  (newval) => {
    pointsInit();
  }
);

async function pointsInit() {
  if (!props.user.id || score.sel == -1) {
    return;
  }
  const res = await PointsApi.calcOrderUsablePoints({
    userId: props.user.id,
    orderAmount: currentpayMoney.value - pointsDiscountAmount.value,
  });
  pointsRes.value = res;
  usePointsNumber.value = res.usable ? res.maxUsablePoints : 0;
  if (res.usable) {
    pointsToMoney();
  } else {
    score.sel = -1;
  }
  return res;
}
// 根据积分计算可抵扣金额
async function pointsToMoney() {
  const res = await PointsApi.calcPointsToMoney({
    userId: props.user.id,
    orderAmount: currentpayMoney.value - pointsDiscountAmount.value,
    points: usePointsNumber.value,
  });
  pointsDiscountAmount.value = res;
}
const emits = defineEmits(["chooseUser", "paysuccess"]);
function chooseUser() {
  emits("chooseUser");
}
const coupDiscount = computed(() => {
  const total =
    props.orderInfo.fullCouponDiscountAmount * 1 + props.orderInfo.productCouponDiscountAmount * 1;
  if (total <= 0) {
    return 0;
  }
  return total.toFixed(2);
});
const score = reactive({
  list: [],
  sel: -1,
});

const payTypes = reactive({
  list: [],
  sel: 0,
});
watch(
  () => score.sel,
  (newval) => {
    console.log(newval);
    if (newval == -1) {
      usePointsNumber.value = 0;
      pointsDiscountAmount.value = 0;
    } else {
      pointsInit();
    }
  }
);
function canUsePayType(item) {
  if (currentpayMoney.value * 1 == 0) {
    return item.payType == "cash" ? false : true;
  }
  // if (item.payType == "virtual" && item.payName == "会员支付") {
  //   return props.user.id ? false : true;
  // }

  return false;
}
const refScanPay = ref();
function changePayType(i) {
  const payType = payTypes.list[i].payType;
  payTypes.sel = i;
  if (payType == "member-account") {
    return chooseUser();
  }
  refScanPayOpen(payType);
}

function returnPayParams() {
  return {
    money: currentpayMoney.value * 1,
    shopId: localStorage.getItem("shopId"),
    authCode: authCode,
    checkOrderPay: {
      vipPrice: props.user.id && props.user.isVip ? 1 : 0,
      orderId: props.orderInfo.id,
      // discountRatio: (checkOrderPay.discount / 100).toFixed(2),
      discountRatio: 0,
      seatNum: props.perpole * 1,
      originAmount: carts.payMoney * 1 - productCouponDiscountAmount.value + seatAmount.value * 1,
      discountAmount: discountAmount.value,
      productCouponDiscountAmount: productCouponDiscountAmount.value * 1,
      orderAmount: currentpayMoney.value * 1,
      roundAmount: props.orderInfo.roundAmount,
      pointsDiscountAmount: pointsDiscountAmount.value * 1,
      pointsNum: usePointsNumber.value * 1,
      fullCouponDiscountAmount: fullCouponDiscountAmount.value * 1,
      couponList: quansSelArr.value.map((v) => v.id),
      userId: props.user.userId || "",
    },
  };
}

function refScanPayOpen(payType) {
  if (payType == "member-account") {
    chooseUser();
    return;
  }
  if (payType == "deposit") {
    return refScanPay.value.open(returnPayParams(), "deposit");
  }
  if (payType == "scanCode") {
    return refScanPay.value.open(returnPayParams(), "scanCode");
  }
  if (payType == "arrears") {
    refGuaZhangShow();
    return;
  }
}

async function getPaytype() {
  const res = await payTypeApi.getList();
  payTypes.list = res;
  if (currentpayMoney.value * 1 <= 0) {
    payTypes.sel = payTypes.list.findIndex((v) => v.payType == "cash");
  }
}
function nowPayClick(payType) {
  payType = payType || payTypes.list[payTypes.sel].payType;
  if (payType === "cash") {
    ElMessageBox.confirm("是否确认已现金收款：" + currentpayMoney.value + "元", "快捷支付", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        payOrder("cash");
      })
      .catch(() => {});
    return;
  }
  if (payType == "member-account") {
    if (!props.user.id) {
      return ElMessage.error("请先选择会员");
    }
    payOrder(payType);
    return;
  }

  refScanPayOpen(payType);
}

let authCode = "";
function refScanPayConfirm($authCode, isScan) {
  const payType = payTypes.list[payTypes.sel].payType;
  authCode = $authCode;
  payOrder(payType, isScan);
}

let payTimer = null;
//是否是正扫
async function payOrder(payType, isScan, guazhangren) {
  clearTimeout(payTimer);
  const loading = ElLoading.service({
    lock: true,
    text: "支付中，请稍等……",
    background: "rgba(0, 0, 0, 0.7)",
  });
  payTimer = setTimeout(() => {
    ElMessage.error("支付超时");
    loading.close();
  }, 1000 * 20);
  let res = undefined;
  console.log(payType);
  try {
    if (payType == "scanCode") {
      res = isScan
        ? await payApi.scanPay(returnPayParams())
        : await payApi.microPay(returnPayParams());
    }
    if (payType == "cash") {
      res = await payApi.cashPay(returnPayParams());
    }
    if (payType == "deposit") {
      res = await payApi.vipPay({ ...returnPayParams(), payType: "scanCode" });
    }
    if (payType == "member-account") {
      res = await payApi.vipPay({
        ...returnPayParams(),
        payType: "userPay",
        shopUserId: props.user.id,
      });
    }
    if (payType == "arrears") {
      res = await payApi.creditPay({ ...returnPayParams(), creditBuyerId: guazhangren.id });
    }
  } catch (error) {
    console.log(error);
    clearTimeout(payTimer);
    loading.close();
  }

  if (res) {
    clearTimeout(payTimer);
    ElMessage.success("支付成功");
    emits("paysuccess");
    loading.close();
  }
}
//整单改价
const discountAmount = computed(() => {
  const money = carts.goodsTotal - productCouponDiscountAmount.value;
  if (checkOrderPay.discount) {
    return ((money * (100 - checkOrderPay.discount)) / 100).toFixed(2);
  }
  return checkOrderPay.discountAmount;
});
//满减优惠券
const fullCouponDiscountAmount = computed(() => {
  return quansSelArr.value
    .reduce((pre, cur) => {
      return pre + cur.discountAmount;
    }, 0)
    .toFixed(2);
});
//商品券抵扣金额
const productCouponDiscountAmount = computed(() => {
  let index = -1;
  return quansSelArr.value.reduce((pre, cur) => {
    index++;
    return pre + returnProDiscount(cur, index) * 1;
  }, 0);
});
//除开客座费，打包费总金额
const totalMoney = computed(() => {
  return (
    carts.goodsTotal -
    productCouponDiscountAmount.value -
    discountAmount.value -
    fullCouponDiscountAmount.value -
    pointsDiscountAmount.value
  ).toFixed(2);
});
//应付金额
const currentpayMoney = computed(() => {
  return (totalMoney.value * 1 + carts.packFee * 1 + seatAmount.value * 1).toFixed(2);
});
watch(
  () => currentpayMoney.value,
  (newval) => {
    if (newval * 1 <= 0) {
      payTypes.sel = payTypes.list.findIndex((v) => v.payType == "cash");
    }
  }
);
onMounted(() => {
  getPaytype();
});
defineExpose({
  nowPayClick,
});
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
.vip {
  padding: 2px 5px;
  background: #f7793d;
  color: #fff;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 10px;
}
.order-box {
  display: flex;
  padding: 20px 20px;
  background-color: #f7f7fa;
  min-height: 100%;
  .left,
  .right {
    flex: 1;
  }
  .left {
    padding-right: 20px;
  }
  .right {
    border-left: 1px solid #ebebeb;
    padding-left: 20px;
    .order-info {
      font-size: 14px;
      .title {
      }
      .value {
      }
      .price {
        color: #fa5555;
        font-size: 20px;
      }
    }
  }
}
.my-select {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-left: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  padding: 8px 10px 8px 20px;
}
</style>