<template>
	<view data-component-name="diy-member-my-order" class="common-wrap" :style="warpCss">
		<view class="order-wrap">
			<view class="status-wrap">
				<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitpay')"
					style="margin-right: 10rpx;">
					<view class="icon-block">
						<template v-if="value.style == 3">
							<image :src="$util.img('public/uniapp/member/order/wait_pay.png')" mode="widthFix" />
							<view class="icon-shade"
								:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_pay_shade.png') + ')'">
							</view>
						</template>
						<template v-else>
							<diy-icon :icon="value.icon.waitPay.icon" v-if="value.icon.waitPay"
								:value="value.icon.waitPay.style ? value.icon.waitPay.style : null"></diy-icon>
						</template>
						<text v-if="orderNum.waitpay > 0" class="order-num color-base-bg price-font">{{ orderNum.waitpay
							> 99 ? '99+' :
							orderNum.waitpay }}</text>
					</view>
					<view class="title">{{ $lang('waitpay') }}</view>
				</view>
				<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitsend')"
					style="margin-right: 10rpx;">
					<view class="icon-block">
						<template v-if="value.style == 3">
							<image :src="$util.img('public/uniapp/member/order/wait_send.png')" mode="widthFix"></image>
							<view class="icon-shade"
								:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_send_shade.png') + ')'">
							</view>
						</template>
						<template v-else>
							<diy-icon :icon="value.icon.waitSend.icon" v-if="value.icon.waitSend"
								:value="value.icon.waitSend.style ? value.icon.waitSend.style : null"></diy-icon>
						</template>
						<text v-if="orderNum.waitsend > 0" class="order-num color-base-bg price-font">{{
							orderNum.waitsend > 99 ? '99+'
								: orderNum.waitsend }}</text>
					</view>
					<view class="title">{{ $lang('waitsend') }}</view>
				</view>
				<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitconfirm')"
					style="margin-right: 10rpx;">
					<view class="icon-block">
						<template v-if="value.style == 3">
							<image :src="$util.img('public/uniapp/member/order/wait_confirm.png')" mode="widthFix" />
							<view class="icon-shade"
								:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_confirm_shade.png') + ')'">
							</view>
						</template>
						<template v-else>
							<diy-icon :icon="value.icon.waitConfirm.icon" v-if="value.icon.waitConfirm"
								:value="value.icon.waitConfirm.style ? value.icon.waitConfirm.style : null"></diy-icon>
						</template>
						<text v-if="orderNum.waitconfirm > 0" class="order-num color-base-bg price-font">{{
							orderNum.waitconfirm > 99 ?
								'99+' : orderNum.waitconfirm }}</text>
					</view>
					<view class="title">{{ $lang('waitconfirm') }}</view>
				</view>
				<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitrate')"
					style="margin-right: 10rpx;">
					<view class="icon-block">
						<template v-if="value.style == 3">
							<image :src="$util.img('public/uniapp/member/order/wait_use.png')" mode="widthFix" />
							<view class="icon-shade"
								:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_rate_shade.png') + ')'">
							</view>
						</template>
						<template v-else>
							<diy-icon :icon="value.icon.waitUse.icon" v-if="value.icon.waitUse"
								:value="value.icon.waitUse.style ? value.icon.waitUse.style : null"></diy-icon>
						</template>
						<!-- <text v-if="orderNum.wait_use > 0" class="order-num color-base-bg price-font">{{ orderNum.wait_use > 99 ? '99+' : orderNum.wait_use }}</text> -->
					</view>
					<view class="title">{{ $lang('completed') }}</view>
				</view>
				<view class="item-wrap" @tap.stop="redirect('/pages_tool/order/activist')">
					<view class="icon-block">
						<template v-if="value.style == 3">
							<image :src="$util.img('public/uniapp/member/order/refunding.png')" mode="widthFix" />
							<view class="icon-shade"
								:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/refunding_shade.png') + ')'">
							</view>
						</template>
						<template v-else>
							<diy-icon :icon="value.icon.refunding.icon" v-if="value.icon.refunding"
								:value="value.icon.refunding.style ? value.icon.refunding.style : null"></diy-icon>
						</template>
						<text v-if="orderNum.refunding > 0" class="order-num color-base-bg price-font">{{
							orderNum.refunding > 99 ?
								'99+' : orderNum.refunding }}</text>
					</view>
					<view class="title">{{ $lang('activist') }}</view>
				</view>
			</view>
		</view>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
// 自定义会员中心——我的订单展示
import DiyMinx from './minx.js'
export default {
	name: 'diy-member-my-order',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [DiyMinx],
	data() {
		return {
			orderNum: {
				waitpay: 0,
				waitsend: 0,
				waitconfirm: 0,
				refunding: 0,
				wait_use: 0,
				waitrate: 0
			}
		};
	},
	created() {
		this.init();
	},
	watch: {
		storeToken(nVal, oVal) {
			this.init();
		},
		// 组件刷新监听
		componentRefresh: function (nval) {
			this.init();
		}
	},
	computed: {
		warpCss() {
			var obj = '';
			obj += 'background-color:' + this.value.componentBgColor + ';';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		}
	},
	methods: {
		init() {
			if (this.storeToken) {
				this.getOrderNum();
			} else {
				this.orderNum = {
					waitpay: 0,
					waitsend: 0,
					waitconfirm: 0,
					refunding: 0,
					wait_use: 0,
					waitrate: 0
				};
			}
		},
		/**
		 * 获取订单数量
		 */
		getOrderNum() {
			this.$api.sendRequest({
				url: '/api/order/num',
				data: {
					order_status: 'waitpay,waitsend,waitconfirm,refunding,wait_use,waitrate'
				},
				success: res => {
					if (res.code == 0) {
						this.orderNum = res.data;
					} else {
						this.orderNum = {
							waitpay: 0,
							waitsend: 0,
							waitconfirm: 0,
							refunding: 0,
							wait_use: 0,
							waitrate: 0
						};
					}
				}
			});
		},
		/**
		 * 跳转
		 * @param {Object} url
		 */
		redirect(url) {
			if (this.storeToken) {
				this.$util.redirectTo(url);
			} else {
				this.$refs.login.open(url);
			}
		}
	}
};
</script>

<style lang="scss">
.common-wrap {
	width: 100%;
	box-sizing: border-box;
}

.order-wrap {
	.status-wrap {
		display: flex;
		padding: 30rpx 0;
		align-items: center;
		justify-content: center;
		color: #333;
	}

	.item-wrap {
		flex: 1;
		text-align: center;
		background: #f6f7f9;
		padding: 20rpx 0;

		.icon-block {
			width: 60rpx;
			height: 60rpx;
			font-size: 60rpx;
			margin: 4rpx auto;
			position: relative;

			&>image {
				position: absolute;
				top: 5%;
				right: 5%;
				width: 90%;
				height: 90%;
				z-index: 5;
			}

			.icon-shade {
				width: 90%;
				height: 90%;
				position: absolute;
				z-index: 4;
				top: 5%;
				right: 5%;
				background: $base-color;
				-webkit-mask: no-repeat center / contain;
			}
		}

		.order-num {
			position: absolute;
			top: 0;
			right: 0;
			transform: translate(50%, -50%);
			box-sizing: border-box;
			color: #ffffff;
			line-height: 1.2;
			text-align: center;
			font-size: 24rpx;
			padding: 0 6rpx;
			min-width: 30rpx;
			border-radius: 16rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			font-size: 26rpx;
		}
	}
}
</style>