<template>
  <view
    class="bg-fff border-r-24 u-m-t-32"
    v-if="orderInfo && orderInfo.detailMap"
  >
    <view
      class="u-m-b-20"
      v-for="(goods, orderIndex) in orderInfo.detailMap"
      :key="orderIndex"
    >
      <view class="u-p-t-24"> 第{{ orderIndex }}次下单 </view>
      <view class="u-m-t-24 list">
        <view class="item u-m-b-32" v-for="(item, index) in goods" :key="index">
          <view class="u-flex u-col-top">
            <view class="u-flex u-relative">
              <view class="limit-discount" v-if="item.isTimeDiscount"
                >限时折扣</view
              >
              <image
                v-if="item.isTemporary == 0"
                class="img"
                :src="item.coverImg || item.productImg"
                mode=""
              ></image>
              <view
                v-else
                style="
                  background-color: #3f9eff;
                  width: 152rpx;
                  height: 152rpx;
                  line-height: 152rpx;
                  text-align: center;
                  color: #fff;
                "
              >
                临时菜
              </view>
            </view>
            <view class="u-p-l-32 u-flex-1">
              <view class="u-flex u-row-between u-col-top">
                <view class="">
                  <view class="u-flex">
                    <view class="tui" v-if="isTui(item)">
                      {{
                        item.status == "part_refund" ? "部分已退" : "全部已退"
                      }}
                    </view>
                    <view
                      :class="{
                        'line-th':
                          item.status == 'return' ||
                          item.status == 'refund' ||
                          item.status == 'refunding',
                      }"
                    >
                      {{ item.name || item.productName }}
                    </view>
                  </view>
                  <view
                    class="u-flex u-m-t-8"
                    style="flex-direction: column; align-items: flex-start"
                  >
                    <view class="u-flex u-m-b-8">
                      <view class="u-m-r-20 u-flex" v-if="item.isGift">
                        <uni-tag
                          text="赠送"
                          custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;"
                        >
                        </uni-tag>
                      </view>
                      <view class="u-m-r-20 u-flex" v-if="item.userCouponId">
                        <uni-tag
                          :text="productCouponDikou(item)"
                          custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;"
                        >
                        </uni-tag>
                      </view>
                      <view class="u-m-r-20 u-flex" v-if="item.packNumber > 0">
                        <uni-tag
                          custom-style="background-color: #E6F0FF; border-color: #E6F0FF; color: #318AFE;"
                          size="small"
                          text="打包"
                          inverted
                          type="success"
                        />
                      </view>
                    </view>
                    <view class="u-flex u-m-t-8">
                      <view
                        class="u-m-r-20 u-font-24 u-flex"
                        v-if="item.refundNum > 0"
                      >
                        <view class="color-666">退款金额:</view>
                        <view class="color-999 u-m-l-6">{{
                          item.refundNum * item.unitPrice
                        }}</view>
                      </view>
                      <view
                        class="u-m-r-20 u-font-24 u-flex"
                        v-if="item.returnNum"
                      >
                        <view class="color-666">退菜数量:</view>
                        <view class="color-999 u-m-l-6">{{
                          item.returnNum
                        }}</view>
                      </view>
                    </view>
                  </view>
                  <view class="color-999 u-font-24 u-m-t-8">{{
                    item.skuName || ""
                  }}</view>

                  <view class="u-m-t-12 color-666 u-font-24" v-if="item.remark">
                    备注：{{ item.remark }}
                  </view>
                </view>
                <view class="u-text-right u-m-t-28">
					<view class="u-relative">
                <template v-if="item.isGift">
                  <text class="line-th color-999"
                    >￥{{ toFixed(item.price * item.num, item) }}</text
                  >
                  <view class="u-absolute" style="right: 0; bottom: 100%">
                    <text class="font-bold">￥0</text>
                  </view>
                </template>
                <template v-else>
                  <template
                    v-if="
                      item.discountSaleAmount &&
                      item.discountSaleAmount * 1 > 0
                    "
                  >
                    <text class="line-th color-999"
                      >￥{{ toFixed(item.price * item.num, item) }}</text
                    >
                    <view class="u-absolute" style="right: 0; bottom: 100%">
                      <text class="font-bold"
                        >￥{{
                          toFixed(item.discountSaleAmount * item.num, item)
                        }}</text
                      >
                    </view>
                  </template>
                  <template v-else-if="item.isTimeDiscount">
                    <text class="line-th color-999"
                      >￥{{ toFixed(item.price * item.num, item) }}</text
                    >
                    <view
                      class="u-absolute xianshi"
                      style="right: 0; bottom: 100%"
                    >
                      <text class="font-bold"
                        >￥{{ returnLimitTotalMoney(item) }}</text
                      >
                    </view>
                  </template>
                  <template
                    v-else-if="
                      isVip &&
                      item.price &&
                      item.price * 1 != item.memberPrice * 1
                    "
                  >
                    <text class="line-th color-999"
                      >￥{{ toFixed(item.price * item.num, item) }}</text
                    >
                    <view class="u-absolute" style="right: 0; bottom: 100%">
                      <text class="font-bold"
                        >￥{{
                          toFixed(item.memberPrice * item.num, item)
                        }}</text
                      >
                    </view>
                  </template>
                  <template v-else>
                    <view class="font-bold">
                      <text>￥</text>
                      <text class="">{{
                        toFixed(item.price * item.num, item)
                      }}</text>
                    </view>
                  </template>
                </template>
              </view>
                  <view class="u-m-t-22 color-999 u-font-24"
                    >X{{ item.num || item.num }}</view
                  >
                </view>
              </view>
            </view>
          </view>
          <!-- <template v-if="canTuicai(orderInfo, item)"> -->
			<template v-if="false">
            <view
              class="u-flex u-row-right gap-20 u-m-t-24"
              v-if="item.returnNum * item.unitPrice < item.num * item.unitPrice"
            >
              <my-button
                :width="128"
                :height="48"
                plain
                shape="circle"
                @tap="tuicai(item, index)"
                ><text class="no-wrap">退菜</text></my-button
              >
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, reactive,inject } from "vue";
import BigNumber from "bignumber.js";
import { hasPermission } from "@/commons/utils/hasPermission.js";
import {
  isTui,
  isTuiCai,
  isGift,
  canTuiKuan,
  canTuicai,
  mathFloorPrice,
} from "@/commons/utils/goodsUtil.js";

