<template>
	<view class="u-p-l-30 u-p-r-30 u-p-t-30 u-font-28">
	  <up-sticky offset-top="0">
		<my-tabs v-model="myQuan.types.sel" :list="myQuan.types.list"></my-tabs>
	  </up-sticky>
	  <view class="u-m-t-32">
		<view
		  class=""
		  @click="changeSelCoupon(item)"
		  v-for="(item, index) in list.canUseCoupons"
		  :class="{ filtergray: !item.use }"
		  :key="index"
		>
		  <view
			class="quan u-row-between u-flex u-col-center u-m-b-32 border-r-10"
		  >
			<view class="no-use" v-if="!item.use">
			  <image
				class="img"
				src="/pagesOrder/static/image/no-use.svg"
				mode=""
			  ></image>
			</view>
			<view class="sel u-abso" v-if="isActive(item)">
			  <up-icon name="checkbox-mark" color="#fff"></up-icon>
			</view>
			<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24 left">
			  <view class="u-flex" v-if="item.type != 2">
				<view class="hui">减</view>
				<view class="u-m-l-18">{{ item.name }}</view>
			  </view>
			  <view v-else>{{ item.name }}</view>
			  <view class="u-m-t-20 u-flex">
				<view>有效期:</view>
				<view class="u-font-24 u-m-l-6">
				  {{ dayjs(item.effectStartTime).format("YYYY-MM-DD HH:mm:ss") }}
				  -
				  {{ dayjs(item.effectEndTime).format("YYYY-MM-DD HH:mm:ss") }}
				</view>
			  </view>
			  <view class="u-m-t-10 color-999 u-font-24">
				{{ formatStr(item.useRestrictions) }}
			  </view>
			</view>
			<view class="right u-flex u-flex-col u-row-between">
			  <view class="u-flex u-row-center u-font-36" v-if="item.type != 2">
				￥{{ item.discountAmount }}
			  </view>
			  <view class="u-flex u-font-24"> 满{{ item.fullAmount }}可用 </view>
			  <view class="u-flex">
				<!-- <view class="use-btn" @click.stop="toEmitChooseQuan(item)"
				  >去使用</view
				> -->
			  </view>
			</view>
		  </view>
		</view>
		<template v-if="list.canUseCoupons.length <= 0 && myQuan.hasAjax">
		  <my-img-empty tips="暂无可用优惠券"></my-img-empty>
		</template>
		<view style="height: 40rpx"></view>
		<view
		  v-for="(item, index) in list.noCanUseCoupons"
		  class="filtergray"
		  :key="index"
		>
		  <view
			class="quan u-row-between u-flex u-col-center u-m-b-32 border-r-10"
		  >
			<view class="no-use">
			  <image
				class="img"
				src="/pagesOrder/static/image/no-use.svg"
				mode=""
			  ></image>
			</view>
			<view class="sel u-abso" v-if="isActive(item)">
			  <up-icon name="checkbox-mark" color="#fff"></up-icon>
			</view>
			<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24 left">
			  <view class="u-flex" v-if="item.type != 2">
				<view class="hui">减</view>
				<view class="u-m-l-18">{{ item.name }}</view>
			  </view>
			  <template v-else>
				<view class="u-flex">
				  {{ item.foods }}
				</view>
				<view class="u-flex">
				  {{ item.name }}
				</view>
			  </template>
  
			  <view class="u-m-t-20 u-flex">
				<view>有效期:</view>
				<view class="u-font-24 u-m-l-6">
				  {{ dayjs(item.effectStartTime).format("YYYY-MM-DD HH:mm:ss") }}
				  -
				  {{ dayjs(item.effectEndTime).format("YYYY-MM-DD HH:mm:ss") }}
				</view>
			  </view>
			  <view class="u-m-t-10 color-999 u-font-24">
				{{ formatStr(item.useRestrictions) }}
			  </view>
			  <view class="u-m-t-10 color-999 u-font-24">
				{{ returnNoUseRestrictions(item) }}
			  </view>
			</view>
			<view class="right u-flex u-flex-col u-row-between">
			  <view class="u-flex u-row-center u-font-36" v-if="item.type != 2">
				￥{{ item.discountAmount }}
			  </view>
			  <view class="u-flex u-font-24"> 满{{ item.fullAmount }}可用 </view>
			  <view class="u-flex">
				<!-- <view class="use-btn" @click.stop="toEmitChooseQuan(item)"
				  >去使用</view
				> -->
			  </view>
			</view>
		  </view>
		</view>
	  </view>
  
	  <view :style="{ height: safebottomHeight + 'px' }"></view>
	  <view class="fixed-b bottom safe-bottom border-top">
		<view class="u-m-b-32 u-flex u-row-between u-p-t-10">
		  <view class="u-flex">
			<text>抵扣金额：</text>
			<text class="color-red">￥</text>
			<text class="color-red">{{ discountAmount }}</text>
		  </view>
		  <view class="u-flex u-relative">
			<text>支付金额：</text>
			<text class="color-red">￥</text>
			<text class="color-red">{{ payPrice }}</text>
			<view
			  class="u-absolute u-flex u-row-between"
			  style="bottom: 100%; right: 0"
			  v-if="payPrice * 1 != option.orderPrice * 1"
			>
			  <view class="u-flex line-th color-999">
				<text class="">￥</text>
				<text class="">{{ option.orderPrice }}</text>
			  </view>
			</view>
		  </view>
		</view>
		<view class="u-flex gap-20">
		  <up-button shape="circle" plain @click="back">
			<view class="font-bold">取消</view>
		  </up-button>
		  <up-button shape="circle" type="primary" @click="toEmitChooseQuan()">
			<view class="font-bold">确定</view>
		  </up-button>
		</view>
	  </view>
  
	  <up-modal
		:title="modal.title"
		:content="modal.content"
		:show="modal.clear"
		:confirmText="modal.confirmText"
		:cancelText="modal.cancelText"
		showCancelButton
		closeOnClickOverlay
		@confirm="confirmModelConfirm"
		@cancel="confirmModelCancel"
		@close="setModalShow('clear', false)"
		width="300px"
	  />
	</view>
  </template>
  
  <script setup>
  import { ref, reactive, watch, computed, onMounted, toRaw } from "vue";
  import dayjs from "dayjs";
  import { getSafeBottomHeight } from "@/commons/utils/safe-bottom.js";
  import go from "@/commons/utils/go.js";
  import { onLoad, onReady } from "@dcloudio/uni-app";
  import * as orderApi from "@/http/yskApi/order.js";
  import { $findCoupon } from "@/http/yskApi/Instead.js";
  import infoBox from "@/commons/utils/infoBox.js";
  import { queryAllShopUser, shopUserDetail } from "@/http/yskApi/shop-user.js";
  // import {
  //   returnNewGoodsList,
  //   returnCoupCanUse,
  //   returnCouponAllPrice,
  //   returnProductCoupon,
  //   returnCanUseFullReductionCoupon,
  // } from "../quan_util.js";
  // const yskUtils = {
  //   couponUtils,
  // };
  
  import yskUtils from "ysk-utils";
