<template>
  <view>
    <view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
    <view class="car border-top u-flex u-row-between u-col-bottom u-relative">
      <view class="u-absolute goods bg-fff">
        <view
          class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
        >
          <view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
          <view class="color-666">
            <uni-icons color="#666" type="trash"></uni-icons>
            <text
              class="u-m-l-10"
              @tap="
                setModalShow('clear', true, 'cart', '是否清空全部已添加的商品')
              "
              >清空购物车</text
            >
          </view>
        </view>
        <scroll-view
          scroll-y="true"
          class="tranistion"
          :style="{ height: switchGoods ? '50vh' : 0 }"
        >
          <!-- 占位 -->
          <view
            class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
            style="opacity: 0"
          >
            <view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
            <view class="color-666">
              <uni-icons color="#666" type="trash"></uni-icons>
              <text class="u-m-l-10">清空</text>
            </view>
          </view>
          <!-- 占位 -->
          <view
            class="color-333 item border-top u-flex u-row-center u-row-between"
            v-for="(item, index) in data"
            :key="index"
          >
            <view>
              <view class="up-line-1" :style="returnStyle(item)">{{ item.name }}</view>
              <view class="u-m-t-10 u-font-24 color-666 up-line-1">{{
                item.specInfo || ""
              }}</view>
            </view>
            <view class="u-flex" style="flex-shrink: 0">
              <view class="font-bold red" v-if="item.is_time_discount"
                >￥{{ returnLimitTotalPrice(item) }}
              </view>
              <view
                class="font-bold red u-m-r-32"
                :class="[item.is_time_discount ? 'old-price' : '']"
                >￥{{ formatPrice(item.lowPrice * item.number) }}</view
              >
              <view class="u-flex" @tap="updateNumber(false, index, item)">
                <image
                  src="/pagesCreateOrder/static/images/icon-reduce-black.svg"
                  class="icon"
                  mode=""
                />
              </view>
              <view class="u-m-l-30 u-m-r-30 color-333" @tap="changeNumber(item)">
                {{ item.number.toFixed(2) }}
              </view>
              <view class="u-flex" @tap="updateNumber(true, index, item)">
                <image
                  src="/pagesCreateOrder/static/images/icon-add-black.svg"
                  class="icon"
                  :class="[
                    item.type == 'package' && item.groupType == 1
                      ? grayscale
                      : '',
                  ]"
                  mode=""
                />
              </view>
            </view>
          </view>
          <view style="margin: 50rpx auto 110rpx auto" v-if="!data.length">
            <my-empty text="暂未有添加商品"></my-empty>
          </view>
          <!-- 历史订单 -->
          <view
            v-if="historyOrder.length > 0"
            class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between"
          >
            <view class="color-333" style="font-weight: bold">历史订单</view>
            <view class="color-666">
              <uni-icons color="#666" type="trash"></uni-icons>
              <text
                class="u-m-l-10"
                @tap="
                  setModalShow('clear', true, 'allHistoryOrder', '清空历史订单')
                "
                >清空历史订单</text
              >
            </view>
          </view>
          <view v-for="(item, index) in historyOrder" :key="index">
            <view
              v-if="historyOrder.length > 0"
              class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
            >
              <view class="color-333" style="font-size: 30rpx"
                >第{{ item.placeNum }}次下单</view
              >
              <view class="color-666">
                <uni-icons color="#666" type="trash"></uni-icons>
                <text
                  class="u-m-l-10"
                  @tap="
                    setModalShow(
                      'clear',
                      true,
                      item.placeNum,
                      '清空第' + item.placeNum + '次下单历史订单'
                    )
                  "
                  >清空</text
                >
              </view>
            </view>
            <view
              class="color-333 item border-top u-flex u-row-center u-row-between"
              v-for="(v, i) in item.info"
              :key="i"
            >
              <view style="display: flex; align-items: center">
                <view class="up-line-1" style="margin-right: 10rpx">{{
                  v.productName
                }}</view>
                <uni-tag
                  v-if="v.returnNum > 0"
                  :text="'退菜X' + v.returnNum"
                  custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;"
                ></uni-tag>
              </view>
              <view class="u-flex" style="flex-shrink: 0">
                <view class="font-bold red u-m-r-32"
                  >￥{{ formatPrice(v.price * (v.num - v.returnNum)) }}</view
                >
                <view class="u-m-l-30 u-m-r-30 color-333"
                  >X{{ v.num.toFixed(2) }}</view
                >
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="icon-car-box" @tap="toggleGoods">
        <image
          src="/pagesCreateOrder/static/images/icon-car.svg"
          class="icon-car"
        />
        <view class="dot" v-if="goodsNumber > 0">{{ goodsNumber }}</view>
      </view>
      <view class="price font-bold u-flex">
        <view>￥</view>
        <view>{{ allPrice }}</view>
      </view>
      <my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
        <text class="u-font-32 font-bold">{{
          table.type == "add" ? "确认加菜" : "去下单"
        }}</text>
      </my-button>
    </view>
    <up-modal
      title="提示"
      :content="modal.title"
      :show="modal.clear"
      showCancelButton
      closeOnClickOverlay
      @confirm="confirmModelConfirm"
      @cancel="setModalShow('clear', false)"
      @close="setModalShow('clear', false)"
      width="300px"
    ></up-modal>
  </view>
