<template>
	<div style="background-color: #f6f6f6; overflow: hidden" :style="{ height: contentHeight + 'px' }">
		<view class="carrierHeadBgBox"
			:style="{'background': TenantId!=18?`linear-gradient(-3deg, #eff8ff, #c6e6ff)`:''}">
			<headers :title="replace.state=='1'?'项目列表':'写字楼列表'"></headers>
			<template v-if="isauth">
				<view v-if="TenantId==18" style="padding: 5px 10px">
					<u-search placeholder="搜索名称" :focus="false" :show-action="false" :clearabled="true" radius="40"
						v-model="searchKey" @search="searchHandler" @custom="searchHandler" bg-color="#FFF"></u-search>
				</view>
				<view v-else class="carrierSearch" style="padding: 5px 10px;margin-top: 6rpx;">
					<template v-if="iscpswjselectall==1&&replace.state=='1'">
						<view class="carrierSearch-left">
							<uni-section title="" type="line">
								<uni-data-select v-model="msg.MallBaseId" :localdata="ShopTypeList" :clear="false"
									@change="ResetQuery"></uni-data-select>
							</uni-section>
						</view>
						<view class="carrierSearch-auto"></view>
					</template>
					<view class="carrierSearch-right">
						<input v-if="replace.state=='1'" v-model="msg.CarrierName" :placeholder="`搜索项目名称`"
							@input="ResetQuery"></input>
						<input v-else v-model="msg.MetroName" :placeholder="`搜索写字楼名称`" @input="ResetQuery"></input>
					</view>
				</view>
			</template>
			<template v-if="TenantId==18">
				<view style="display: flex; align-items: center">
					<view style="flex: 1; overflow: hidden">
						<u-tabs bg-color="#f6f6f6" :is-scroll="true" name="Name" :list="typeList"
							:active-color="mainColor" :active-item-style="activeItemStyle" :current="active"
							@change="changeHandler" :show-bar="true" :activeFontSize="34" :bold="true" height="100"
							duration="0" :font-size="28"></u-tabs>
					</view>
				</view>
				<view class="carrierScreen" v-if="isauth">
					<view class="statusBox">
						<picker @change="statusChange" :range="kystatus" range-key="name">
							<view class="curStatusName">{{ curStatusName
                }}<u-icon name="arrow-down" color="#ffffff" size="22" style="margin-left: 10rpx"></u-icon></view>
						</picker>
					</view>
					<view class="statusBox" v-if="msg.FirstStoreTest === 1" @click="changeFirstStoreTest(0)">
						首店经济试验场
					</view>
					<view class="statusBox2" v-if="msg.FirstStoreTest === 0" @click="changeFirstStoreTest(1)">
						首店经济试验场
					</view>
				</view>
			</template>
			<view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
				<view style="flex: 1; overflow: hidden;padding-left: 32rpx;" class="carrierTabBox">
					<u-tabs bg-color="none" :is-scroll="true" name="ClassName" :list="typeList"
						:active-color="mainColor" inactive-color="#000000" :active-item-style="activeItemStyleCarr"
						:current="active" @change="changeHandler" :show-bar="false" :activeFontSize="28" :bold="true"
						height="45" duration="0" :font-size="26" gutter="29"></u-tabs>
				</view>
			</view>
		</view>

		<u-empty v-if="dataList&&dataList.length == 0" text="暂无数据" mode="list" class="noBox"></u-empty>
		<view :style="{ height: TenantId==18?'calc(100% - 101px)':'calc(100% - 191px)'}"
			v-if="dataList&&dataList.length > 0">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%; padding-bottom: 0px">
				<template v-if="TenantId==18">
					<view v-for="(item, index) in dataList" :key="index">
						<div class="good_study_one" @click="openGood(item.ID, typeList[item.ProjectType].Name)" :style="{
                borderRadius: '15px',
              }">
							<view class="carriertag" v-if="item.FirstStoreTest === 1">
								<view class="carriertagsub1">首店</view>
								<view class="carriertagsub2">经济试验场</view>
							</view>
							<view class="img-box">
								<view class="img-show">
									<image style="width: 100%;height: 100%;border-radius: 10rpx 10rpx 0 0;"
										mode="aspectFill" :src="item.BannerList[0]" />
								</view>
							</view>
							<div class="good-info">
								<div class="good-name">
									<div class="span-name" style="display: flex">
										<div class="span-name-sub">{{ item.CarrierName }}</div>
										<view v-if="item.ListEnroll.length > 0">
											<image style="height: 100%; border-radius: 10rpx 10rpx 0 0" mode="heightFix"
												:src="item.ListEnroll[0].MedalImage" />
										</view>
									</div>
									<div class="span-type">
										{{ item.ProjectTypeName }}
										<text v-if="item.OpeningStatus == 0" style="
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #f70027;
                        margin-left: 10rpx;
                      ">即将开业</text>
										<text v-if="item.OpeningStatus == 1" style="
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #111111;
                        margin-left: 10rpx;
                      ">已开业</text>
									</div>
								</div>
								<div class="good-price-info">
									<u-icon name="location" color="#999" size="24"></u-icon>
									<span class="price" style="margin-left: 5px">{{
                    item.Address
                  }}</span>
								</div>
							</div>
						</div>
					</view>
				</template>
				<template v-else>
					<carrierElement v-if="dataList&&dataList.length>0" :dataList="dataList"></carrierElement>
				</template>

				<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>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</div>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import tabbars from "@/components/tabbar/index";
	import headers from "@/components/header/header";
	import carrierElement from "./carrierElement";
	export default {
		components: {
			tabbars,
			auth,
			headers,
			carrierElement
		},
		data() {
			return {
				showAuth: false,
				u: {},
				isauth: false,
				mainColor: "",
				active: 0,
				searchKey: "",
				typeList: [],
				dataList: [],
				msg: {
					pageIndex: 1,
					pageSize: 10,
					MetroName: "",
					CarrierName: "",
					MetroNum: "",
					Developers: "",
					StartOpenTime: "",
					EndOpenTime: "",
					ProjectType: 0,
					OrderBy: 0,
					OpeningStatus: -1,
					FirstStoreTest: 0,
					CategoryId: 0,
					BuildingCarrierType: null,
					IsChengDu: -1, //首店类型 1成都 0宜宾
					OrderBy: "",
					MallBaseId: 0,
					TenantId: 0,
				},
				loading: false,
				pageCount: 0,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				contentHeight: 0,
				activeItemStyle: {
					"font-size": "34rpx",
					"font-family": "PingFang SC",
					"font-weight": 800,
					color: "#111111",
				},
				activeItemStyleCarr: {
					"font-size": "23rpx",
					"font-family": "PingFang SC",
					"font-weight": "Bold",
					color: "#017EDF",
					"border": "1rpx solid #017EDF",
					"border-radius": "10rpx",
					"height": "50rpx",
					"line-height": "45rpx",
					"padding": "0 22rpx",
					"background": "#FFF"
				},
				list: [],
				kystatus: [{
						id: -1,
						name: "全部",
					},
					{
						id: 0,
						name: "即将开业",
					},
					{
						id: 1,
						name: "已开业",
					},
				],
				curStatusName: "全部",
				TenantId: null,
				replace: {
					state: "1", //1-载体项目，2-楼宇
				},
				secondary: null,
				ShopTypeList: [
					// {
					//     text: '全部',
					//     value: -1
					//   },  
					// {
					//   text: '成都',
					//   value: 1
					// },
					// {
					//   text: '宜宾',
					//   value: 2
					// },
				],
				GetYBConfig: null,
				iscpswjselectall: 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) {
			this.iscpswjselectall = uni.getStorageSync("basedata").iscpswjselectall
			let uid = uni.getStorageSync("mall_UserInfo")
			this.TenantId = uid.TenantId
			let tempReplace = uni.getStorageSync('replace_page_index')
			if (tempReplace && tempReplace.state) {
				this.replace.state = tempReplace.state;
			}
			this.msg.BuildingCarrierType = this.replace.state == '1' ? 1 : 2

			if (options && options.id) {
				this.msg.ProjectType = options.id;
				this.msg.CategoryId = options.id
			}
			let c = this.$uiConfig.is_bang ? 78 : 50;
			this.contentHeight = this.$utils.calcContentHeight(c) + 40;
			if (options && options.FirstStoreTest) {
				this.msg.FirstStoreTest = parseInt(options.FirstStoreTest);
			}
			// this.u = uni.getStorageSync("mall_UserInfo");
			// if (!this.u) {
			//   this.u = {
			//     nickName: "未登录",
			//     avatarUrl: "",
			//   };
			//     this.showAuth = true;
			// } else {
			this.getTypeList();
			this.isauth = true
			// }
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "项目列表",
			});
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.isauth = true; //成都登录 就显示
				this.getTypeList();
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false
			},
			// 获取类型
			getTypeList() {
				if (this.TenantId == 18) {
					let parms = {
						url: "/api/AppletTrade/GetProjectTypeEnumList",
					};
					this.request2(parms, (res) => {
						if (res.resultCode == 1) {
							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;
									}
								});
							}
						}
					});
				} else {
					this.request2({
						url: "/api/AppletTrade/GetBrandClassList",
						data: {
							BrandCategory: this.replace.state == '1' ? 1 : 2
						}
					}, (res) => {

						if (res.resultCode == 1) {
							this.typeList = res.data;
							this.typeList.unshift({
								ID: 0,
								ClassName: "推荐",
							});
							if (this.msg.CategoryId) {
								//指定跳入分类
								this.typeList.map((x, i) => {
									if (x.ID == this.msg.CategoryId) {
										this.active = i;
									}
								});
							}
						}
					});
					this.request2({
							url: "/api/AppletTrade/GetYBConfig",
							data: {},
						},
						(res) => {
							if (res.resultCode == 1) {
								this.GetYBConfig = res.data
								res.data.mallBaselList.forEach(x => {
									let obj = {
										text: x.Name,
										value: x.MallBaseId
									}
									this.ShopTypeList.push(obj)
								})
							}
						}
					);
				}
				this.getCarrierPageList();
			},
			ResetQuery() {
				this.dataList = []
				this.msg.pageIndex = 1
				this.getCarrierPageList()
			},
			// 获取载体分页列表
			getCarrierPageList() {
				let url = "/api/AppletTrade/GetCarrierPageList"
				if (this.TenantId != 18 && this.replace.state) {
					if (this.replace.state == '1') url = "/api/AppletTrade/GetAllCarrierPageList"
					else url = "/api/AppletTrade/GetBuildingPageList"
				}
				this.request2({
					url: url,
					data: {
						...this.msg
					}
				}, (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;
				if (this.TenantId == 18) this.msg.ProjectType = this.typeList[i].Id;
				else this.msg.CategoryId = this.typeList[i].ID;
				this.ResetQuery()
			},
			openGood(id, type) {
				uni.navigateTo({
					url: "/pages/kotra/carrier/detail?id=" + id + "&&type=" + type,
				});
			},
			searchHandler(val) {
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
				} else {
					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";
				}
			},
			statusChange(e) {
				let index = parseInt(e.detail.value);
				this.msg.OpeningStatus = this.kystatus[index].id;
				this.curStatusName = this.kystatus[index].name;
				this.msg.pageIndex = 1;
				this.dataList = [];
				this.getCarrierPageList();
			},
			changeFirstStoreTest(i) {
				this.msg.FirstStoreTest = i;
				this.msg.pageIndex = 1;
				this.dataList = [];
				this.getCarrierPageList();
			},
		},
	};
