<template>
	<view class="warpper">
		<uni-nav-bar>
			<view slot="left" class="left-title">纸商城</view>
			<view slot="right" class="right-title" @tap="shareTap">分享</view>
		</uni-nav-bar>
		<view class="top-box">
			<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
			<view class="center">
				<view class="title">{{ storeInformation.name }}</view>
				<view class="desc">全部商品 39 &nbsp; | &nbsp;上新 9</view>
			</view>
			<view class="right">
				<view class="cut" @click="checkMall()">
					切换商城
					<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
				</view>
				<view class="set" @click="setting">设置</view>
			</view>
		</view>
		<uGap></uGap>
		<view class="" v-if="pageShow">
			<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
				<view v-for="(item, index) in listData" :key="index" >
					<view class="content" @click="detailInfo(item)">
						<image class="image" :src="item.litPicUrl" mode=""></image>
						<view class="" style="width: 100%;">
							<view class="title">
								<view class="">{{ item.brandName }}</view>
								<view class="">
									<image class="icon" :src="item.status === 30111 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image>
								</view>
							</view>
							<view class="sub-title">{{ item.categoryName }}/{{ item.name }}/{{ item.manufacturerName }}</view>
							<view class="desc">
								克重(价格)：
								<text v-for="(sku,index) in  item.skuList">{{sku.weight}}({{sku.listPrice}})</text>
							</view>
						</view>
					</view>
					<view class="other">
						<view class="time">{{ item.updateTime }}</view>
						<view class="btn">
							<view class="" @click="editPaper(item)">编辑</view>
							<view class="divide"></view>
							<view class="" @click="productStatusChange(item)">{{ item.status === 30111 ? '下架' : '上架' }}</view>
						</view>
					</view>
					<uGap></uGap>
				</view>
			</scroll-list>
		</view>
		<view>
			<view class="offer-prices" @click="nativeTo()"><image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image></view>
		</view>
		<no-data v-if="!pageShow"></no-data>
	</view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { back, go2, loginGo2 } from '@/utils/hook.js'