const emits = defineEmits(["tuicai", "tuikuan", "printOrder"]);
const yskUtils = inject("yskUtils");
const shopInfo = inject("shopInfo");
const pageData = inject("pageData");
const pop = reactive({
  youhui: false,
});

const props = defineProps({
  orderInfo: {
    type: Object,
    default: () => {},
  },
  data: {
    type: Array,
    default: () => [],
  },
  seatFee: {
    type: Object,
    default: () => {},
  },
  user: {
    type: Object,
    default: () => {
      return {
        id: "",
        isVip: false,
      };
    },
  },
});

/**
 * 计算菜品数量
 */
const goodsNumber = computed(() => {
  let result = 0;
  result = props.data.reduce((a, b) => {
    const bTotal = b.info.length;
    return a + bTotal;
  }, 0);
  return result.toFixed(0);
});

/**
 * 桌位费
 */
const seatFeePrice = computed(() => {
  const n =
    props.orderInfo.seatNum > 0
      ? props.orderInfo.seatNum * uni.getStorageSync("shopInfo").tableFee
      : 0;
  return n.toFixed(2);
});
function toFixed(price, item) {
  if (item) {
    if (item.productType == "weight" || item.type == "weight") {
      return (Math.floor(price * 100) / 100).toFixed(2);
    } else {
      return parseFloat(price).toFixed(2);
    }
  } else {
    return parseFloat(price).toFixed(2);
  }
}
/**
 * 判断是否是会员
 */
const isVip = computed(() => {
  return (
    uni.getStorageSync("shopInfo").isMemberPrice &&
    props.user &&
    props.user.id &&
    props.user.isVip
  );
});