</template>

<script setup>
import { computed, reactive, ref, watch, inject } from "vue";
import myButton from "@/components/my-components/my-button.vue";
import go from "@/commons/utils/go.js";
import BigNumber from "bignumber.js";

import infoBox from "@/commons/utils/infoBox.js";
import { formatPrice } from "@/commons/utils/format.js";
import { $trturnPayAfter } from "../util.js";
const yskUtils = inject("yskUtils");
const shopInfo = uni.getStorageSync("shopInfo");
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
  historyOrder: {
    type: Array,
    default: () => {
      return [];
    },
  },
  isCreateOrderToDetail: {
    type: Boolean,
    default: false,
  },
  orderInfo: {
    type: Object,
    default: () => {
      return {
        id: "",
      };
    },
  },
  table: {
    type: Object,
    default: () => {
      return {
        tableId: "",
      };
    },
  },
  limitTimeDiscount: {
    type: Object,
    default: () => {
      return {};
    },
  },
});


function returnStyle(item){
	let width=360
	let priceLen=0
	if(item.is_time_discount){
		priceLen+=`${formatPrice(item.lowPrice * item.number)}`.length
		priceLen+=`${returnLimitTotalPrice(item)}`.length
	}else{
		priceLen+=`${formatPrice(item.lowPrice * item.number)}`.length
	}
	width-=16*priceLen
	return {
		width:width+'rpx'
	}
}

function returnLimitPrice(data) {
  const price = yskUtils.limitUtils.returnPrice({
    goods: data,
    shopInfo: shopInfo,
    limitTimeDiscountRes: props.limitTimeDiscount,
    shopUserInfo: null,
    idKey: "product_id",
  });
  return price;
}
function returnLimitTotalPrice(data) { 
	console.log('returnLimitTotalPrice',data)
	const price = yskUtils.limitUtils.returnPrice({
    goods: data,
    shopInfo: shopInfo,
    limitTimeDiscountRes: props.limitTimeDiscount,
    shopUserInfo: null,
    idKey: "product_id",
  });
  return BigNumber(price).times(data.number).toNumber();
}
let allHistoryOrder = ref([]);
const allPrice = computed(() => {
  let cartPrice = props.data.reduce((prve, cur) => {
    let price =
      (cur.is_time_discount ? returnLimitPrice(cur) : cur.lowPrice) *
      cur.number;
    return BigNumber(prve).plus(price);
  }, 0);
  let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
    let price =
      (cur.isTimeDiscount
        ? returnLimitPrice({ ...cur, salePrice: cur.price })
        : cur.price) *
      (cur.num - cur.returnNum);
    return BigNumber(prve).plus(price);
  }, 0);
  return BigNumber(cartPrice)
    .plus(historyOrderPrice)
    .decimalPlaces(2, BigNumber.ROUND_UP)
    .toNumber();
});