import { SupplierList, productStatus } from '@/apis/add-paper.js'
import noData from './no-data.vue'
export default {
	components: { uGap, noData },
	data() {
		return {
			pageShow: true,
			storeInformation: {
				supplierId: null,
				name: null
			},
			option: {
				size: 10,
				auto: true,
				emptyText: '暂无数据~',
				background: '#F7F8FA',
				disabled: false
			},
			pattern: {
				backgroundColor: '#007AFF',
				buttonColor: '#007AFF'
			},
			content: [],
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'vertical',
			orderPagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10,
				storeId: null,
				name: null,
				supplierId: this.$store.state.supplierInfo.supplierId
			},
			listData: []
		}
	},
	onShow() {
		this.storeInformation = {
			supplierId: this.$store.state.supplierInfo.supplierId,
			name: this.$store.state.supplierInfo.name
		}
	},
	onLoad() {
		this.quertData()
	},
	methods: {
		back,
		// 获取纸品列表 pageShow
		quertData() {
			return new Promise((resolve, reject) => {
				SupplierList({ ...this.orderPagination })
					.then(res => {
						console.log('纸品列表', res)
						if (res) {
							if (res.records.length === 0) {
								this.pageShow = false
								return
							}
							if (this.orderPagination.pageNum == 1) {
								this.listData = res.records
							} else {
								this.listData = this.listData.concat(res.records)
							}
							resolve({ list: this.listData, total: res.total })
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		downCallback() {
			this.orderPagination.pageNum = 1
			this.quertData()
				.then(({ list, total }) => {
					this.$refs.list.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.list.refreshFail()
				})
		},
		upCallback() {
			this.orderPagination.pageNum++
			this.quertData()
				.then(({ list, total }) => {
					this.$refs.list.loadSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.list.loadFail()
				})
		},
		// 切换商城按钮
		checkMall() {
			go2('switching-mall', { supplierId: this.storeInformation.supplierId })
		},
		// 按钮点击事件
		nativeTo() {
			var params = {
				title: '添加纸品'
			}
			go2('add-paper', params)
		},
		// 编辑事件
		editPaper(item) {
			var params = {
				...item,
				title: '编辑纸品'
			}
			go2('add-paper', params)
		},
		// 店铺设置按钮
		setting(item) {
			go2('store-settings')
		},
		// 详情点击事件
		detailInfo(item) {
			loginGo2('paper-detail', item)
		},
		// 上下架事件
		productStatusChange(item) {
			var params = {
				id: item.id,
				status: item.status === 30111 ? 30112 : 30111
			}
			productStatus(params).then(res => {
				if (res) {
					uni.showToast({
						title: '状态修改成功',
						icon: 'success'
					})
					setTimeout(()=>{
						this.orderPagination.pageNum = 1
						this.quertData()
					},500)
					
					
				}
			})
		},
		// 分享
		shareTap() {
			uni.share({
			    provider: "weixin",
			    scene: "WXSceneSession",
			    type: 0,
			    href: "http://uniapp.dcloud.io/",
			    title: "uni-app分享",
			    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
			    success: function (res) {
			        console.log("success:" + JSON.stringify(res));
			    },
			    fail: function (err) {
			        console.log("fail:" + JSON.stringify(err));
			    }
			});
		}
	}
}
</script>

<style lang="scss">
.warpper {
	width: 750rpx;
	.left-title {
		font-size: 40rpx;
		color: #000000;
		letter-spacing: 0;
		font-weight: 500;
	}
	.right-title {
		font-size: 28rpx;
		color: #007aff;
		text-align: right;
		font-weight: 500;
	}
	.top-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 180rpx;
		background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
		background-size: 100%;
		.image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.right {
			width: 140rpx;
		}
		.center {
			position: relative;
			left: -20rpx;
		}
		.title {
			font-size: 34rpx;
			color: #ffffff;
			letter-spacing: 2rpx;
			font-weight: 600;
			margin-bottom: 12rpx;
		}
		.desc {
			opacity: 0.75;
			font-size: 28rpx;
			color: #ffffff;
			letter-spacing: 0;
			font-weight: 500;
			padding-right: 32rpx;
		}
		.cut {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #ffffff;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
			.cut-icon {
				width: 29.42rpx;
				height: 26.67rpx;
				margin-left: 10rpx;
			}
		}
		.set {
			opacity: 0.75;
			font-size: 28rpx;
			color: #ffffff;
			letter-spacing: 0;
			font-weight: 500;
			position: relative;
			top: 39rpx;
			left: 60rpx;
		}
	}
	.content {
		background: #ffffff;
		border-bottom: 2rpx solid #dddddd;
		display: flex;
		flex-direction: row;
		padding: 24rpx 0rpx 24rpx 32rpx;
		.image {
			width: 100rpx;
			height: 100rpx;
			flex: 0 0 100rpx;
			margin-right: 18rpx;
		}
		.title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 32rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 500;
			.icon {
				position: relative;
				top: -22rpx;
				width: 150rpx;
				height: 50rpx;
			}
		}
		.sub-title {
			position: relative;
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
			top: -4rpx;
		}
		.desc {
			font-size: 28rpx;
			color: #555555;
			letter-spacing: 0;
			font-weight: 400;
			padding-top: 10rpx;
			line-height: 1.4;
		}
	}
	.other {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		background: #ffffff;
		padding: 0rpx 32rpx;
		.time {
			font-size: 28rpx;
			color: #888888;
			letter-spacing: 0;
			font-weight: 400;
		}
		.btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #007aff;
			letter-spacing: 0;
			text-align: right;
			font-weight: 400;
		}
		.divide {
			width: 2rpx;
			height: 32rpx;
			background: #d8d8d8;
			margin: 0 32rpx;
		}
		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 6rpx;
		}
	}
	.offer-prices {
		position: absolute;
		z-index: 9999;
		right: 32rpx;
		bottom: 122rpx;
		background-color: #007aff;
		border-radius: 50%;
		padding: 10rpx;
		text-align: center;
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #f9f9f9;
		box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.my-image {
		width: 100rpx;
		height: 100rpx;
	}
}
</style>
