<!-- 我要买 -->
<template>
	<view class="page-container">
		<view class="page-title-box">
			<view class="search-container-fixed">
				<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="condition-page-box">
				<view class="condition-item">
					<view class="condition-item-title">软著分类</view>
					<scroll-view scroll-x style="width: 75vw;padding-left: 20rpx;white-space: nowrap;">
						<view class="list-tabs">
							<block v-for="(item,index) in typeList" :key="index">
								<view :class="[includes(selType,item.dataId)? 'tab-select':'tab-normal','item-margin']"
									@click="bindChooseType" :data-item="item">
									{{item.dataName}}
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
				<view class="condition-item mt-20">
					<view class="condition-item-title">价格排序</view>
					<scroll-view scroll-x style="flex:1;">
						<view class="list-tabs ml-20">
							<block v-for="(item,index) in ownerList" :key="index">
								<view :class="[selOwner==item.dataId? 'tab-select':'tab-normal','item-margin']"
									@click="bindChooseOwner" :data-item="item">
									<text>{{item.dataName}}</text>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="container-box">
			<ContainerLoading style="min-height: 70vh;" :loadingVisible="listLoading" @refresh="doRefreshList">
				<view class="page-list-content" v-if="goodsList.length>0">
					<view class="content-box">
						<block v-for="(item,index) in goodsList" :key="index">
							<view class="content-item" @click="doDetail" :data-value="item.goodsId">
								<view class="content-item-img-box">
									<image :src="item.preImg" class="content-item-img" mode="aspectFill"></image>
								</view>
								<view class="content-item-txt">{{item.goodsName}}</view>
								<view class="content-item-bottom">
									<rich-text class="content-item-price"
										:nodes="moneyTxt(8,14,item.goodsOpenPrice)"></rich-text>
									<view class="content-item-time">截止:{{item.goodsLastTime}}</view>
								</view>
								<view class="special-tag" v-if="includes(item.goodsFlag,'特价')">特价</view>
							</view>
						</block>
					</view>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>
			</ContainerLoading>
		</view>
	</view>
	<uni-popup type="message" ref="msg">
		<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import ContainerLoading from '../../../components/container-loading.vue'
	import {
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	import {
		moneyTxt,
		includes
	} from '@/common/js/conver';
	import Shop from '@/common/js/net/shop.js'
	import {
		inject,
		isRef
	} from 'vue';
	export default {
		components: {
			ContainerLoading
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				msgType: 'info',
				msgHint: '',
				pageData: {
					page: 1,
					rows: 12,
					keywords: '',
					priceRangeStart: '',
					priceRangeEnd: '',
					priceOrder: '',
					goodsGetTime: '',
					goodsDevelop: '',
					goodsType: '', //软著类型
					goodsFlag: '',
				},
				priceStart: '',
				priceEnd: '',
				isLoadMore: false,
				hasMore: true,
				listLoading: 'loading',
				listRefreshTrig: false,
				goodsList: [],
				imgPrefix: sImgPrefix,
				localAssets: this.globalData.localAssets,
				imgAssets: this.globalData.imgAssetsUrl,
				typeList: [],
				selType: '',
				ownerList: [{
					dataName: '从高到低',
					dataId: 'DESC'
				}, {
					dataName: '从低到高',
					dataId: 'ASC'
				}],
				selOwner: '',
				msgType: 'info',
				msgHint: '',
				msgShow: false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "我要买",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doGetDic()
			this.doRefreshList()
		},
		onPullDownRefresh() {
			this.doRefreshList()
		},
		onReachBottom() {
			this.doLoadMore()
		},
		methods: {
			moneyTxt,
			includes,
			inputKeywords(e) {
				this.pageData.keywords = e.detail.value
			},
			doSearch() {
				this.goodsList = []
				this.doRefreshList()
			},
			bindChooseType(e) {
				uni.pageScrollTo({
					scrollTop: 0
				})
				setTimeout(() => {
					const item = e.currentTarget.dataset.item;
					let newSelType = this.selType;
					const typeArr = newSelType ? newSelType.split(',') : [];
					if (typeArr.includes(item.dataId)) {
						const index = typeArr.indexOf(item.dataId);
						typeArr.splice(index, 1);
					} else {
						typeArr.push(item.dataId);
					}
					newSelType = typeArr.join(',');
					this.selType = newSelType
					this.doRefreshList();
				}, 500);
			},
			bindChooseOwner(e) {
				const item = e.currentTarget.dataset.item
				this.selOwner = this.selOwner == item.dataId ? '' : item.dataId
				this.doRefreshList()
			},
			doGetDic() {
				uni.showLoading({
					title: '加载中...',
				})
				const that = this
				Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde')
					.then(res => {
						uni.hideLoading()
						that.typeList = res
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			//刷新
			doRefreshList() {
				this.goodsList = []
				this.isLoadMore = false
				this.hasMore = 'more'
				this.listRefreshTrig = true
				this.pageData.page = 1
				this.pageData.priceOrder = this.selOwner
				this.pageData.priceRangeStart = this.priceStart
				this.pageData.priceRangeEnd = this.priceEnd
				this.pageData.goodsType = this.selType
				this.getIndexList(true)
			},
			//加载更多
			doLoadMore() {
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				//判断是否有更多
				this.hasMore = 'loading'
				this.isLoadMore = true
				this.pageData.page = ++this.pageData.page
				_self.getIndexList(false)
			},
			//获取列表
			getIndexList(isRefresh) {
				const _self = this
				this.listLoading = isRefresh ? 'loading' : ''
				Shop.doGetIndexList(_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.listLoading = 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()
						console.log(err)
						_self.listLoading = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			},
			//为数据中图片添加前缀
			addPrefixToPreviewImgs(data) {
				const prefix = this.imgPrefix;
				return data.map(item => {
					if (item.goodsPhoto && item.goodsPhoto != '') {
						item.preImg = prefix + item.goodsPhoto
					}
					return item;
				});
			},
			//详情
			doDetail(e) {
				const id = e.currentTarget.dataset.value
				uni.navigateTo({
					url: '/pages/shop/goodsDetail/goodsDetail?id=' + id,
					animation: 'fade'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.page-title-box {
		background-color: $white-color;
		position: fixed;
		/* #ifdef MP-BAIDU */
		top: 0rpx;
		/* #endif */
		/* #ifndef MP-BAIDU */
		top: 85rpx;
		/* #endif */
		left: 0;
		display: flex;
		flex-direction: column;
		z-index: 3;
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
	}

	.search-container-fixed {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

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

	.search-input {
		flex: 1;
	}

	.divider-20 {
		background-color: $bg-gray-input-color;
		min-height: 20rpx;
		margin: 0rpx -30rpx;
	}

	.title-box {
		position: relative;
		margin-top: 60rpx;
		padding: 30rpx;
	}

	.title-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-size: cover;
	}

	.title-container {
		position: relative;
	}

	.title-hint-box {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.title-hint-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.title-hint-item:nth-of-type(n+2) {
		margin-left: 30rpx;
	}

	.title-hint-txt {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: $text-gray-desc-color;
	}

	.hook {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: linear-gradient(0deg, #FFB540 0%, #FF4800 100%);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hook::after {
		content: "";
		display: block;
		width: 8rpx;
		height: 15rpx;
		border: solid white;
		border-width: 0 2rpx 2rpx 0;
		transform: rotate(45deg);
		position: absolute;
		top: 6rpx;
	}

	.title-func-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.title-func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* .title-func-item:nth-of-type(n+2) {
	    margin-left: 40rpx;
	} */

	.func-img {
		width: 120rpx;
		height: 120rpx;
	}

	.func-txt {
		font-size: 28rpx;
		color: $text-color;
		margin-top: 15rpx;
	}

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

	.header {
		transition: all 0.3s;
	}

	.header.sticky {
		position: fixed;
		background-color: $white-color;
		box-sizing: border-box;
		padding: 20rpx 30rpx 0rpx 30rpx;
		top: 70rpx;
		left: 0;
		right: 0;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
	}

	.condition-page-box {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0rpx 20rpx 0rpx;
	}

	.condition-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.condition-item-title {
		white-space: nowrap;
		font-size: 24rpx;
	}

	.list-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.tab-select {
		white-space: nowrap;
		line-height: 17px;
		border-radius: 5rpx;
		background-color: $btn-primary-color;
		color: $text-primary-deep-color;
		font-size: 24rpx;
		text-align: center;
		padding: 5rpx 15rpx;
	}

	.tab-normal {
		background-color: $bg-gray-input-color;
		color: $text-gray-hint-color;
		white-space: nowrap;
		line-height: 17px;
		border-radius: 5rpx;
		font-size: 24rpx;
		text-align: center;
		padding: 5rpx 15rpx;
	}

	.item-margin {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		flex-wrap: nowrap;
	}

	.item-margin:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

	.content-container {
		display: flex;
		flex-direction: column;
		margin-bottom: 180rpx;
		position: relative;
	}

	.loading-box {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 99;
		transform: translate(-50%, -50%);
	}

	.page-list-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.content-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.content-item {
		width: 48%;
		margin-top: 20rpx;
		position: relative;
	}

	.content-item:nth-of-type(even) {
		margin-left: 20rpx;
	}


	.special-tag {
		display: inline-block;
		padding: 0rpx 20rpx;
		background-color: $red-color;
		color: $white-color;
		font-size: 22rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.special-tag::before {
		content: '';
		position: absolute;
		left: 0rpx;
		bottom: -15rpx;
		border-width: 18rpx 18rpx 0 0rpx;
		border-style: solid;
		border-color: $red-color transparent transparent transparent;
	}


	.content-item-img-box {
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-color: $bg-gray-input-color;
	}

	.content-item-img {
		width: 200rpx;
		height: 260rpx;
	}

	.content-item-txt {
		font-size: 28rpx;
		margin-top: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	.content-item-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

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

	.content-item-price {
		color: red;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>