</script>

<style>
	.carrierTabBox .u-tab-item {
		background: #FFFFFF;
		margin-right: 29rpx;
		border-radius: 10rpx;
		line-height: 39rpx;
		padding: 13rpx 22rpx;
		border: 1rpx solid #FFFFFF;
	}

	.carrierSearch-right>input::placeholder {
		color: #95AAB9;
	}

	.carrierSearch-right {
		font-size: 27rpx;
		font-weight: 100;
	}

	.carrierSearch-auto {
		width: 2rpx;
		height: 40rpx;
		background: #E1EDF7;
		border-radius: 1rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.carrierSearch-ex {
		width: 152rpx;
	}

	.carrierSearch-left .uni-select__selector {
		/* width: 202rpx !important; */
	}

	.carrierSearch-left .uni-icons {
		color: #017EDF !important;
		margin-left: 24rpx !important;
	}

	.carrierSearch-left .uni-select__input-text {
		font-size: 27rpx;
		font-weight: bold;
	}

	.carrierSearch-left .uni-select {
		border: 0;
		padding: 0;
		padding-left: 0;
	}

	.carrierSearch-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-family: PingFang SC;
	}

	.carrierSearch {
		height: 76rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 101;
		margin: 0 32rpx;
		background: #EEF7FF;
		border-radius: 18rpx;
		position: relative;
	}

	.good_study_one {
		margin: 12px;
		position: relative;
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.good_study_one .tips {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.good_study_one .guding {
		position: relative;
	}

	.good_study_one .img-box {
		width: 100%;
		height: 0;
		padding-top: 49%;
		position: relative;
		overflow: hidden;
	}

	.good_study_one .img-box .img-show {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.good_study_one .good-info {
		padding: 12px;
		background-color: #fff;
	}

	.good_study_one .good-info .good-name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 5px;
	}

	.good_study_one .good-info .good-name .span-name {
		width: 350rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #111;
	}

	.span-name-sub {
		max-width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.good_study_one .good-info .good-name .span-type {
		font-weight: 500;
		color: #999999;
		font-size: 24rpx;
		margin-left: 10px;
	}

	.good_study_one .good-info .good-price-info {
		display: flex;
	}

	.good_study_one .good-info .good-price-info .price {
		color: #999999;
		font-size: 24rpx;
		flex: 1;
	}

	.good_study_one .good-info .good-price-info .buy {
		width: 24px;
		text-align: right;
	}

	.carrierScreen {
		height: 50rpx;
		margin: 20rpx 0;
		display: flex;
		padding: 0 30rpx;
	}

	.statusBox {
		height: 46rpx;
		background: #1f1f1f;
		border-radius: 23rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-right: 30rpx;
		padding: 0 18rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.curStatusName {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		display: flex;
	}

	.statusBox2 {
		height: 46rpx;
		background: #eaeaea;
		border-radius: 23rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		padding: 0 18rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.carriertag {
		width: 170rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 0px 0px 20rpx 0px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.carriertagsub1 {
		width: 48rpx;
		height: 22rpx;
		background: #1f1f1f;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.carriertagsub2 {
		width: 100rpx;
		height: 22rpx;
		background: #d0aa7b;
		border-radius: 0px 4rpx 4rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
</style>