<template>
	<view class="warningDetails">
		<view class="">
			<div class="title">
				<div>{{title}}</div>
				<div class="num">共{{goodslist.length||0}}款</div>
			</div>
		</view>
		<div class="warningDetails-list">
			<div class="warningDetails-item" v-for="(item,index) in goodslist" :key="index">
				<image :src="$util.img(item.sku_image)" mode="aspectFill" class="cover"></image>
				<div class="item-content">
					<div class="item-title">{{item.goods_name}}</div>
					<div class="number">编号：{{item.goods_code}}</div>
					<div class="sales">
						销量：<span>{{item.price}}</span>袋
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				goodslist: [],
				paramObj: {},
			};
		},
		onLoad(e) {
			this.paramObj = e;
			switch (e.key) {
				case 'goods_1':
					this.title = `近${e.num}天搜索大于${e.limit_num}次但未在售商品`
					break;
				case 'goods_2':
					this.title = `上架超过${e.num}天无销量新品`
					break;
				case 'goods_3':
					this.title = `近${e.num}天无销量新商品`
					break;
				case 'goods_4':
					this.title = `近${e.num}天销量环比下降超${e.limit_num}%`
					break;
				case 'goods_5':
					this.title = `近${e.num}天销量低于${e.limit_num}的商品`
					break;
				case 'goods_6':
					this.title = `近${e.num}天销量环比上升超${e.limit_num}%`
					break;
				case 'goods_7':
					this.title = `近${e.num}天销量高于${e.limit_num}的商品`
					break;
				default:
					break;
			}
		},
		onShow() {
			this.getWarnMemberList()
		},
		methods: {
			getWarnMemberList() {
				this.$api.sendRequest({
					url: `/api/salasman/warnGoodsList`,
					data: {
						type: this.paramObj.key,
					},
					success: res => {
						this.goodslist = res.data
					}
				})
			},
		},
		onPullDownRefresh() {
			this.$nextTick(() => {
				this.getWarnMemberList();
				uni.stopPullDownRefresh();
			})
		},
	}
</script>

<style lang="scss">
	.warningDetails {
		.warningDetails-list {
			padding: 32rpx;

			.warningDetails-item {
				display: flex;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 28rpx 32rpx;
				margin-bottom: 32rpx;

				.cover {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
					margin-right: 24rpx;
				}

				.item-content {
					.item-title {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.number {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.sales {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F33B50;

						span {
							font-size: 40rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
						}
					}
				}
			}
		}

		.title {
			padding: 24rpx 28rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.num {
				font-weight: bold;
				color: #F33B50;
			}
		}
	}
</style>