<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOptionx" :up="upOptionx">
			<view class="list-Content">
				<u-skeleton rowsHeight="153" rows="10" :loading="loading" :title="false" >
					<view></view>
					<template v-for="item,index in dataList">
						<view class="list-Content-Item" :class="[index>=dataList['length']-1?'list-Content-Stykle':'']">
							<view class="list-Content-Item-Img">
								<image class="img" :src="item['goods_cover']">
								</image>
								<!-- mode="aspectFit" -->
							</view>
							<view class="list-Content-Item-Infor">
								<view class="list-Content-Item-Infor-Title">
									{{item['goods_name']}}
								</view>
								<view class="list-Content-Item-Infor-Sale">
									销售：{{item['sales_num']}}份
								</view>
								<view class="list-Content-Item-Infor-Subsidy">
									补贴卡最高抵扣￥{{_amount(item['deduction_price'])}}
								</view>
								<view class="list-Content-Item-Infor-Price">
									<view class="list-Content-Item-Infor-Price-Left">
										<view class="list-Content-Item-Infor-Price-Left-Subsidy-Price">
											<view>补贴后价格：</view>
											<view class="Price">
												<view
													style="font-weight: 800; color: #FF2A30;font-size: 36rpx;margin-right: 20rpx;">
													<text style="color: #FF2A30;font-size: 22rpx;">￥{{_amount(item['pay_price'] - item['deduction_price'])}}</text></view>
												<view class="xa">￥{{_amount(item['pay_price'])}}</view>
											</view>
										</view>
									</view>
									<view class="list-Content-Item-Infor-Price-Right">
										<navigator :url="`/pages/diy/commodity_home/commodity_home?goods_id=${item['id']}`" hover-class="none">
											<button class="list-Content-Item-Infor-Price-Right-Btn">去定制</button>
										</navigator>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-skeleton>
			</view>
		</mescroll-body>
		<view class="notice-bar" v-if="notice">
			<u-notice-bar :text="notice"></u-notice-bar>
		</view>
		<u-tabbar
			:value="0"
			:placeholder="false"
			:safeAreaInsetBottom="false"
			@change="change"
		>
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="订单" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	// 下拉组件混入
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// 公用混入
	import mixin from "@/static/js/mixin/mixin.js";
	// 请求接口
	import {goodsListAPI,noticeAPI} from '@/request/diy/index.js';
	import { mapMutations } from 'vuex';
	// 抵扣价格 deduction_price
	// 抵扣后价格 pay_price - deduction_price 
	// 划线价格 pay_price
	let self;
	export default {
		mixins: [MescrollMixin,mixin],
		data() {
			return {
				dataList:[1,2,3,4,5,6,7,8,9],
				// 是否展示骨架屏
				// true:展示
				// false:隐藏
				loading:true,
				// 下拉刷新数据
				downOptionx:{
					autoShowLoading:true
				},
				// 上拉加载数据
				upOptionx:{
					textNoMore:'没有更多了'
				},
				notice:''
			};
		},
		onLoad() {
			self = this;
			this.SETBRANDINFOR({
				brand_id: 30,
				brand_name:'DIY'
			});
			noticeAPI().then(res=>{
				this['notice'] = res['data'];
			})
			// // 设置微信分享标识
			// wx.miniProgram.postMessage({ data: 30});
			console.log('初始化');
			console.log(this.calc(19.90,100,'*'),'计算');
		},
		methods: {
			...mapMutations({
				SETBRANDINFOR: 'shopping/SETBRANDINFOR'
			}),
			// 上拉
			upCallback(pagepara) {
				console.log(pagepara,'页面upCallback');
				// 页码
				let page = pagepara['num'];
				// 页长
				let pageSize = pagepara['size'];
				goodsListAPI({page}).then(res=>{
					console.log(res,'res');
					//设置列表数据
					//如果是第一页需手动置空列表
					if (pagepara['num'] == 1){
						this['dataList'] = [];
					};
					// 接口返回的页数据列表 (数组)
					const pagingDataList = res['data']['data'];
					// 接口返回的页数据长度
					const pagingDataLength = pagingDataList['length'];
					// 接口返回的总页数
					const pagingDataPage = res['data']['last_page'];
					//追加新数据
					this['dataList'].push(...pagingDataList); 
					// 关闭加载状态
					this['mescroll'].endByPage(pagingDataLength, pagingDataPage);
					// 关闭骨架屏 只有触发下拉刷新之后或者初次加载才会执行这个逻辑
					this['loading'] = false;
					// mescroll.lockUpScroll(false)
					
				}).catch(res=>{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			
			change(e){
				uni.redirectTo({
					url:'/pages/diy/orders/ersonal_order/ersonal_order'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;

		.content {
			width: 100%;
			height: 100%;
			overflow: hidden;

			.notice-bar {
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 1000;
			}

			.list-Content {
				margin-top: 100rpx;
				border-radius: 10rpx 10rpx 0 0;
				// background-color: #FFFFFF;
				width: 100%;
				height: auto;
				min-height: 90vh;
				padding: 0 24rpx;
				overflow: hidden;
				// .u-skeleton{
					
				// }
				/deep/ &-Stykle::after {
					display: none !important;
				}

				&-Item {
					width: 100%;
					height: auto;
					padding: 27rpx;
					position: relative;
					display: flex;
					justify-content: space-between;
					box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
					border-radius: 20rpx;
					background-color: #FFFFFF;
					margin-bottom: 32rpx;
					// &::last-child{
					// 	// display: none;
					// }

					&::after {
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 1rpx;
						background-color: #EDEDED;
						transform: scale(1, 1);

					}

					&-Img {
						width: 280rpx;
						height: 280rpx;
						min-width: 280rpx;
						min-height: 280rpx;
						max-width: 280rpx;
						max-height: 280rpx;
						border-radius: 20rpx;
						overflow: hidden;

						.img {
							border-radius: 20rpx;
							min-height: 100%;
							max-height: 100%;
						}
					}

					&-Infor {
						flex: 1;
						padding-left: 20rpx;

						&-Title {
							font-size: 28rpx;
							font-weight: 800;
							word-break: break-all;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							min-height: 40rpx;
							line-height: 40rpx;
						}

						&-Sale {
							font-size: 24rpx;
							color: #999999;
							margin-top: 15rpx;
						}

						&-Subsidy {
							display: inline-block;
							font-size: 22rpx;
							color: #FFFFFF;
							background-color: #FF7700;
							border-radius: 10rpx;
							padding: 8rpx 30rpx;
							position: relative;
							// overflow: hidden;
							margin: 20rpx 0 10rpx 0;

							&::after {
								content: '';
								width: 20rpx;
								height: 20rpx;
								background-color: #FFFFFF;
								border-radius: 50rpx;
								position: absolute;
								left: -10rpx;
								top: 50%;
								transform: translateY(-50%);
							}

							&::before {
								content: '';
								width: 20rpx;
								height: 20rpx;
								background-color: #FFFFFF;
								border-radius: 50rpx;
								position: absolute;
								right: -10rpx;
								top: 50%;
								transform: translateY(-50%);
							}
						}

						&-Price {
							display: flex;
							justify-content: space-between;

							&-Left {
								overflow: hidden;

								&-Original-Price {
									margin: 10rpx 0;
									font-size: 24rpx;
									color: #666666;
								}

								&-Subsidy-Price {
									margin: 10rpx 0;
									font-size: 24rpx;
									color: #666666;
									max-width: 220rpx;

									.Price {
										// display: flex;
										align-items: flex-end;
										flex-direction: row;

										.xa {
											text-decoraTion: line-through;
										}
									}
								}
							}

							&-Right {
								display: flex;
								justify-content: center;
								align-items: center;

								&-Btn {
									width: 176rpx;
									height: 80rpx;
									color: #FFFFFF;
									font-size: 28rpx;
									line-height: 80rpx;
									background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
								}
							}

						}

					}
				}
			}

		}

	}
</style>