//   import {couponUtils} from "@/lib/index";
//   const yskUtils={
// 	couponUtils
//   }
  
  const modal = reactive({
	title: "提示",
	cancelText: "取消",
	confirmText: "确定",
	content: "",
	key: "",
	clear: false,
	data: "",
  });
  
  function confirmModelCancel() {
	setModalShow("clear", false, "");
  }
  async function confirmModelConfirm() {
	if (modal.key == "clear") {
	  myQuan.fullReductionCouponSel = {
		id: "",
	  };
	  const item = modal.data;
	  item.checked = !item.checked;
	  const CheckedArr = myQuan.res.productCoupon.filter((v) => v.checked);
	  const noCheckedArr = myQuan.res.productCoupon.filter((v) => !v.checked);
	  noCheckedArr.map((v) => {
		console.log(returnCoupCanUse(canDikouGoodsArr, v, CheckedArr));
		v.use = returnCoupCanUse(canDikouGoodsArr, v, CheckedArr);
	  });
	  setModalShow("clear", false, "");
	}
  }
  
  function setModalShow(key = "show", show = true, data) {
	modal.key = key;
	modal[key] = show;
	modal.data = data;
  }
  
  function back() {
	uni.navigateBack();
  }
  let order = ref({});
  let canDikouGoodsArr = [];
  const myQuan = reactive({
	fullReductionCouponSel: {
	  id: "",
	},
	res: {
	  fullReductionCoupon: [],
	  productCoupon: [],
	},
	types: {
	  list: ["优惠券(单选)", "商品券(单选)"],
	  sel: 0,
	},
	list: [],
	sel: -1,
	hasAjax: false,
  });
  
  function changeSelCoupon(item) {
	if (myQuan.types.sel == 0) {
	  if (couponSel.value.id == item.id) {
		couponSel.value = {
		  id: "",
		};
	  } else {
		couponSel.value = item;
	  }
	} else {
	  if (goodsCouponSel.value.id == item.id) {
		goodsCouponSel.value = {
		  id: "",
		};
	  } else {
		goodsCouponSel.value = item;
	  }
	}
  }
  
  function formatStr(str) {
	console.log(str);
	if (!str) {
	  return "";
	}
	const reg = /^[,]+|[,]+$/g;
	return `${str}`.replace(reg, "");
  }
  
  function isActive(item) {
	if (myQuan.types.sel == 0) {
	  return couponSel.value.id == item.id;
	} else {
	  return goodsCouponSel.value.id == item.id;
	}
  }
  
  const shopUserInfo = ref(null);
  
  // 将订单商品转换为一维数组返回全部商品
  function returnAllGoodsList() {
	let goodsArr = [];
	for (let key in order.value.detailMap) {
	  console.log(order.value.detailMap[key]);
	  for (let goods of order.value.detailMap[key]) {
		goods.salePrice = goods.salePrice || goods.price;
		goods.number = goods.num || 0;
		goodsArr.push(toRaw(goods));
	  }
	}
	return goodsArr;
  }
  //返回不可用原因
  function returnNoUseRestrictions(item) {
	if (item.noUseRestrictions) {
	  return item.noUseRestrictions;
	}
	if (item.canuseResult) {
	  return item.canuseResult.reason;
	}
	return "";
  }
  
  //优惠券列表
  const couponList = ref([]);
  //已选商品抵扣券
  const goodsCouponSel = ref({
	id: "",
  });
  //已选优惠券
  const couponSel = ref({
	id: "",
  });
  //限时折扣
  const limitTimeDiscount = reactive({ id: "" });
  //已选优惠券列表
  const quansSelArr = computed(() => {
	return [couponSel.value, goodsCouponSel.value].filter((v) => v.id);
  });
  
  const list = reactive({
	page: 1,
	size: 10,
	status: "nomore",
	data: [],
	noCanUseCoupons: [],
	canUseCoupons: [],
  });
  
  //返回优惠券可用与不可用的，计算优惠券抵扣金额
  function formatCoupon() {
	let canUseGoodsCoupon = [];
	let canUseDiscountCoupon = [];
  
	let noUseGoodsCoupon = [];
	let noUseDiscountCoupon = [];
	const user = shopUserInfo.value;
	let shopInfo = uni.getStorageSync("shopInfo") || {};
	const goodsOrderPrice = option.orderPrice || 0;
	const dinnerType = option.dinnerType || "dine-in";
	let goodsArr = returnAllGoodsList();
  
	const canDikouGoodsArr = yskUtils.couponUtils.returnCanDikouGoods(
	  goodsArr,
	  user,
	  shopInfo
	);
  
	for (let i = 0; i < couponList.value.length; i++) {
	  const coupon = couponList.value[i];
	  console.log('quansSelArr',quansSelArr.value)
	  const selCoupon =
		myQuan.types.sel ==1
		  ? quansSelArr.value.filter((v) => v.type != 2)
		  : quansSelArr.value.filter((v) => v.type == 2);
	  const canuseResult = yskUtils.couponUtils.returnCouponCanUse({
		canDikouGoodsArr,
		coupon,
		goodsOrderPrice,
		user,
		selCoupon: selCoupon,
		shopInfo,
		limitTimeDiscount: limitTimeDiscount,
	  });
	  const { canUse, reason } = canuseResult;
	  if (coupon.type == 2) {
		if (canUse || goodsCouponSel.value.id == coupon.id) {
		  canUseGoodsCoupon.push(coupon);
		} else {
		  noUseGoodsCoupon.push({
			...coupon,
			canuseResult,
		  });
		}
	  } else {
		if (canUse || couponSel.value.id == coupon.id) {
		  canUseDiscountCoupon.push(coupon);
		} else {
		  noUseDiscountCoupon.push({
			...coupon,
			canuseResult,
		  });
		}
	  }
	}
  
	//商品券
	canUseGoodsCoupon = canUseGoodsCoupon.map((v) => {
	  const discount = yskUtils.couponUtils.returnCouponDiscount(
		canDikouGoodsArr,
		v,
		user,
		goodsOrderPrice,
		quansSelArr.value.filter((v) => v.type != 2),
		shopInfo,
		limitTimeDiscount
	  );
	  return {
		...v,
		discount,
		discountAmount: discount ? discount.discountPrice : v.discountAmount,
	  };
	});
	//非商品券
	canUseDiscountCoupon = canUseDiscountCoupon.map((v) => {
	  const discount = yskUtils.couponUtils.returnCouponDiscount(
		canDikouGoodsArr,
		v,
		user,
		goodsOrderPrice,
		quansSelArr.value.filter((v) => v.type == 2),
		shopInfo,
		limitTimeDiscount
	  );
	  return {
		...v,
		discount,
		discountAmount: discount ? discount.discountPrice : v.discountAmount,
	  };
	});
  
	if (myQuan.types.sel == 1) {
	  list.noCanUseCoupons = noUseGoodsCoupon;
	  list.canUseCoupons = canUseGoodsCoupon;
	} else {
	  list.noCanUseCoupons = noUseDiscountCoupon;
	  list.canUseCoupons = canUseDiscountCoupon;
	}
	console.log("list", list);
  
	console.log("canUseGoodsCoupon", canUseGoodsCoupon);
	console.log("noUseGoodsCoupon", noUseGoodsCoupon);
	console.log("canUseDiscountCoupon", canUseDiscountCoupon);
	console.log("noUseDiscountCoupon", noUseDiscountCoupon);
  }
  
  async function getQuan() {
	const orderRes = await orderApi.tbOrderInfoDetail(option.orderId);
	if (orderRes) {
	  order.value = orderRes;
	  Object.assign(limitTimeDiscount,orderRes.limitRate)
	}
  
	console.log(order.value);
  
	const res = await $findCoupon({
	  shopUserId: option.shopUserId,
	});
	couponList.value = res || [];
	formatCoupon();
	myQuan.hasAjax = true;
  }
  
  const option = reactive({
	orderId: "",
	shopUserId: "",
	orderPrice: 0,
  });
  
  function toEmitChooseQuan(item) {
	let arr = [];
	if (item) {
	  arr = [item];
	} else {
	  if (myQuan.fullReductionCouponSel.id) {
		arr.push(myQuan.fullReductionCouponSel);
	  }
	  const goodsQuan = myQuan.res.productCoupon.filter((v) => v.checked);
	  arr.push(...goodsQuan);
	}
	uni.$emit("choose-quan", arr);
	back();
  }
  const discountAmount = computed(() => {
	return quansSelArr.value.reduce((pre, cur) => pre + cur.discountAmount, 0);
  });
  const payPrice = computed(() => {
	const pay = option.orderPrice - discountAmount.value;
	return (pay < 0 ? 0 : pay).toFixed(2);
  });
  watch(
	() => myQuan.types.sel,
	(newval) => {
	  formatCoupon();
	}
  );
  watch(
	() => couponSel.value.id,
	(newval) => {
	  formatCoupon();
	}
  );
  watch(
	() => goodsCouponSel.value.id,
	(newval) => {
	  formatCoupon();
	}
  );
  watch(
	() => quansSelArr.value,
	(newval) => {
	  const user = shopUserInfo.value;
	  let shopInfo = uni.getStorageSync("shopInfo") || {};
	  const goodsOrderPrice = option.orderPrice || 0;
	  const dinnerType = option.dinnerType || "dine-in";
	  let goodsArr = returnAllGoodsList();
	  const canDikouGoodsArr = yskUtils.couponUtils.returnCanDikouGoods(
		goodsArr,
		user,
		shopInfo
	  );
	  console.log('canDikouGoodsArr');
	  console.log(canDikouGoodsArr);
  
	  let goodsCoupon = newval.filter((v) => v.type == 2);
	  let otherCoupon = newval.filter((v) => v.type != 2);
	  goodsCoupon = goodsCoupon.map((v) => {
		const discount = yskUtils.couponUtils.returnCouponDiscount(
		  canDikouGoodsArr,
		  v,
		  user,
		  goodsOrderPrice,
		  [],
		  shopInfo,
		  limitTimeDiscount
		);
		return {
		  ...v,
		  discount,
		  discountAmount: discount ? discount.discountPrice : v.discountAmount,
		};
	  });
	  otherCoupon = otherCoupon.map((v) => {
		const discount = yskUtils.couponUtils.returnCouponDiscount(
		  canDikouGoodsArr,
		  v,
		  user,
		  goodsOrderPrice,
		  goodsCoupon,
		  shopInfo,
		  limitTimeDiscount
		);
		return {
		  ...v,
		  discount,
		  discountAmount: discount ? discount.discountPrice : v.discountAmount,
		};
	  });
	  uni.$emit("selCoupon", [...goodsCoupon, ...otherCoupon]);
	},
	{
	  deep: true,
	}
  );
  async function getShopUser() {
	const res = await shopUserDetail({
	  id: option.shopUserId,
	});
	if (res) {
	  shopUserInfo.value = res;
	}
  }
  onLoad(async (opt) => {
	Object.assign(option, opt);
	const selCoupon=uni.getStorageSync("selCoupon")||[];
	for(let i=0;i<selCoupon.length;i++){
	  if(selCoupon[i].type==2){
		goodsCouponSel.value=selCoupon[i];
	  }else{
		couponSel.value=selCoupon[i];
	  }
	}
	await getShopUser();
	getQuan();
  });
  let safebottomHeight = ref(0);
  onReady(() => {
	getSafeBottomHeight("bottom", 0).then((height) => {
	  console.log(height);
	  safebottomHeight.value = height;
	});
  });
  </script>
  
  <style lang="scss" scoped>
  // $quan-color:rgb(233, 77, 60);
  $quan-color: #318afe;
  
  .no-use {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
  
	.img {
	  width: 200rpx;
	  height: 200rpx;
	  z-index: 10;
	}
  }
  
  .fixed-b {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	right: 0;
	left: 0;
  }
  
  .bg-gray {
	border-radius: 18rpx;
	overflow: hidden;
  }
  
  .price1 {
	color: rgb(255, 107, 0);
  }
  
  .payType {
	.radio {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: rgb(255, 212, 0);
	  width: 40rpx;
	  height: 40rpx;
	  border-radius: 40rpx;
	  opacity: 0;
	}
  
	.active {
	  .radio {
		opacity: 1;
	  }
	}
  }
  
  .left-block {
	position: relative;
  
	&::after {
	  content: "";
	  position: absolute;
	  left: -30rpx;
	  display: block;
	  width: 12rpx;
	  top: 0;
	  background-color: rgb(255, 212, 0);
	  bottom: 0;
	}
  }
  
  .filtergray {
	filter: grayscale(1);
  }
  
  .radio {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(255, 255, 255);
	width: 40rpx;
	height: 40rpx;
	border-radius: 40rpx;
  
	&.active {
	}
  }
  
  .use-btn {
	background-color: #fff;
	border-radius: 100rpx;
	padding: 4rpx 20rpx;
	color: $quan-color;
  }
  
  .u-font-40 {
	font-size: 40rpx;
  }
  
  .yilingqu {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
  }
  
  .lingqu {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	background-color: rgb(255, 207, 0);
	padding: 10rpx 30rpx;
	border-radius: 100rpx;
  }
  
  .btn {
	background-color: $my-main-color;
	color: #fff;
	border: none;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
  }
  
  .hui {
	// background-color: $quan-color;
	background-image: linear-gradient(
	  to right bottom,
	  rgb(254, 103, 4),
	  rgb(241, 50, 42)
	);
	padding: 4rpx 10rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	color: #fff;
  }
  
  .quan {
	border: 1px solid rgb(238, 238, 238);
	position: relative;
	border-radius: 10rpx;
	box-shadow: 0 0 5px #eee;
	overflow: hidden;
	.left {
	  max-width: 70%;
	}
	.sel {
	  padding: 2rpx 4rpx;
	  position: absolute;
	  background-color: $quan-color;
	  left: 0;
	  top: 0;
	  border-radius: 0 0 24rpx 0;
	}
  
	.right {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  padding: 20rpx 24rpx;
	  color: #fff;
	  display: flex;
	  flex-direction: column;
	  background-color: $quan-color;
	  height: 100%;
	  min-width: 180rpx;
	}
  
	&.goods {
	  .right {
		background-color: #fff;
		position: initial;
  
		.use-btn {
		  padding: 10rpx 40rpx;
		  color: #fff;
		  background-color: $quan-color;
		}
	  }
	}
  }
  
  .bottom {
	padding: 30rpx 30rpx 80rpx 30rpx;
  }
  </style>