<!-- 已销售 -->
<template>
	<view class="page-container">
		<view class="search-container-fixed" style="background-color: white;">
			<view class="search-box">
				<icon class="mr-10" type="search" size="20"></icon>
				<input type="text" @confirm="doSearch" class="search-input" @input="inputKeywords"
					:value="pageData.keywords" placeholder="请输入软著名称" />
				<view @click="doSearch">搜索</view>
			</view>
		</view>
		<view class="container-box">
			<containerLoading :loadingVisible="loadingState" @refresh="doRefreshList" style="min-height: 70vh;">
				<view style="display: flex;flex-direction: column;width: 100%">
					<view class="list-container">
						<block v-for="(item,index) in goodsList" :key="index">
							<view class="list-item" :data-value="item" @click="goDetail">
								<view class="item-img-box">
									<image :src="item.goodsDTO.preImg" mode="scaleToFill" class="item-img">
									</image>
									<view v-if="item.waitCorrectionCount > 0" class="count-tag">
										{{item.waitCorrectionCount}}
									</view>
								</view>
								<view class="item-container">
									<view class="item-goods-name-box">
										<view :class="['item-goods-status',goodsOrderColor(item.orderStatus)]">
											{{goodsOrderStatus(item.orderStatus)}}
										</view>
										<view class="item-goods-name">
											{{item.goodsDTO.goodsName}}
										</view>
									</view>
									<view class="item-price-box">
										<view class="item-price-title">订单价格</view>
										<rich-text class="item-price-price"
											:nodes="moneyTxt(12,16,item.sellMoney)"></rich-text>
									</view>
									<view class="item-time-box">
										<view class="item-time-item">
											<view class="item-time-title">下单时间</view>
											<view class="item-time-time">{{item.createTime}}</view>
										</view>
										<view class="item-time-item">
											<view class="item-time-title">付款时间</view>
											<view class="item-time-time">{{item.payTime==''? '未付款':item.payTime}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>
			</containerLoading>
		</view>
	</view>
</template>

<script>
	// 已销售
	import containerLoading from '@/components/container-loading.vue'
	import Shop from '@/common/js/net/shop.js'
	import {
		sImgPrefix
	}
	from '@/common/js/net/mainUrl.js'
	import {
		goodsOrderStatus,
		goodsOrderColor,
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			containerLoading
		},
		setup() {},
		data() {
			return {
				pageData: {
					page: 1,
					rows: 10,
					keywords: '',
					startTime: '',
					endTime: '',
					orderStatus: ''
				},
				msgShow: false,
				msgHint: '',
				msgType: 'error',
				loadingState: 'loading',
				listRefreshTrig: false,
				isLoadMore: false,
				hasMore: 'more',
				goodsList: [],
				needRefresh: false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "已销售",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doRefreshList()
		},
		onShow() {
			if (this.needRefresh) {
				this.needRefresh = false
				this.doRefreshList()
			}
		},
		onPullDownRefresh() {
			this.doRefreshList()
		},
		onReachBottom() {
			this.doLoadMore()
		},
		methods: {
			goodsOrderStatus,
			goodsOrderColor,
			moneyTxt,
			inputKeywords(e) {
				this.pageData.keywords = e.detail.value
			},
			doSearch() {
				// 搜索前重置页码和列表
				this.pageData.page = 1;
				this.goodsList = [];
				this.hasMore = 'more';
				this.doRefreshList()
			},
			doRefreshList() {
				console.log('正在刷新...')
				this.listRefreshTrig = true
				this.loadingState = 'loading'
				this.hasMore = 'more'
				this.isLoadMore = false
				this.pageData.page = 1
				this.goodsList = []
				this.doGetMineOrders(true)
			},
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				if (this.isLoadMore || this.hasMore == 'noMore') {
					return
				}
				this.isLoadMore = true
				this.hasMore = 'loading'
				this.pageData.page = ++this.pageData.page
				this.doGetMineOrders(false)
			},
			//获取列表
			doGetMineOrders(isRefresh) {
				const _self = this
				_self.goodsList = isRefresh ? [] : _self.goodsList
				_self.loadingState = isRefresh ? 'loading' : ''
				Shop.doGetMineSellOrder(_self.pageData)
					.then(res => {
						uni.stopPullDownRefresh()
						console.log(res)
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						const list = _self.addPrefixToPreviewImgs(res.rows)
						_self.loadingState = isRefresh ? status : ''
						_self.goodsList = _self.goodsList.concat(list)
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = _self.goodsList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						uni.stopPullDownRefresh()
						_self.loadingState = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			},
			//为数据中图片添加前缀
			addPrefixToPreviewImgs(data) {
				const prefix = sImgPrefix
				return data.map(item => {
					if (item.goodsDTO.goodsPhoto && item.goodsDTO.goodsPhoto != '') {
						item.goodsDTO.preImg = prefix + item.goodsDTO.goodsPhoto
					}
					return item;
				});
			},
			//跳转详情
			goDetail(e) {
				const goods = e.currentTarget.dataset.value
				uni.navigateTo({
					url: '/pages/shop/orderDetail/orderDetail?orderId=' + goods.orderId + '&kind=sell',
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.search-container-fixed {
		position: fixed;
		top: 82rpx;
		left: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		z-index: 99;
		padding: 30rpx 0rpx;
	}

	.search-box {
		background-color: $bg-gray-color;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0rpx 30rpx 0rpx 30rpx;
		padding: 15rpx 20rpx;
		border-radius: 60rpx;
		font-size: 28rpx;
	}

	.search-input {
		flex: 1;
	}

	.list-container {
		display: flex;
		flex-direction: column;
	}

	.container-box {
		background-color: $white-color;
		margin: 110rpx -30rpx 0rpx -30rpx;
		padding: 30rpx;
		min-height: 83vh;
	}

	.list-item {
		display: flex;
		flex-direction: row;
	}

	.list-item:nth-of-type(n+1) {
		margin: 15rpx 0rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid $bg-gray-input-color;
	}

	.list-item:last-child {
		border-bottom: none;
	}


	.item-img-box {
		background-color: $divider-color;
		flex: 0.4;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		border-radius: 8rpx;
		position: relative;
	}

	.count-tag {
		background-color: $red-color;
		position: absolute;
		color: $white-color;
		top: -10rpx;
		right: -8rpx;
		border-radius: 50%;
		font-size: 24rpx;
		width: 40rpx;
		text-align: center;
		height: 40rpx;
	}


	.item-img {
		width: 68%;
		height: 180rpx;
	}

	.item-container {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0rpx 15rpx;
	}

	.item-goods-name-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-goods-status {
		font-size: 22rpx;
		text-align: center;
		line-height: 32rpx;
		height: 32rpx;
		white-space: nowrap;
		padding: 3rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 15rpx;
	}

	.item-goods-name {
		font-size: 28rpx;
		color: $text-color;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-price-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}

	.item-price-title {
		font-size: 28rpx;
		color: $text-gray-hint-color;
	}

	.item-price-price {
		margin-left: 20rpx;
		color: $red-color;
		font-weight: bold;
	}

	.item-time-box {
		display: flex;
		flex-direction: column;
		margin-top: 15rpx;
	}

	.item-time-item {
		display: flex;
		flex-direction: row;
	}

	.item-time-title {
		font-size: 24rpx;
		color: $text-gray-hint-color;
	}

	.item-time-time {
		font-size: 24rpx;
		color: $text-gray-desc-color;
		margin-left: 20rpx;
	}

	.col-gray {
		background-color: $bg-gray-status-light-color;
		color: $text-color;
	}

	.col-green {
		background-color: $bg-green-status-light-color;
		color: $text-color;
	}

	.col-primary {
		background-color: $primary-color-light;
		color: $text-color;
	}

	.col-red {
		background-color: $bg-red-deep-color;
		color: $white-color;
	}
</style>