<template>
	<view class="page-container" style="background-color: white;">
		<view class="search-container-fixed">
			<view class="search-box">
				<icon class="mr-10" type="search" size="20"></icon>
				<input type="text" :value="keywords" @confirm="doSearch" class="search-input" @input="inputKeywords"
					placeholder="请输入软著名称" />
				<view @click="doSearch">搜索</view>
			</view>
		</view>
		<view class="title-box">
			<view :style="{'background-image': 'url('+imgAssets+'/bg_shop_title.png)'}" class="title-bg">
			</view>
			<view class="title-container">
				<text>AI喵著 为您提供一站式服务</text>
				<view class="title-hint-box">
					<view class="title-hint-item">
						<view class="hook"></view>
						<text class="title-hint-txt">选的省心</text>
					</view>
					<view class="title-hint-item">
						<view class="hook"></view>
						<text class="title-hint-txt">买的放心</text>
					</view>
					<view class="title-hint-item">
						<view class="hook"></view>
						<text class="title-hint-txt">用的安心</text>
					</view>
				</view>
				<view class="title-func-box">
					<view class="title-func-item" @click="doBuy">
						<image class="func-img" src="/static/images/icon_buy.png"></image>
						<text class="func-txt">我要买</text>
					</view>
					<view class="title-func-item" @click="doPurchase">
						<image class="func-img" src="/static/images/icon_purchase.png"></image>
						<text class="func-txt">已购买</text>
					</view>
					<view class="title-func-item" @click="doSell">
						<image class="func-img" src="/static/images/icon_sell.png"></image>
						<text class="func-txt">我要卖</text>
					</view>
					<view class="title-func-item" @click="doBetray">
						<image class="func-img" src="/static/images/icon_betray.png"></image>
						<text class="func-txt">已销售</text>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box">
			<view :class="['header', isSticky ? 'sticky': '']">
				<view class="divider-20"></view>
				<view class="condition-page-box">
					<view class="condition-item">
						<view class="condition-item-title">软著分类</view>
						<scroll-view :scroll-x="true" class="scroll-view_H">
							<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="content-container" style="min-height: 600rpx;">
				<view class="loading-box">
					<containerLoadingVue :loadingVisible="listLoading">
					</containerLoadingVue>
				</view>
				<view class="content-box" v-if="goodsList.length>0">
					<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>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import containerLoadingVue 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
	} from 'vue';
	export default {
		components: {
			containerLoadingVue
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				pageData: {
					page: 1,
					rows: 10,
					keywords: '',
					priceRangeStart: '',
					priceRangeEnd: '',
					priceOrder: '',
					goodsGetTime: '',
					goodsDevelop: '',
					goodsType: '', //软著类型
					goodsFlag: '',
				},
				keywords: '',
				priceStart: '',
				priceEnd: '',
				isLoadMore: false,
				hasMore: 'more',
				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: '',
				isSticky: false,
				msgType: 'info',
				msgHint: '',
				msgShow: false,
				needRefresh: false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "商城",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doGetDic()
			this.doRefreshList()
		},
		onShow() {
			if (this.needRefresh) {
				this.needRefresh = false
				this.doRefreshList()
			}
		},
		onReachBottom() {
			console.log('触底了')
			this.doLoadMore()
		},
		onPageScroll(e) {
			this.isSticky = e.scrollTop > 155
		},
		onPullDownRefresh() {
			this.doRefreshList()
		},
		methods: {
			moneyTxt,
			includes,
			inputKeywords(e) {
				this.setData({
					keywords: e.detail.value
				})
			},
			doSearch() {
				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.pageData.page = 1
				this.pageData.keywords = this.keywords
				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
				_self.listLoading = isRefresh ? 'loading' : ''
				Shop.doGetIndexList(_self.pageData)
					.then(res => {
						uni.stopPullDownRefresh()
						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()
						_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;
				});
			},
			//我要买
			doBuy() {
				uni.navigateTo({
					url: '/pages/shop/buyGoods/buyGoods',
				})
			},
			//已购买
			doPurchase() {
				uni.navigateTo({
					url: '/pages/shop/purchasedGoods/purchasedGoods',
				})
			},
			//我要卖
			doSell() {
				uni.navigateTo({
					url: '/pages/shop/sellGoods/sellGoods',
				})
			},
			//已销售
			doBetray() {
				uni.navigateTo({
					url: '/pages/shop/soldGoods/soldGoods',
				})
			},
			//详情
			doDetail(e) {
				const id = e.currentTarget.dataset.value
				uni.navigateTo({
					url: '/pages/shop/goodsDetail/goodsDetail?id=' + id,
					animation: 'fade'
				})
			}
		},
	};
</script>

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

	.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;
	}

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

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

	.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 {
		display: flex;
		flex-direction: column;
	}

	.header {
		transition: all 0.3s;
		background-color: $white-color;
	}

	.sticky {
		position: fixed;
		background-color: $white-color;
		box-sizing: border-box;
		padding: 20rpx 30rpx 0rpx 30rpx;
		top: 160rpx;
		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;
	}

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

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

	.scroll-view_H {
		width: 75vw;
		padding-left: 20rpx;
		white-space: nowrap;
	}

	.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;
		flex-wrap: nowrap;
	}

	.tab-normal {
		background-color: $bg-gray-input-color;
		color: $text-gray-hint-color;
		white-space: nowrap;
		flex-wrap: 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;
	}

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

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

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

	.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;
	}
</style>