<template>
	<view class="kCouponIdx">
		<u-popup zIndex="10070" :customStyle="{ backgroundColor: '#fff' }" :show="popShow" :round="10" mode="bottom"
			@close="popClose" closeable>
			<view class="o-plr-30 o-ptb-20">
				<view class="l-flex-center c-text-20 o-pb-30">请选择优惠券</view>
				<scroll-view style="height: 50vh;" scroll-y="true">
					<u-checkbox-group v-model="coupCheckValue" @change="single_checkboxChg">
						<view class="o-w">
							<view @click.self="isCheckChg(item)"
								class="content o-w l-flex-between o-plr-20 l-boxShadow o-mb-20"
								v-for="(item, index) in coupCheckList" :key="index">
								<view class="l-flex-RC">
									<view class="leftCon o-ptb-40 o-plr-40">
										<view class="couponColor">
											<text class="c-text-12">￥</text>
											<text class="c-text-20 c-text-b">{{ item.value }}</text>
										</view>
										<view class="couponColor">抵用券</view>
									</view>
									<view class="couponColor rightCon o-ptb-40 o-pl-40">
										{{ item.lastUseDate | date('yyyy-mm-dd hh:MM:ss') }} 到期
									</view>
								</view>
								<u-checkbox :checked="item.isCheck" :name="item.code"></u-checkbox>
							</view>
						</view>
					</u-checkbox-group>
				</scroll-view>
				<view class="btnCon l-f l-flex-j-a o-mt-20">
					<u-button shape="circle" type="primary" :text="`支付(${afterDiscPrice}元)`" @click="confirmClk">
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 支付弹窗 -->
		<k-payPop ref="kPayPopRef"></k-payPop>
	</view>
</template>

<script>
	// 导入支付弹窗
	import kPayPop from '@/components/common/k-payPop/index.vue';
	/**
	 * payPop 优惠券弹窗组件
	 * @description 本组件主要是优惠券弹窗。
	 *
	 * @property {Boolean}			popShow				是否展示弹窗
	 *
	 */
	export default {
		components: {
			kPayPop
		},
		data() {
			return {
				// 是否展示弹窗
				popShow: false,
				// 选中的优惠券
				coupCheckValue: [],
				// 优惠券列表
				coupCheckList: [],
				// 支付参数
				payParam: {},
				// 是哪个页面进来的 1：首页 2：购物车 3：商品详情页
				isPage: 1,
				// 总价格
				totalPrice: 0
			};
		},
		computed: {
			// 优惠后价格
			afterDiscPrice() {
				const codeList = [];
				// 找到选中的优惠券的code
				this.coupCheckList.forEach(item => {
					if (item.isCheck) {
						codeList.push(item.code);
					}
				});
				if (codeList.length > 0) {
					let list = [];
					// 找到选中的优惠券的总金额
					this.coupCheckList.forEach(item => {
						codeList.forEach(item1 => {
							if (item.code === item1) {
								list.push(item.value);
							}
						});
					});
					// 计算出总优惠价
					const totalPrice = list.reduce((prev, cur) => {
						return this.$M_Big(prev)
							.add(cur)
							.toNumber();
					}, 0);
					// 计算出优惠后的价格
					const afterDiscPrice = this.$M_Big(this.totalPrice).sub(totalPrice);
					if (afterDiscPrice <= 0) return 0.01;
					return afterDiscPrice;
				}
				return this.totalPrice;
			}
		},
		methods: {
			// 点击单选按钮
			single_checkboxChg(e) {
				let singleList = this.arrTrimSpace(e);
				// 如果存在单选
				if (singleList.length > 0) {
					this.coupCheckList.forEach(item => {
						item.isCheck = false;
						singleList.forEach(item1 => {
							if (item.code === item1) {
								item.isCheck = true;
							}
						});
					});
				} else {
					this.coupCheckList.forEach(item => {
						item.isCheck = false;
					});
				}
			},
			// 点击改变选中状态
			isCheckChg(row) {
				row.isCheck = !row.isCheck;
			},
			// 去掉数组的空格，null，undefeated类型
			arrTrimSpace(array) {
				let list = [];
				array.forEach(item => {
					if (item == '' || item == null || typeof item == 'undefined') {} else {
						list.push(item);
					}
				});
				return list;
			},
			// 点击关闭弹窗
			popClose() {
				this.popShow = false;
				// 清空选中的
				this.coupCheckValue = [];
				// 将选中状态初始化
				this.coupCheckList.forEach(item => {
					item.isCheck = false;
				});
			},
			// 点击支付按钮
			confirmClk() {
				const codeList = [];
				// 找到选中的优惠券的code
				this.coupCheckList.forEach(item => {
					if (item.isCheck) {
						codeList.push(item.code);
					}
				});
				this.$refs.kPayPopRef.popOpen(this.payParam, this.isPage, codeList);
			},
			// 开启弹窗
			popOpen(coupList, payParam, isPage, totalPrice) {
				this.coupCheckList = coupList;
				this.payParam = payParam;
				this.isPage = isPage;
				this.totalPrice = totalPrice;
				this.popShow = true;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.kCouponIdx {
		.content {
			background-color: #fff5f4;

			.leftCon {
				border-right: 2px dashed #fff;
			}

			.couponColor {
				color: #ff9900;
			}
		}
	}
</style>