const goodsNumber = computed(() => {
  let result = 0;
  let cart = props.data.reduce((prve, cur) => {
    return prve + cur.number;
  }, 0);

  // let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
  // 	return prve + cur.num;
  // }, 0);
  result = cart;
  result = result > 0 ? result.toFixed(2) : 0;
  return result >= 99 ? 99 : parseFloat(result);
});
watch(
  () => props.historyOrder,
  (newval) => {
    allHistoryOrder.value = [];
    newval.forEach((item) => {
      allHistoryOrder.value = [...allHistoryOrder.value, ...item.info];
    });
  }
);
const modal = reactive({
  key: "",
  title: "",
  type: "",
  clear: false,
});

function confirmModelConfirm() {
  if (modal.key == "clear") {
    clear();
  }
}

function setModalShow(key = "show", show = true, type = "", title = "") {
  // if (key == 'clear' && show && props.data.length <= 0) {
  // 	return infoBox.showToast('购物车是空的！')
  // }
  if (title) {
    modal.title = title;
  }
  if (type) {
    modal.type = type;
  }
  modal.key = key;
  modal[key] = show;
  console.log(modal);
}

const edmits = defineEmits(["clear", "updateNumber","changeNumber"]);

function changeNumber(goods){
	edmits('changeNumber',goods)
}

// mask
let switchGoods = ref(false);

function hideGoods() {
  switchGoods.value = false;
}

function showGoods() {
  switchGoods.value = true;
}

function toggleGoods() {
  switchGoods.value = !switchGoods.value;
}

function toConfimOrder() {
  if (props.data.length <= 0 && allHistoryOrder.value.length <= 0) {
    return infoBox.showToast("还没有选择商品");
  }
  const { name, status, type } = props.table;
  if (props.data.length <= 0 && allHistoryOrder.value.length > 0) {
    go.to("PAGES_ORDER_PAY", {
      orderId: props.orderInfo.id,
    });
    return;
  }

  if (props.table.id == "" && props.table.tableCode == "") {
    go.to("PAGES_CONFIRM_ORDER", {
      isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0,
    });
    return;
  }

  let shopInfo = uni.getStorageSync("shopInfo");
  console.log($trturnPayAfter(shopInfo));

  go.to("PAGES_CONFIRM_ORDER", {
    type: type,
    tableId: props.table.id,
    tableCode: props.table.tableCode,
    name: name,
    status: status,
    isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0,
  });
}

function updateNumber(isAdd, index, goods) {
  const step = isAdd ? 1 : -1;
  const newval = goods.number + step;
  if (goods.type == "package" && goods.groupType == 1 && isAdd) {
    return;
  }
  const par = {
    num: newval,
    index: index,
    goods: goods,
  };
  edmits("updateNumber", par);
}

function clear() {
  if (modal.type == "cart") {
    hideGoods();
  }
  setModalShow("clear", false);
  edmits("clear", modal.type);
}
</script>

<style lang="scss" scoped>
$car-size: 96rpx;
$car-top: -16rpx;

@mixin fixedAll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.total {
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

.icon {
  width: 40rpx;
  height: 40rpx;
}
.grayscale {
  filter: opacity(60%);
}
.mask {
  @include fixedAll;
  background: rgba(51, 51, 51, 0.5);
}

.goods {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out;
  overflow: hidden;

  .item {
    padding: 32rpx 28rpx;
  }
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.red {
  color: #eb4f4f;
}

.car {
  padding: 0 28rpx;
  position: relative;
  background-color: #fff;
  padding-top: 10rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  /* #ifdef H5 */
  padding-bottom: 68rpx;

  /* #endif */
  .icon-car-box {
    position: absolute;
    left: 28rpx;
    top: $car-top;
    display: flex;
    width: $car-size;
    height: $car-size;
    justify-content: center;
    align-items: center;
    z-index: 2;

    .dot {
      position: absolute;
      right: 0;
      top: 0;
      width: 28rpx;
      height: 28rpx;
      background: #eb4f4f;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .price {
    color: #eb4f4f;
    margin-left: calc(38rpx + $car-size);
    transform: translateY(calc($car-top / 2));
  }

  .icon-car {
    width: $car-size;
    height: $car-size;
  }
}
.old-price {
  color: #999;
  text-decoration: line-through;
}
</style>