function returnLimitTotalMoney(data) {
  const price = yskUtils.limitUtils.returnPrice({
    goods: data,
    shopInfo: pageData.shopInfo,
    limitTimeDiscountRes: pageData.limitTimeDiscount,
    shopUserInfo: pageData.user,
    idKey: "product_id",
  });
  return BigNumber(price).times(data.number).toNumber();
}

const vipDiscountPrice = computed(() => {
  if (!isVip.value) {
    return 0;
  }
  const goodsPrice = props.data.reduce((prve, cur) => {
    const curTotal = cur.info
      .filter(
        (v) =>
          v.discountSaleAmount <= 0 &&
          v.isGift != 1 &&
          v.status !== "return" &&
          v.price != v.unitPrice &&
          v.memberPrice != v.price
      )
      .reduce((a, b) => {
        return a + b.num * (b.price - b.memberPrice);
      }, 0);
    return prve + curTotal;
  }, 0);
  return goodsPrice.toFixed(2);
});

/**
 * 单品打折优惠
 */
const discountSaleAmount = computed(() => {
  const goodsPrice = props.data.reduce((prve, cur) => {
    const curTotal = cur.info
      .filter(
        (v) =>
          v.discountSaleAmount > 0 && v.isGift != 1 && v.status !== "return"
      )
      .reduce((a, b) => {
        return a + b.num * (b.price - b.discountSaleAmount);
      }, 0);
    return prve + curTotal;
  }, 0);
  return goodsPrice.toFixed(2);
});

/**
 * 打折优惠
 */
const discountAmount = computed(() => {
  return props.orderInfo.discountAmount || 0;
});

/**
 * 总优惠金额
 */
const discountsPrice = computed(() => {
  // 满减券优惠
  let fullCouponDiscountAmount =
    props.orderInfo.status == "done"
      ? props.orderInfo.fullCouponDiscountAmount
      : 0;
  // 商品券优惠
  let productCouponDiscountAmount =
    props.orderInfo.status == "done"
      ? props.orderInfo.productCouponDiscountAmount
      : 0;
  // 积分抵扣优惠
  let pointsDiscountAmount =
    props.orderInfo.status == "done" ? props.orderInfo.pointsDiscountAmount : 0;
  return (
    parseFloat(vipDiscountPrice.value) +
    parseFloat(discountSaleAmount.value) +
    discountAmount.value +
    fullCouponDiscountAmount +
    productCouponDiscountAmount +
    pointsDiscountAmount
  ).toFixed(2);
});

// 菜品金额
const productCoupPrice = computed(() => {
  if (props.orderInfo.status == "done") {
    return props.orderInfo.productCouponDiscountAmount;
  }
  const goodsPrice = props.data.reduce((a, b) => {
    const curTotal = b.info
      .filter((v) => !v.isGift)
      .reduce((prve, cur) => {
        let memberPrice = cur.memberPrice ? cur.memberPrice : cur.price;
        let tPrice = isVip.value ? memberPrice : cur.price;
        tPrice =
          cur.memberPrice != cur.unitPrice && cur.price != cur.unitPrice
            ? cur.unitPrice
            : tPrice;
        let Total = Math.floor(tPrice * cur.num * 100) / 100;

        return (
          prve + Total - cur.returnNum * tPrice - cur.refundNum * cur.unitPrice
        );
      }, 0);
    return a + curTotal;
  }, 0);
  // console.log("菜品金额==",goodsPrice)
  return goodsPrice.toFixed(2);
});

const allPpackFee = computed(() => {
  //不是退菜只要有打包费的都计算，包括赠送
  const goodsPrice = props.data.reduce((prve, cur) => {
    const curTotal = cur.info
      .filter((v) => v.packNumber > 0)
      .reduce((a, b) => {
        return a + parseFloat(b.packAmount * b.packNumber).toFixed(2) * 1;
      }, 0);
    return prve + curTotal;
  }, 0);
  return goodsPrice.toFixed(2);
});

