<template>
	<view class="search">
		<view>
			<search-input @searchBtn="searchBtn" :searchValue="keyword" :show='false' />
			<view v-if="rule == 1">
				<view class="table" v-if="keyword">
					<view v-for="item in tabList " :key="item.id" @click="onClickTab(item.id)" class="li" :class="active == item.id ? 'border' : ''">
						{{item.name}}
						<span v-if="item.id == 0">{{total_num}}</span>
						<span v-else-if="item.id == 1">{{total_num1}}</span>
						<span v-else-if="item.id == 2">{{total_num2}}</span>
					</view>
				</view>
			</view>
			<view class="search-sort" v-if="active !== 2">
				<view class="search-sort-item" v-for="(item, index) in sortList" :key="index" @click.stop="chooseSort(index)">
					<text :class="sortIndex === index ? 'choose' : ''">{{item}}</text>
					<view class="icon" v-if="index === 2">
						<up-icon name="arrow-up" size="10" :color="priceType && sortIndex === 2 ? Color : ''" />
						<up-icon name="arrow-down" size="10" :color="!priceType && sortIndex === 2 ? Color : ''" />
					</view>
				</view>
			</view>
			<view>
				<view v-if="active == 0" style="padding: 20rpx 30rpx;">
					<view class="search-list-item" v-for="(item, index) in list" :key="index" @click.stop="toGoods(item.id)">
						<view class="faceImg">
							<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="image"></image>
							<view class="out" v-if="item.sold_status === 2">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
							</view>
							<view class="out" v-else-if="item.sold_status === 0">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
							</view>
							<view class="out" v-else-if="item.total_stock === 0">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
							</view>
						</view>
						<view class="search-list-item-info">
							<view>
								<view class="name">{{item.title}}</view>
								<view class="desc" v-if="item.match_title">{{item.match_title}}</view>
								<template v-if="item.actives && item.actives.length">
									<view v-for="it in item.actives" class="move_img">{{it.name}}</view>
								</template>
							</view>
							<view class="tag">
								<text class="tag-item" v-for="(tag, i) in item.tags" :key="i">{{tag}}</text>
							</view>
							
							<view class="price">
								<view class="vip-left">
									<text class="icon">￥</text>
									<text class="text" v-if="item.group_goods.length === 1">
										<text v-if="item.group_goods[0].specs_type===0">
											{{item.group_goods[0].price}}
										</text>
										<text v-else>
											<text v-if="item.group_goods[0].min_price===item.group_goods[0].max_price">{{item.group_goods[0].min_price}}</text>
											<text v-else-if="parseInt(item.group_goods[0].max_price)<parseInt(item.group_goods[0].min_price)">{{item.group_goods[0].max_price}}~
												{{item.group_goods[0].min_price}}</text>
											<text v-else>{{item.group_goods[0].min_price}}~
												{{item.group_goods[0].max_price}}</text>
										</text>
									</text>
									<text class="text" v-else>
										<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
										<text v-else-if="parseInt(item.max_price) < parseInt(item.min_price)">{{item.max_price}}~{{item.min_price}}</text>
										<text v-else>{{item.min_price}}~{{item.max_price}}</text>
									</text>
								</view>
								<view class="price-right">
									<view v-if="item.group_goods.length === 1">
										<view @click.stop="getGoodsSku(item.group_goods[0])" class="lit"
											v-if="item.group_goods[0].specs_type == 0 && item.group_goods[0].goods.limit_type == 0">
											<up-icon name="shopping-cart" :color="Color" size="25" />
										</view>
										<view class="lit"
											v-else-if="item.group_goods[0].specs_type==0 && item.group_goods[0].goods.limit_type!=0">
											<up-icon name="shopping-cart" :color="Color" size="25" />
										</view>
										<view @click.stop="getGoodsSku(item.group_goods[0])" class="lit"
											 v-if="item.group_goods[0].specs_type==1">
											<up-icon name="shopping-cart" :color="Color" size="25" />
										</view>
									</view>
									<view class="lit" v-else>
										<up-icon name="shopping-cart" :color="Color" size="25" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="page >= lastPage && list.length && !loading">— 没有更多了 —</view>
					<view class="emptyBox" v-if="!list.length && !loading">
						<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="未搜索到您想要的"></up-empty>
						<view>换个关键词试试吧</view>
					</view>
					<view v-if="loading" class="loadbox">
						<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
					</view>
				</view>
				
				<view v-else-if="active == 1" style="padding: 20rpx 30rpx;">
					<view class="box" v-for="(item, index) in list2" :key="index" @click="hanleJump(item.id)">
						<view class="img">
							<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" alt="" />
						</view>
						<view class="head">
							<view class="h1">{{item.title}}</view>
							<view class="buttom">
								<view class="num" v-if="item.price > 0">
									<text class="icon">￥</text>
									<text>{{item.price}}</text>
								</view>
								<view class="num" v-else>
									<text class="icon">￥</text>
									<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
									<text v-else>{{item.min_price}}~{{item.max_price}}</text>
								</view>
								<view class="icon">
									<up-icon name="shopping-cart" :color="Color" size="25" />
								</view>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="page2 >= lastPage2 && list2.length && !loading2">— 没有更多了 —</view>
					<view class="emptyBox" v-if="!list2.length && !loading2">
						<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="暂无搜索结果"></up-empty>
						<view>换个关键词试试吧</view>
					</view>
					<view v-if="loading2" class="loadbox">
						<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
					</view>
				</view>
				
				<view v-else>
					<view class="shop" v-for="(list, index) in list1" :key="index">
						<view class="title">
							<view class="name">
								<view>{{list.name}}</view>
								<view class="anniu" @click.stop="hanleJump2(list.id)">进入品牌</view>
							</view>
							<view class="goodscommodity">
								<view class="goodsgun" v-for="(list1, index) in list.shop_goods" :key="index" @click.stop="hanleJump(list1.id)">
									<image :src="list1.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
									<view class="price_list" v-if="list1.price > 0">
										<text class="icon">￥</text>
										<text>{{list1.price}}</text>
									</view>
									<view class="price_list" v-else>
										<text class="icon">￥</text>
										<text v-if="list1.max_price === list1.min_price">{{list1.min_price}}</text>
										<text v-else-if=" parseInt(list1.max_price) < parseInt(list1.min_price)">{{list1.max_price}}~{{list1.min_price}}</text>
										<text v-else>{{list1.min_price}}~{{list1.max_price}}</text>
									</view>
								</view>
								<view v-if="list.shop_goods.length" @click.stop="hanleJump2(list.id)">
									<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/06/17/j2o8JQpmbCO8BRAFTrppzAGcELNSC4BrLmHXvDMO.png"
										mode="widthFix" style="width: 214rpx;border-radius: 0rpx"></image>
								</view>
							</view>
						</view>
					</view>

					<view class="bottom" v-if="page1 >= lastPage1 && list1.length && !loading1">— 没有更多了 —</view>
					<view class="emptyBox" v-if="!list1.length && !loading1">
						<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="暂无搜索结果"></up-empty>
						<view>换个关键词试试吧</view>
					</view>
					<view v-if="loading1" class="loadbox">
						<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
					</view>
				</view>
			</view>
			
			
			<view v-if="isEmpty && hot.length">
				<view class="nodata">
					<view style="width: 100%;text-align: center; padding: 20rpx 0;">
						<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/06/04/46htQZUX302oWnlo09LHUlbUL0gt1VaWftK34mUl.png"
							style="width: 180px; height: 18px;"></image>
					</view>
					<view class="box_tite">
						<view v-for="(item, index) in hot" :key="index" class="hezi" @click.stop="hanleJump1(item.id)">
							<image :src="item.face_img" alt="" />
							<view class="zong">
								<view class="h1">{{item.title}}</view>
								<view class="number" v-if="item.price > 0">
									<text class="icon">￥</text>
									<text>{{item.price}}</text>
								</view>
								<view class="number" v-else>
									<text class="icon">￥</text>
									<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
									<text v-else>{{item.min_price}}~{{item.max_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom" v-if="page3 >= lastPage3">—到底啦—</view>
			</view>
		</view>
		
		<choose-sku :show-sku="showSku" :show1='true' :sku-info="skuInfo" :skus_1='skus_1' @close="showSku = false" />
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import searchInput from '@/components/searchInput/index.vue'
	import chooseSku from '@/components/sku/ChooseSku.vue'
	import { get, post } from '@/api/request.js'
	import { goodsItem } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		components: {
			searchInput,
			chooseSku,
		},
		setup() {
			const data = reactive({
				rule: 0,
				total_num: 0,
				total_num1: 0,
				total_num2: 0,
				active: 0,
				sortList: ['综合', '销量', '价格', '上新'],
				sortIndex: 0,
				priceType: false,
				title: '搜索商品',
				list: [],
				list1: [],
				list2: [],
				hot: [],
				tabList: [
					{ id: 0, name: '团购' },
					{ id: 1, name: '商品' },
					{ id: 2, name: '会场' }
				],
				page: 1,
				page2: 1,
				lastPage: 0,
				loading: false,
				lastPage1: 0,
				lastPage2: 0,
				loading2: false,
				page1: 1,
				loading1: false,
				page3: 1,
				lastPage3: 0,
				vipOn: 0,
				isEmpty: false,
				Color: '',
				priceColor: ''
			})
			
			const gethot = async (setEmpty = true) => {
				uni.showLoading({
					title: '加载中...'
				})
				let res = await get('/api/app/special/hot', {
					page: data.page3
				})
				data.list3 = setEmpty ? res.data : data.list3.concat(res.data)
				data.hot = data.hot.concat(res.data)
				data.lastPage3 = res.meta.last_page
				uni.hideLoading()
			}
			
			const hanleJump1 = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			const hanleJump = (id) => {
				uni.navigateTo({
					url: '/pages/productDetails/index?id=' + id
				})
			}
			
			const hanleJump2 = (id) => {
				uni.navigateTo({
					url: '/pages/smallshop/index?id=' + id
				})
			}

			const hanlegetlist = async (setEmpty = true) => {
				uni.showLoading({
					title: '加载中...'
				})
				data.loading1 = true
				await get('/api/app/special/merchant', {
					page: data.page1,
					limit: 5,
					keyword: search.keyword
				}).then((res) => {
					data.list1 = setEmpty ? res.data : data.list1.concat(res.data)
					data.lastPage1 = res.meta.last_page
					data.total_num2 = res.meta.total
					uni.hideLoading()
					data.loading1 = false
				}).catch(() => {
					data.loading1 = false
				})
			}

			const hanlegetlist1 = async (setEmpty = true) => {
				uni.showLoading({
					title: '加载中...'
				})
				data.loading2 = true
				await get('/api/app/special/goods', { ...search, page: data.page2 }).then((res) => {
					data.list2 = setEmpty ? res.data : data.list2.concat(res.data)
					data.lastPage2 = res.meta.last_page
					data.total_num1 = res.meta.total
					if(data.list2.length == 0 && data.list1.length == 0 && data.list.length == 0) {
						data.isEmpty = true
					} else {
						data.isEmpty = false
					}
					uni.hideLoading()
					data.loading2 = false
				}).catch(() => {
					data.loading2 = false
				})
			}

			const onClickTab = (e) => {
				data.active = e
			}
			
			// 搜索参数
			const search = reactive({
				keyword: '',
				shop_group_id: '',
				showcases_id: '',
				sales: '',
				price: '',
				score: 2,
				new: ''
			})

			async function getList(setEmpty = true) {
				uni.showLoading({
					title: '加载中...'
				})
				data.loading = true
				await get('/api/app/search', { ...search, page: data.page }).then((res) => {
					data.list = setEmpty ? res.data : data.list.concat(res.data)
					data.lastPage = res.meta.last_page
					data.total_num = res.meta.total
					uni.hideLoading()
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}

			async function updateList1() {
				data.page1 = 1
				await hanlegetlist(true)
			}

			async function updateList2() {
				data.page2 = 1
				await hanlegetlist1()
			}

			async function updateList() {
				data.page = 1
				await getList()
			}

			// 排序
			function chooseSort(index) {
				data.sortIndex = index
				if (index === 2) {
					data.priceType = !data.priceType
					search.price = data.priceType ? 1 : 2
					search.new = ''
				} else {
					search.price = ''
				}
				search.sales = index === 1 ? 2 : ''
				search.score = index === 0 ? 2 : ''
				search.new = index === 3 ? 2 : ''

				if (data.active == 0) {
					updateList()
				} else if (data.active == 1) {
					updateList2()
				}
			}
			// 搜索
			async function searchBtn(e) {
				if (search.keyword !== e) {
					search.keyword = e
					await updateList()
					await updateList1()
					await updateList2()
					if(data.active === 0) {
						data.active = data.list.length ? 0 : (data.list2.length ? 1 : data.list1.length ? 2 : 0)
					}
					if(data.active === 1) {
						data.active = data.list2.length ? 1 : (data.list.length ? 0 : data.list1.length ? 2 : 1)
					}
					if(data.active === 2) {
						data.active = data.list1.length ? 2 : (data.list.length ? 0 : data.list2.length ? 1 : 2)
					}
				}
				uni.setNavigationBarTitle({
					title: search.keyword || '商品搜索'
				})
			}
			
			const {
				toGoods,
				showSku,
				getGoodsSku,
				skuInfo,
				skus_1
			} = goodsItem()
			
			return {
				...toRefs(search),
				getList,
				hanlegetlist,
				hanlegetlist1,
				gethot,
				updateList,
				updateList1,
				updateList2,
				skus_1,
				...toRefs(data),
				chooseSort,
				searchBtn,
				toGoods,
				showSku,
				getGoodsSku,
				skuInfo,
				onClickTab,
				hanleJump1,
				hanleJump2,
				hanleJump
			}
		},
		onReachBottom() {
			if (this.list.length || this.list1.length || this.list2.length) {
				if (this.active == 0) {
					if (this.page < this.lastPage) {
						this.page++
						this.getList(false)
					}
				} else if (this.active == 1) {
					if (this.page2 < this.lastPage2) {
						this.page2++
						this.hanlegetlist1(false)
					}
				} else {
					if (this.page1 < this.lastPage1) {
						this.page1++
						this.hanlegetlist(false)
					}
				}
			} else {
				if (this.page3 < this.lastPage3) {
					this.page3++
					this.gethot(false)
				}
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			const _this = this
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.rule = uni.getStorageSync('rule')
			_this.keyword = options.value ? decodeURIComponent(options.value) : ''
			_this.title = options.title || _this.keyword || '团购商品'
			_this.shop_group_id = options.groupId || ''
			_this.vipOn = uni.getStorageSync('vip_on') || 0
			uni.setNavigationBarTitle({
				title: decodeURIComponent(_this.title)
			})
			
			if(options.sort) {
				_this.priceType = options.priceType === 'true' ? false : true
				_this.chooseSort(Number(options.sort))
			} else {
				_this.getList()
			}
			if (options.value) {
				await _this.gethot()
				await _this.hanlegetlist()
				await _this.hanlegetlist1()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 10px;
		.img {
			width: 30%;
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.head {
			width: 65%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.h1 {
				font-size: 30rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.buttom {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				.num {
					color: v-bind('priceColor');
					font-size: 30rpx;
				}
			}
		}
	}

	.lit {
		margin-left: 10rpx;
	}

	.price-right {
		align-items: center;
	}

	.zong {
		padding: 0 20rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 200rpx;
	}

	.box_tite {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
		margin: 20rpx 20rpx 0;
		.hezi {
			width: 48.5%;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 10rpx;
		}
		image {
			width: 100%;
			height: 343rpx;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
		}
		.h1 {
			margin: 10rpx 0;
			text-align: left;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			display: -webkit-box !important;
			-webkit-line-clamp: 2 !important;
			-webkit-box-orient: vertical !important;
		}
		.number {
			text-align: left;
			margin-bottom: 10rpx;
			color: v-bind('priceColor');
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	.nodata {
		background: #f5f5f5;
	}

	.shop {
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx 20rpx 0;
		.banner {
			width: 100%;
			.img {
				width: 100%;
				height: 100%;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
		}

		.title {
			padding: 25rpx 13rpx;
			.name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 15rpx;
				font-weight: bolder;
				font-size: 30rpx;
				.anniu {
					text-align: center;
					line-height: 42rpx;
					color: #fff;
					font-weight: normal;
					width: 133rpx;
					height: 42rpx;
					font-size: 25rpx;
					border-radius: 28rpx;
					background: v-bind(Color);
				}
			}

			.goodscommodity {
				display: flex;
				margin-top: 25rpx;
				overflow: auto;
				.goodsgun {
					padding: 0 10rpx;
					box-sizing: border-box;
					overflow: hidden;
					flex-shrink: 0;
					width: 33%;
					text-align: center;
				}
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 5rpx;
				}
				.title_list {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #2c2c2c;
					margin: 10rpx 0;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.price_list {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					margin-top: 15rpx;
					.icon {
						font-size: 25rpx;
					}
				}
			}
		}
	}

	.border {
		color: v-bind('Color') !important;

		position: relative;
	}

	.border::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 20%;
		height: 2px;
		background: v-bind('Color');
	}

	.table {
		display: flex;
		padding: 20rpx 0;
		background: #fff;
		border-bottom: 1px solid #eee;
		.li {
			flex: 1;
			font-size: 30rpx;
			margin: 0 20rpx;
			color: #000;
			font-weight: normal;
			text-align: center;
		}
		.li:last-child {
			margin-right: 0;
		}
	}

	.bottom {
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		padding: 30rpx 0;
	}

	.search {
		.search-sort {
			display: flex;
			background-color: #fff;
			height: 90rpx;
			align-items: center;
			justify-content: space-around;
			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				color: #666;
				font-size: 28rpx;

				.icon {
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;

					.iconfont {
						font-size: 24rpx;
						line-height: 16rpx;
					}
				}
			}

			.choose {
				color: v-bind('Color');
				font-weight: bold;
			}
		}

		.search-list {
			&-item {
				display: flex;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.faceImg{
					position: relative;
					margin-right: 25rpx;
					.image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					.out{
						position: absolute;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						top: 0;
						left: 0;
						.out_img{
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
				

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					overflow: hidden;
					.desc{
						font-size: 24rpx;
						line-height: 36rpx;
						color: #999;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.name {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.tag {
						display: flex;
						font-size: 24rpx;
						color: v-bind('Color');
						overflow-x: auto;

						&-item {
							background: #fff3f4;
							border-radius: 21rpx;
							padding: 4rpx 16rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
						}
					}

					.vip {
						display: flex;
						align-items: center;

						.tag {
							margin-left: 10rpx;
							font-size: 20rpx;
							color: #fbe6c3;
							background: #353648;
							border-radius: 20rpx 0 0 0;
							padding: 2rpx 10rpx;
						}
					}

					.vip-left {
						color: v-bind('priceColor');

						.text {
							font-size: 34rpx;
						}

						.icon {
							font-size: 24rpx;
						}
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 22rpx;
						color: #999999;

						&-left {
							color: #333;
							font-size: 28rpx;
						}

						&-right {
							display: flex;

							.icon {
								margin-left: 20rpx;
								background-color: v-bind('Color');
								border-radius: 2px;
								color: #fff;
								font-size: 19px;
								height: 17px;
								line-height: 15px;
								text-align: center;
								width: 17px;
							}
						}
					}
				}
			}
		}
	}
	.move_img {
		display: inline-block;
		font-size: 22rpx;
		color: #fff;
		margin: 3px 10px 3px 0;
		background-image: url('@/static/image/move_img.png');
		background-repeat: no-repeat;
		padding: 0px 3px 0px 12px;
		height: 40rpx;
		background-size: 100% 100%;
		line-height: 40rpx;
	}
	.emptyBox{
		text-align: center;
		font-size: 30rpx;
		line-height: 50rpx;
		padding: 90rpx 0;
		color: #888;
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
		font-size: 24rpx;
		color: #98989f;
	}
</style>
