<template>
	<view style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
		<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
		<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'>

			<view v-for="(item,index) in data"
				style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;">

				<view v-show="item.type=='1'">
					<view class="item" :class="{ item2: item.state=='已提货' }"
						style="display: flex;flex-direction: row;padding: 25px 15px; ">

						<view style="margin-left: 10px; margin-right: 10px;">

							<image src="https://supervise.yxtsoft.com/lpk/image/home_family.png" mode="aspectFill"
								v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />

							<image src="https://supervise.yxtsoft.com/lpk/image/home_notFamily.png" mode="aspectFill"
								v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />

						</view>


						<view style="	display: flex;flex-direction: column;margin-right: 10px;">

							<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text>

							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
								<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货门店：</text>
								<text style="color: #333; font-size: 14px;">{{item.store}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货日期：</text>
								<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提&ensp;货&ensp;人：</text>
								<text style="color: #333; font-size: 14px;">{{item.userName}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">联系电话：</text>
								<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">状&ensp;&ensp;&ensp;&ensp;态：</text>
								<text style="font-size: 14px;"
									:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
							</view>


						</view>


					</view>

				</view>


				<view v-show="item.type=='2'">
					<view class="item3" :class="{ item4: item.state=='已提货' }"
						style="display: flex;flex-direction: row;padding: 25px 15px;">


						<view style="margin-left: 10px; margin-right: 10px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" mode="aspectFill"
								v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />

							<image src="https://supervise.yxtsoft.com/lpk/image/home_notAffection.png" mode="aspectFill"
								v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />

						</view>

						<view style="	display: flex;flex-direction: column; margin-right: 10px;">

							<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text>

							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
								<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货门店：</text>
								<text style="color: #333; font-size: 14px;">{{item.store}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货日期：</text>
								<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提&ensp;货&ensp;人：</text>
								<text style="color: #333; font-size: 14px;">{{item.userName}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">联系电话：</text>
								<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">状&ensp;&ensp;&ensp;&ensp;态：</text>
								<text style="font-size: 14px;"
									:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
							</view>


						</view>


					</view>
				</view>

				<view v-show="item.type=='3'">
					<view class="item5" :class="{ item6: item.state=='已提货' }"
						style="display: flex;flex-direction: row;padding: 25px 15px;">

						<view style="margin-left: 10px; margin-right: 10px;">

							<image src="https://supervise.yxtsoft.com/lpk/image/home_enterprise.png" mode="aspectFill"
								v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />

							<image src="https://supervise.yxtsoft.com/lpk/image/home_notEnterprise.png"
								mode="aspectFill" v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />

						</view>

						<view style="	display: flex;flex-direction: column; margin-right: 10px;">

							<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text>

							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
								<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货门店：</text>
								<text style="color: #333; font-size: 14px;">{{item.store}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货日期：</text>
								<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提&ensp;货&ensp;人：</text>
								<text style="color: #333; font-size: 14px;">{{item.userName}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">联系电话：</text>
								<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">状&ensp;&ensp;&ensp;&ensp;态：</text>
								<text style="font-size: 14px;"
									:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text>
							</view>
							<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
							</view>


						</view>


					</view>
				</view>


			</view>

		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleObject: {
					'padding-top': '10px',
					'border-bottom-left-radius': '25px',
					'border-bottom-right-radius': '25px',
					'background': '#fff',
					'margin-bottom': "60px"
				},
				data: []
			}
		},
		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 2
				})

			}
		},
		created() {
			// this.$bus.$on('order', msg => {
			// 	console.log("aaaaaaaaaaa4", msg)
			// 	this.$refs.paging.reload(true);
			// });
			this.$bus.$on('order2', msg => {
				console.log("aaaaaaaaaaa4", msg)
				this.$refs.paging.reload(true);
			});
		},
		methods: {
			// 分页的请求
			queryList(pageNo, pageSize) {
				let _this = this
				_this.$api.orderListByUserSid({
					"current": pageNo,
					"size": pageSize,
					"params": {
						"userSid": getApp().globalData.sid
					}
				}).then((resp) => {
					// 添加数据源
					this.$refs.paging.complete(resp.records)
				}).catch(e => {
					// 出错了，点击重试
					_this.$refs.paging.complete(false);
				})
			},
			detail(sid) {
				uni.navigateTo({
					url: '/pages/card/card_record_detail?sid=' + sid
				})
			},
		}
	}
</script>

<style>
	.item {
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item1.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;

	}

	.item2 {
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item2.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.item3 {
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item1.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.item4 {

		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item2.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.item5 {
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item1.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.item6 {
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item2.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}
</style>