const packFee = computed(() => {
  //不是退菜只要有打包费的都计算，包括赠送
  const goodsPrice = props.data.reduce((prve, cur) => {
    const curTotal = cur.info
      .filter((v) => v.status !== "return" && v.returnNum + v.refundNum < v.num)
      .reduce((a, b) => {
        return (
          a +
          parseFloat(
            (
              b.packAmount *
              (b.num - (b.returnNum + b.refundNum) > b.packNumber
                ? b.packNumber
                : b.num - (b.returnNum + b.refundNum))
            ).toFixed(2)
          )
        );
      }, 0);
    return prve + curTotal;
  }, 0);
  return goodsPrice.toFixed(2);
});

const allPrice = computed(() => {
  let seatAmount = props.orderInfo.seatAmount || 0;
  const total = productCoupPrice.value * 1 + seatAmount * 1 + packFee.value * 1;
  return (total <= 0 ? 0 : total).toFixed(2);
});

/**
 * 已优惠金额
 */
const youhuiAllPrice = computed(() => {
  const n = vipDiscountPrice.value * 1;
  return (n < 0 ? 0 : n).toFixed(2);
});

function youhuiDetailShow() {
  pop.youhui = true;
}

function productCouponDikou(item) {
  return "商品券抵扣￥" + returnProductCoupPrice(item);
}

function youhuiDetailHide() {
  pop.youhui = false;
}

/**
 * 转桌/并桌
 */
function rotatingTables() {
  let arr = [];
  props.data.forEach((ele) => {
    ele.info.forEach((res) => {
      // 头像 coverImg
      res.coverImg = res.productImg;
      // 名字 name
      res.name = res.productName;
      // 金额 price
      res.price = res.price;
      // 数量 number
      res.number = res.num;
      res.masterId = props.orderInfo.masterId;
      res.useType = props.orderInfo.useType;
      res.tableId = props.orderInfo.tableId;
      arr.push(res);
    });
  });
  uni.navigateTo({
    url:
      "/pagesCreateOrder/confirm-order/rotatingTables?item=" +
      JSON.stringify(arr) +
      "&tableId=" +
      props.orderInfo.tableId,
  });
}

function returnProductCoupPrice(item) {
  if (!item.isMember) {
    return item.price * item.num;
  }
  const price = item.memberPrice ? item.memberPrice : item.price;
  return price * item.num;
}


function returnCanTuiMoney(item) {
  // if (props.orderInfo.status == 'unpaid') {
  // return returnTotalMoney(item)
  // } else {
  if (
    props.orderInfo.pointsDiscountAmount > 0 ||
    props.orderInfo.fullCouponDiscountAmount > 0
  ) {
    return item.canReturnAmount;
  } else if (item.price != item.unitPrice) {
    return item.price * item.num;
  } else {
    return (Math.floor(item.num * item.unitPrice * 100) / 100).toFixed(2);
  }

  // }
}



function tuicai(item, index) {
  emits("tuicai", item, index);
}



</script>

<style lang="scss" scoped>
.img {
  width: 152rpx;
  height: 152rpx;
  border-radius: 6px;
}

.border-top {
  border-color: #f6f6f6;
}

.border-r-24 {
  border-radius: 24rpx;
}

.border-bottom {
  // border-color: rgb(240, 240, 240);
  border-color: #f6f6f6;
}

.line-th {
  text-decoration: line-through;
}

.tag {
  padding: 4rpx 8rpx 2rpx 10rpx;
  border-radius: 8rpx;
  font-size: 24rpx;

  &.no-pay {
    background-color: rgb(170, 170, 170);
    color: #fff;
  }

  &.refund {
    background-color: #fce7e7;
    padding: 8rpx 20rpx 6rpx 22rpx;
    color: #eb4f4f;
  }
}

.tui {
  background-color: rgb(239, 239, 239);
  border-radius: 4rpx;
  margin-right: 6rpx;
  color: #666;
  padding: 0 4rpx;
  font-size: 20rpx;
}
.limit-discount {
  background-color: #cc5617;
  padding: 2rpx 10rpx;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
  border-radius: 20rpx 0rpx 20rpx 0rpx;
  z-index: 9;
  color: #fff;
}
</style>