<template>
	<view class="p-bind-inedx g_w_all g_kuaishou" style="background-color:#ededed;min-height: 100vh;">
		<view class="m-top">
			<view class="m-search g_p_10 g_pb_0 g_position_rela g_p_12" style="background-color:#ededed;padding: 10px;">
				<u-search height="80" v-model="keyword" placeholder="搜索我的代理" bg-color="#fff"
				  :show-action="false" @btnSearch="getSearch" @change="getSearch" 
					@clear="getSearch" @custom="getSearch" @search="getSearch" search-icon-color="#999999" :maxlength="20"
					style="font-size: 14px;"
					></u-search>
			</view>
		</view>
    <view class="">
			<view class="g_p_16 g_bg_f g_radius_8 g_flex_row_between flex_center g_ml_10 g_mr_10" hover-class="thover" 
            @click="goPaga('/root/bind/applyList')" style="padding: 12px 16px;">
				<view class="g_flex_row_start flex_center" style="width: 100%">
					<img src="https://bocai-cms.oss-cn-beijing.aliyuncs.com/bf586cad-c6f0-4417-86c8-6cf55310ace7_123456.svg" class="g_w_48 g_h_48 g_radius_50 g_flex_none" alt="" />
					<view class="g_flex_column_between g_ml_10 g_flex_1 g_mr_10">
						<view class="g_fs_17 g_c_0 g_mb_6">新的代理</view>
						<view class="g_c_9" style="font-size: 14px;">您有新代理加入申请待审批</view>
					</view>
					<div v-if="waitNum_downs > 0" class="g_flex_column_center g_flex_none">
						<div style="background-color: #ff4d4f; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;">
							{{ waitNum_downs }}
						</div>
					</div>
				</view>
			</view>
		</view>
		<div style="height: 10px;"></div>
		<!-- 搜索栏 -->
		<view class="m-panel">
			<!-- 根据不同搜索栏显示不同内容 -->
			<view class="center">
				<!-- 列表区 -->
				<view class="m-list">
					<view class="link" :class="isShow ? '' : ''">
						<rh-loading :loading="loading" v-if="loading && speed == -1" />
						<view v-if="!loading && speed == 0" class="g_pt_130">
							<rh-empty :text="isLogin ? '暂无数据' : '请登录'" />
						</view>
						<view v-if="speed > 0 && tabFansInfo.active == 1">
							<view class="item g_flex_row_between g_pl_16 g_pr_16 g_bg_f" 
							hover-class="thover" v-for="(item, index) in query.list" :key="index" @click="goPage(item)" 
							 :style="{ 'border-bottom': index == query.list.length - 1 ? '0.5rpx solid #eee' : '0.5rpx solid #eee' }">
								<view class="g_flex_none g_flex_row_start">
									<view class="g_flex_column_center g_pr_16 g_flex_none" style="position: relative">
										<rh-image :url="item.logo" size="96" radius="50" v-if="item.logo" />
										<rh-image size="96" radius="50" v-if="!item.logo" />

										<!-- <view v-if="item.supplierAccount == 1" style="position: absolute; left: 0; width: 48px; height: 48px" class="g_flex_row_end">
											<view class="g_flex_c" style="position: absolute; overflow: hidden; width: 20px; height: 10px; right: -2px; top: 0px">
												<image :src="cdnBaseImg + 'fadanhao.svg'" mode="widthFix" style="width: 16px; height: 13px"></image>
											</view>
										</view> -->
									</view>
								</view>

								<view class="g_flex_1 g_h_all g_flex_column_center g_h_60 _right">
									<view class="g_flex_row_between">
										<view class="g_flex_column_center g_flex_1">
											<view class="g_flex_row_start_none">
												<view class="g_flex_column_center">
													<div class="g_fs_17 g_c_0 g_flex_none g_ell_1" style="max-width:calc(100vw - 158px);">
														{{ item.fullName || item.agencyName }} 
													</div>
												</view>
												<!-- <view class="g_ml_6 g_text_c g_flex_1">
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #f2f7ff; color: #1677ff" v-if="item.teamType == 2">团队</view>
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #fff5f5; color: #ff4d4f" v-if="item.teamType == 1">个人</view>
												</view> -->
											</view>
											<!-- <view class="g_ell_1 g_fs_14 g_c_9 g_mt_4">{{ item.remark ? item.remark : "-" }}</view> -->
										</view>

										<view class="g_flex_column_center g_mb_12" v-if="tabInfo.active == 1 && false">
											<view v-if="item.supplierAccount == 1 && item.recordStatus == 1">
												<view class="g_radius_14 g_h_28 g_fs_14 g_pr_8 g_pl_8 g_flex_row_center flex_center" :style="{color: themeColor, border: '1px solid ' + themeColor}" hover-stop-propagation hover-class="thover" @click.stop="goApplyForm(item, index)">
													<i class="iconfont icon-tianjia g_fsi_12 g_mr_2"></i>
													关注
												</view>
											</view>
											<view v-if="item.supplierAccount == 1 && item.recordStatus == 2">
												<view @click.stop="goMain(item)" hover-class="thover" hover-stop-propagation class="g_radius_14 g_h_28 g_border_c g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
													<i class="iconfont icon-a-bianzu11beifen2 g_fsi_12 g_mr_2"></i>
													互相关注
												</view>
											</view>
											<view v-if="item.supplierAccount == 1 && item.recordStatus == 5">
												<view hover-stop-propagation hover-class="thover" class="g_radius_14 g_h_28 g_border_c g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
													<i class="iconfont icon-shenqingzhong g_fsi_12 g_mr_2"></i>
													申请中
												</view>
											</view>
											<view v-if="item.recordStatus === 0">
												<view hover-stop-propagation hover-class="thover" class="g_radius_14 g_h_28 g_border_c g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
													<i class="iconfont icon-shenqingzhong g_fsi_12 g_mr_4"></i>
													邀请中
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="isShow && speed > 0 && tabFansInfo.active == 1" style="padding-bottom: 100rpx; background-color: #ededed">
					<g-panel-hr :str="all + '个粉丝'" v-show="all" />
				</view>
				<!-- #ifdef H5 -->
				<view style="height: 50px"></view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			agencyInfo: {}, // 登陆者的代理信息
      isJm:uni.getStorageSync("apply-userinfo") && uni.getStorageSync("apply-userinfo").agencyId && uni.getStorageSync("apply-userinfo").agencyId == '114827',
			themeColor: getApp().globalData.themeColor,
			themeBackgroundColor: getApp().globalData.themeBackgroundColor,
			cdnBaseImg: this.G.store().cdnBaseImg,
			isLogin: null,
			isShow: false,
			loading: true,
			speed: -1,
			query: {
				page: 1,
				size: 50,
				list: [],
				isFinish: -1,
			},
			keyword: "",
			fkey: "",
			searchText: "",
			scrollTop: 0,
			domHeight: 0,
			waitNum_downs: 0,
			waitNum_ups: 0,

			cardTab: [
				{
					icon: "t-icon-xunzhaoshangyou",
					title: "搜索发单号",
					remark: "关注更多单子的更新",
				},
				{
					icon: "t-icon-fazhanxiayou",
					title: "发展代理",
					remark: "让更多代理关注我",
				},
			],
			tabInfo: {
				list: [
					{
						name: "关注(0)",
						num: 0,
						tip: 0,
						cate_count: 0,
					},
					{
						name: "粉丝(0)",
						num: 0,
						tip: 1,
						cate_count: 0,
					},
				],
				active: 0,
			},
			tabFansInfo: {
				list: [
					{
						name: "新的粉丝",
					},
					{
						name: "全部粉丝",
					},
				],
				active: 1,
			},
			all: 0,

			applyList: [],
			stickyText: "近三天",
		};
	},
	onLoad(options) {
		let that = this;
		that.tabFansInfo.active = 1;
		that.tabInfo.active = 1;
		const query = uni.createSelectorQuery().in(this);
		query
			.select(".m-top")
			.boundingClientRect((data) => {
				that.domHeight = data.height + 34;
			})
			.exec();
	},
	onShow() {
		let that = this;
		that.themeColor = getApp().globalData.themeColor;
		that.isLogin = uni.getStorageSync("apply-token");
		that.query.page = 1;
		 if (uni.getStorageSync("apply-token")) {
			this.G.checkToken().then(() => {
				that.agencyInfo = uni.getStorageSync("agencyInfo");
			});
		}
		that.getWaitNum();
		that.getNum();
		if (this.tabFansInfo.active == 1) {
			this.getList();
		} else {
			this.getapplyList();
		}
	},
	onReachBottom() {
		let that = this;
		if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
			that.query.page++;
			if (this.tabFansInfo.active == 1) {
				this.getList("concat");
			} else {
				this.getapplyList("concat");
			}
		}
	},
	onPageScroll(e) {
		console.log(e.scrollTop);
		this.scrollTop = e.scrollTop;
	},
	methods: {
		goPaga($path) {
			this.G.isLogin();
			if (this.G.isLogin()) {
				uni.navigateTo({
					url: $path,
				});
			}
		},
		handleUpdateFensTab(e) {
			this.tabFansInfo.active = e;
			this.keyword = "";
			this.loading = true;
			this.speed = -1;
			this.query.page = 1;
			if (this.tabFansInfo.active == 1) {
				this.getList();
			} else {
				this.getapplyList();
			}
		},
		getWaitNum() {
			let that = this;
			that.G.Get(
				that.api.bind_getWaitNum + "/2",
				{
					type: 2,
				},
				(res) => {
					that.waitNum_downs = res.total;
					that.waitNum_ups = res.unread;
					console.log("获取指定数量：", res);
					that.$forceUpdate();
				}
			);
		},
		getNum() {
			let that = this;
			that.G.Post(
				that.api.bind_getListNum,
				{
					keys: that.keyword,
				},
				(res) => {
					that.tabInfo.list[0].name = "关注(" + res.ups + ")";
					that.tabInfo.list[1].name = "粉丝(" + res.downs + ")";
				}
			);
		},
		getList($type = "init") {
			let that = this;
			that.isShow = false;
			that.G.Post(
				that.api.bind_list,
				{
					pageNum: that.query.page,
					pageSize: that.query.size,
					keys: that.keyword,
					platform: "pc",
					type: Number(that.tabInfo.active) + 1,
					formdata: true,
				},
				(res) => {
					that.isShow = true;
					that.all = res.recordCount;
					that.speed = res.recordCount;
					if (that.speed == 0) {
						that.loading = false;
					} else {
						that.loading = true;
					}
					that.query.isFinish = res.recordList.length;
					if ($type == "init") {
						that.query.list = [];
						that.query.list = res.recordList;
					} else {
						that.query.list = that.query.list.concat(res.recordList);
					}
				}
			);
		},
		getSearch(e) {
			let that = this;
			this.keyword = e ? e : "";
			this.G.isLogin();
			if (this.G.isLogin()) {
				this.speed = -1;
				this.query.page = 1;
				if (this.tabFansInfo.active == 1) {
					this.getList();
				} else {
					this.getapplyList();
				}
			}
		},

		goMain($item) {
			let that = this;
			this.G.isLogin();
			if (this.G.isLogin()) {
				// if($item.supplierAccount == 1){
				let params = {
					id: $item.agencyId,
					type: Number(that.tabInfo.active) + 1,
					bindid: $item.id,
					isShowMore: false,
					isShowJob: false,
				};

				if (that.tabInfo.active == 0) {
					// 关注
					params.isShowMore = true;
					params.isShowJob = true;
				} else {
					// 粉丝
					if ($item.recordStatus == 1) {
						// 已关注
						params.isShowMore = true;
						params.isShowJob = false;
					} else {
						// 相互关注
						params.isShowMore = true;
						params.isShowJob = true;
					}
				}

				uni.navigateTo({
					url: "/root/detail/user?" + that.G.objToStr(params),
				});
				// }else{
				// 	// 直接前往操作页
				// 	uni.navigateTo({
				// 		url:'/root/bind/more?delta=1&id=' + $item.agencyId + '&himSee=' + $item.himSee + '&lookHim=' + $item.lookHim + '&type=2&hid=' + $item.id
				// 	})
				// }
			}
		},
		goApply() {
			let that = this,
				str = "";
			this.G.isLogin();
			if (this.G.isLogin()) {
				uni.navigateTo({
					url: "/root/bind/applyList?active=2",
				});
			}
		},
		goSearch($item, $index) {
			let that = this;
			that.G.isLogin();
			if (that.G.isLogin()) {
				uni.navigateTo({
					url: "/root/bind/search?active=" + $index,
				});
			}
		},
		goApplyForm($item, $index) {
			let that = this;
			if ($item.recordStatus == 5 || $item.recordStatus == 6) {
			} else {
				// uni.navigateTo({
				// 	url: '/root/bind/applyForm?code=' + $item.agencyId + '&form=1'
				// })
				that.G.handleConfirm({
					content: "关注发单号后，您可以查看该账号职位的更新，确定要关注吗？",
					success: (res) => {
						if (res.confirm) {
							that.G.Get(
								that.api.bind_subscribeSubmit + "/" + $item.agencyId,
								{
									agencyId: $item.agencyId,
									source: 4,
									remark: "",
								},
								(res) => {
									// 请求后
									uni.showToast({
										title: "提交成功",
									});
									setTimeout(() => {
										that.getList();
									}, 500);
								}
							);
						}
					},
				});
			}
		},

		getapplyList() {
			let that = this;
			that.G.Get(
				that.api.bind_recordList + "/" + 2,
				{
					pageNum: 1,
					pageSize: 50,
					type: 2,
					keys: that.keyword,
				},
				(res) => {
					if (res.length == 0) {
						that.loading = false;
					} else {
						that.loading = true;
					}
					console.log("申请列表：", res);
					that.speed = res.length;
					if (that.speed == 0) {
						that.applyList = [];
					} else {
						const now = new Date().getTime();
						const threeDaysAgo = now - 3 * 24 * 60 * 60 * 1000;
						const resultArray = res.reduce((acc, item) => {
							const timeCategory = item.createTime >= threeDaysAgo ? "近三天" : "三天前";
							const existingCategory = acc.find((category) => category.time === timeCategory);
							if (existingCategory) {
								existingCategory.children.push(item);
							} else {
								acc.push({
									time: item.createTime >= threeDaysAgo ? "近三天" : "三天前",
									children: [item],
								});
							}
							return acc;
						}, []);
						console.log("申请列表：", resultArray);
						resultArray.forEach((item, index) => {
							item.isShowTime = true;
						});
						that.applyList = resultArray;
						that.$forceUpdate();
					}
				},
				() => {
					that.loading = false;
				}
			);
		},
		goPage($itm, $item) {
			let that = this;
			console.log("当前行点击事件：", $itm);
			// if ($itm.recordStatus == 1) {
				// 等待通过
				uni.navigateTo({
					url: "/root/bind/viewfs?id=" + $itm.agencyId + "&type=2&status=" + $itm.recordStatus + '&useform=1',
				});
			// } else {
			// 	let params = {
			// 		id: $itm.agencyId,
			// 		type: 2,
			// 		isShowMore: false,
			// 		isShowJob: false,
			// 	};

			// 	if (that.type == 1) {
			// 		//
			// 		if ($itm.recordStatus == 2) {
			// 			// 已关注
			// 			params.isShowMore = true;
			// 			params.isShowJob = true;
			// 		}
			// 	} else {
			// 		// 粉丝
			// 		if ($itm.recordStatus == 2) {
			// 			// 已通过
			// 			// if(){// 是我的发单号
			// 			// 	params.isShowMore = true;
			// 			// 	params.isShowJob = true;
			// 			// }else{// 不是我的发单号
			// 			params.isShowMore = true;
			// 			params.isShowJob = false;
			// 			// }
			// 		}
			// 	}

			// 	uni.navigateTo({
			// 		url: "/root/detail/user?" + that.G.objToStr(params),
			// 	});
			// }
		},

		quickSuccess($itm, $inx) {
			let that = this;
			that.G.Get(
				that.api.bind_recordSubmit + "/" + $itm.id,
				{
					id: $itm.id,
				},
				(res) => {
					$itm.recordStatus = 2;
					that.$forceUpdate();
				}
			);
		},
	},
};
</script>

<style lang="scss">
.p-bind-inedx {
	.m-card {
		padding-left: 10px;
		padding-right: 10px;

		.item {
			width: calc(50% - 5px);
		}
	}

	.showdoc {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 6px rgba(0, 0, 0, 0.02);
	}

	.suffix {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		border-top-right-radius: 110rpx;
		border-bottom-right-radius: 110rpx;
	}

	.tab-fixed {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 44px;
		background-color: #fff;
		z-index: 1;
	}

	.m-search {
		// .u-icon-wrap{
		// 	position: absolute;
		// 	left: 190rpx;
		// }
	}

	.m-search-active {
		.u-icon-wrap {
			position: inherit;
			left: 0rpx;
		}
	}
	.link{
		width: calc(100% - 20px);
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;
	}
}

.thover, .g_bg_f.thover, .item.thover {
	opacity: 0.8;
	background-color: #f5f5f5 !important;
}
</style>
