<template>
	<view>
		<u-empty v-if="dataList.length == 0" text="暂无数据" mode="list" class="noBox"></u-empty>
		<view class="list-box" v-if="dataList.length > 0">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%;">
				<view v-for="(item,index) in dataList" :key="index" class="wish-item">
					<view class="name">
						{{item.name}}
					</view>
					<view class="flex">
						<view class="addr">
							{{item.addr}}
						</view>
						<view class="addr">
							{{item.location}}
						</view>
					</view>
					<view class="con" @click="goDetail">
						{{item.con}}
					</view>
					<view class="flex between-center">
						<view class="date">
							{{item.date}}
						</view>
						<view class="">
							编辑
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#F6F6F6" />
			</scroll-view>
		</view>
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48"></u-loading>
			<Text style="color: #f6f6f6; margin-top: 10rpx;">加载中...</Text>
		</view>
		
	</view>
</template>

<script>
	import tabbars from '@/components/tabbar/index';
	export default {
		components:{
			tabbars
		},
		data() {
			return {
				mainColor: '',
				active: 0,
				searchKey:"",
				typeList: [],
				dataList:[
					{
					name:"兰蔻小黑瓶肌底液最强一代",
					addr:"武侯区",
					location:"万达广场",
					con:"这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情",
					date:"2021-07-02",
				},
				{
					name:"兰蔻小黑瓶肌底液最强一代",
					addr:"武侯区",
					location:"万达广场",
					con:"这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情",
					date:"2021-07-02",
				},
				{
					name:"兰蔻小黑瓶肌底液最强一代",
					addr:"武侯区",
					location:"万达广场",
					con:"这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情",
					date:"2021-07-02",
				},
				{
					name:"兰蔻小黑瓶肌底液最强一代",
					addr:"武侯区",
					location:"万达广场",
					con:"这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情",
					date:"2021-07-02",
				},
				{
					name:"兰蔻小黑瓶肌底液最强一代",
					addr:"武侯区",
					location:"万达广场",
					con:"这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情介绍，这里显示详情",
					date:"2021-07-02",
				},
				],
				msg:{
					 pageIndex:1,
					 pageSize:10,
					 MetroName:"",
					 CarrierName:"",
					 MetroNum:"",
					 Developers:"",
					 StartOpenTime:"",
					 EndOpenTime:"",
					 ProjectType:0,
					 OrderBy:0
				},
				loading: false,
				pageCount:0,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				contentHeight:0
			};
		},
		onShareTimeline() {//朋友圈
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
			return {
				title: '载体列表',
				query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up,
				imageUrl: "",
			};
		},
		onShareAppMessage(res) {//朋友
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
			return {
				title: '载体列表',
				path: "/pages/kotra/carrier/list?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up,
				imageUrl: "",
			};
		
		},
		onLoad(options) {
			if(options && options.id){
				this.msg.ProjectType = options.id
			}
			let c = this.$uiConfig.is_bang ? 78 : 50;
			this.contentHeight = this.$utils.calcContentHeight(c)+40;
			// this.getTypeList()
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '心愿清单列表',
			});
		},
		methods: {
			// 获取载体列表
			getTypeList(){
				let parms = {
					url: "/api/AppletTrade/GetProjectTypeEnumList",
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						// this.pageCount = res.data.pageCount
						this.typeList.push({
							Id:0,
							Name:"全部"
						})
						this.typeList = this.typeList.concat(res.data)
						if(this.msg.ProjectType ==0){
							
						
						}else{//指定跳入分类
							this.typeList.map((x,i)=>{
								if(x.Id== this.msg.ProjectType){
									this.active = i;
								}
							})
						}
					}
				})
				this.getCarrierPageList()
			},
			// 获取载体分页列表
			getCarrierPageList(){
				let parms = {
					url: "/api/AppletTrade/GetCarrierPageList",
					data:this.msg
				}
				this.request2(parms, (res) => {
					this.loading = false;
					if (res.resultCode == 1) {
						this.dataList = this.dataList.concat(res.data.pageData);
						this.pageCount = res.data.pageCount
						if (this.pageCount == 1) {
							this.status = "nomore";
						}
					}
				})
			},
			changeHandler(i) {
				this.active = i;
				this.msg.ProjectType = this.typeList[i].Id;
				this.msg.pageIndex = 1;
				this.dataList= [];
				this.getCarrierPageList()
			},
			openGood(id,type) {
				uni.navigateTo({
					url: '/pages/kotra/carrier/detail?id=' + id+"&&type="+type,
				});
			},
			searchHandler(val){
				this.msg.CarrierName=val
				this.msg.pageIndex = 1;
				this.dataList= [];
				this.getCarrierPageList()
				
			},
			//触底事件
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
					// this.getCarrierPageList();
				} else {
					this.status = "nomore";
				}
			},
			goDetail(){
				uni.navigateTo({
					 url: '/pages/kotra/wish/richText'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.between-center{
		justify-content: space-between;
		align-items: center;
	}
	.list-box{
		height: 100vh;
		margin: 0rpx; 
		padding-bottom: 90rpx;
		box-sizing: border-box;
		font-family: PingFang SC;
	}
	.wish-item{
		width: 690rpx;
		height: 297rpx;
		margin: 0 auto 34rpx;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(218, 220, 230, 0.85);
		border-radius: 30rpx;
		
		.name{
			font-size: 28rpx;
			font-weight: 800;
			color: #111111;
			margin-bottom: 20rpx;
		}
		.addr{
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			margin-bottom: 20rpx;
		}
		.con{
			font-size: 24rpx;
			color: #999999;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-bottom: 20rpx;
		}
		.date{
			font-size: 22rpx;
			color: #BCBCBC;
		}
		
	}
</style>
