<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('activity.myOrder')" />
		</view>
		<view class="content">
			<Spin v-show="loading1" />
			<view class="order-list">
				<template v-for="(item, index) in orderList">
					<view class="order-item">
						<view class="order-header">
							<view class="order-status">{{ getOrderStatus(item.status) }}</view>
							<view class="order-time">
								<image class="icon" src="/static/clock.svg"></image>
								<text>{{ item.apply_time }}</text>
							</view>
						</view>
						<view class="order-info">
							<image class="img" mode="aspectFill" :src="item.goods_img.split(',')[0]"></image>
							<view class="info">
								<view class="order-title uni-ellipsis-2">{{ item.goods_name }}</view>
								<view class="order-point">
									<text>{{ $t('activity.point') }}:</text>
									<text class="point">{{ item.goods_integral }}</text>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="item">
								<image class="icon" src="../../../static/shop/recipients.svg"></image>
								<view>{{ item.delivery_recipients }}</view>
							</view>
							<view class="item">
								<image class="icon" src="../../../static/shop/phone.svg"></image>
								<view>{{ item.delivery_phone }}</view>
							</view>
							<view class="item">
								<image class="icon" src="../../../static/shop/addr.svg"></image>
								<view>{{ item.delivery_address }}</view>
							</view>
							<view style="margin-left: auto" v-if="item.status == 0">
								<button class="shop-dark-btn" @click="handleCancel(item)">
									{{ $t('activity.cancelOrder') }}
								</button>
							</view>
						</view>
					</view>
				</template>
			</view>
			<uni-load-more v-if="orderList && orderList.length" :status="loadStatus"></uni-load-more>
		</view>
	</view>
	<uni-popup ref="cancelDialog" mask-background-color="transparent" :isMaskClick="false">
		<view class="formDialog">
			<view class="searchForm" v-if="order">
				<uni-forms ref="searchForm" :modelValue="cancelFormData">
					<uni-row>
						<uni-col :span="24">
							<uni-forms-item :label="$t('activity.goodsName')">
								<view style="height: 100%; display: flex; align-items: center">{{ order.goods_name }}</view>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="24">
							<uni-forms-item :label="$t('activity.point')">
								<view style="height: 100%; display: flex; align-items: center">{{ order.integral }}</view>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="24">
							<uni-forms-item :label="$t('activity.addr')">
								<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_address }}</view>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="24">
							<uni-forms-item :label="$t('activity.phone')">
								<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_phone }}</view>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="24">
							<uni-forms-item :label="$t('activity.recipients')">
								<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_recipients }}</view>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="24">
							<uni-forms-item :label="$t('form.remark.label')">
								<uni-easyinput primaryColor="#29BBE4" v-model="cancelFormData.remark" />
							</uni-forms-item>
						</uni-col>
					</uni-row>
				</uni-forms>
				<view class="submitter">
					<button :disabled="submitBtnLoading" class="primaryButton" @click="save">
						<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
						{{ $t('activity.cancelOrder') }}
					</button>
					<button class="secondaryButton" @click="closeCancelDialog">
						{{ $t('activity.cancel22') }}
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { getOrderList, cancelOrder } from '@/services/activity/shop';
export default {
	data() {
		return {
			searchFormData: {
				curr_page: 1,
				page_size: 20,
				qcc_fuzzy_search: undefined
			},
			loading: false,
			loading1: false,
			submitBtnLoading: false,
			total: 0,
			orderList: [],
			hasMore: false,
			order: null,
			cancelFormData: {
				id: undefined,
				remark: undefined
			}
		};
	},
	computed: {
		loadStatus() {
			if (this.loading) {
				return 'loading';
			}
			if (this.orderList && this.orderList.length) {
				if (this.orderList.length < this.total) {
					return 'more';
				}
			}
			return 'no-more';
		}
	},
	methods: {
		async getListData() {
			this.orderList = [];
			this.hasMore = false;
			this.total = 0;
			this.searchFormData.curr_page = 1;
			this.loading1 = true;
			const res = await getOrderList(this.searchFormData);
			if (res && res.code === 0) {
				this.total = res.data.totalRecords;
				this.orderList = res.data.records;
				this.searchFormData.curr_page = this.orderList && this.total > this.orderList.length ? 2 : 1;
				this.hasMore = this.orderList && this.total > this.orderList.length;
			}
			this.loading1 = false;
		},
		getOrderStatus(status) {
			if (status == '0') return this.$t('activity.auditStatus-1');
			if (status == '1') return this.$t('activity.delivered');
			if (status == '2') return this.$t('activity.auditStatus2');
			if (status == '3') return this.$t('activity.shippingNow');
			if (status == '4') return this.$t('activity.shipped');
			if (status == '5') return this.$t('activity.auditStatus-2');
		},
		handleCancel(item) {
			this.order = item;
			this.cancelFormData.id = item.id;
			this.cancelFormData.remark = undefined;
			this.$refs.cancelDialog.open();
		},
		closeCancelDialog() {
			this.$refs.cancelDialog.close();
			this.order = null;
			this.cancelFormData.id = undefined;
			this.cancelFormData.remark = undefined;
		},
		async save() {
			this.submitBtnLoading = true;
			const resp = await cancelOrder(this.cancelFormData);
			this.submitBtnLoading = false;
			if (resp.code == 0) {
				this.closeCancelDialog();
				this.$nextTick(() => {
					this.$cusModal.showModal({
						type: 'message',
						status: 'success',
						contentText: this.$t('common.success.action')
					});
				})
			} else {
				this.closeCancelDialog();
				this.$nextTick(() => {					
					this.$cusModal.showModal({
						type: 'message',
						status: 'warning',
						contentText: resp.msg ?? this.$t('common.error.sysError')
					});
				})
			}
			await this.getListData();
		}
	},
	created() {
		this.getListData();
	},
	onReachBottom() {
		if (this.loading || !this.hasMore) {
			return;
		}
		this.loading = true;
		getOrderList(this.searchFormData)
			.then((res) => {
				if (res && res.code === 0) {
					this.total = res.data.totalRecords;
					this.orderList = [...this.orderList, ...res.data.records];
					this.searchFormData.curr_page = this.total > this.orderList.length ? this.searchFormData.curr_page + 1 : this.searchFormData.curr_page;
					this.hasMore = this.total > this.orderList.length;
				}
				this.loading = false;
			})
			.catch(() => {
				this.loading = false;
			});
	}
};
</script>

<style lang="scss" scoped>
@import './myOrder.scss';
</style>
