<template>
	<view style="background: #F1F2F8;">
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view style="width: 100%;">
					<view
						style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
						<text>通讯录</text>
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background-color: #FFF;padding-bottom: 30rpx;z-index: 200;">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
				<view class="justify-content-item align-content-item" style="width: 100%;position: relative;">
					<view class="tn-flex tn-flex-col-center"
						style="border-radius: 100rpx;padding: 20rpx;width: 100%;background-color:#F1F2F8;">
						<text style="color: #BABDC7;"
							class="tn-icon-search justify-content-item tn-padding-right-xs tn-text-lg"></text>
						<input v-model="serach_content" class="justify-content-item" placeholder="请会员姓名/手机号进行搜索"
							name="input" placeholder-style="color:#BABDC7"
							style="width: 100%;padding-right: 200rpx;"></input>
					</view>
					<view style="position: absolute;right: 10rpx;top: 10rpx">
						<tn-button backgroundColor="rgba(48,86,211,0.1)" shape="round" padding="20rpx 20rpx"
							width="150rpx" @click="serach_do()">
							<text style="color:#3056D3;font-weight: bold;">搜 索</text>
						</tn-button>
					</view>
				</view>
			</view>
		</view>
		<view :class="isFixed?'fixed':'abc'" style="width: 100%;z-index: 200;"
			:style="{top:isFixed?vuex_custom_bar_height+'px':'auto'}">
			<view class="tn-flex tn-flex-col-center" style="padding: 30rpx;background-color: #ffffff;">
				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
					<text :class="openDqShow?'textThis':'textNo'">地区</text>
					<text style="color: #BABDC7;"
						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
				</view>
				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
					<view :class="openDqShow?'textThis tn-text-ellipsis':'textNo tn-text-ellipsis'"
						style="max-width: 120rpx;display: inline-block;vertical-align: middle;">
						{{hy_name=='全部'?'行业':hy_name}}
					</view>
					<text style="color: #BABDC7;vertical-align: middle;"
						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
				</view>
				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
					<text :class="openDqShow?'textThis':'textNo'">届数</text>
					<text style="color: #BABDC7;"
						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
				</view>
				<view @click="openDqShow = !openDqShow" style="margin-right: 40rpx;">
					<text :class="openDqShow?'textThis':'textNo'">组织架构</text>
					<text style="color: #BABDC7;"
						:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
				</view>
			</view>
			<view v-if="openDqShow">
				<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
					<scroll-view scroll-y="" style="height: 500rpx;">
						<view v-for="(item,index) in industry_list" @click="clickClassifyNav(index)"
							style="padding: 20rpx 30rpx;font-size: 28rpx;">
							<view :class="item.id==leftId?'textThis':'textNo'">{{item.industry_name}}</view>
							<view v-if="index<industry_list.length-1"
								style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view v-if="openDqShow" @click="openDqShow = false" @touchmove.stop.prevent="() => {}"
			style="position: absolute;width: 100%;height:100%;background-color: rgba(0, 0,0, 0.3);z-index: 100;"></view>
		<view style="padding:120rpx 30rpx 100rpx 30rpx;">
			<view style="overflow: hidden;">
				<view v-for="(item,index) in list" :key="index"
					style="border-radius: 20rpx;margin-bottom:30rpx;background-color: #ffffff;">
					<view
						style="border-radius: 20rpx 20rpx 0rpx 0rpx;background: #E6E8F1;text-align: center;font-size: 34rpx;font-weight: bold;height: 110rpx;line-height: 110rpx;">
						{{item.position_name}}
					</view>
					<view>
						<view v-if="item.neirong" v-for="(v,k) in item.neirong"
							@click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
							class="tn-flex tn-flex-center  tn-flex-col-center" style="padding: 35rpx;">
							<view style="width: 100rpx;height: 100rpx">
								<image :src="apiImgUrl+v.photo_image"
									style="width: 100rpx;height: 100rpx;border-radius:50%;">
								</image>
							</view>
							<view style="margin-left: 20rpx;">
								<view>
									<text
										style="font-size: 32rpx;font-weight: bold;vertical-align: middle;">{{v.nikename}}</text>
									<tn-tag size="sm" padding="0px 5px" margin="0 0 0 20rpx" width="auto" shape="radius"
										backgroundColor="#F1F2F8" fontColor="#888888">{{v.position_name}}</tn-tag>
								</view>
								<view class="tn-text-ellipsis-2"
									style="font-size: 28rpx;margin-top: 10rpx;color: #666666;">
									<text>{{v.enterprise_name==null?v.work_unit:v.enterprise_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="showNo" style="margin-top: 30px;text-align: center">暂无数据</view>
			</view>
		</view>
		<tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList"
			@confirm="confirm"></tn-select>
	</view>
</template>

<script>
	import {
		addressList,
		associationIndex,
		newIndustryIndex
	} from '@/util/api.js';
	import store from "@/store";
	export default {
		data() {
			return {
				showNo: false,
				isFixed: false,
				serach_content: '',
				list: [],
				topCurrent: 0,
				tabbarIndex: 0,
				// 分类菜单item的信息
				tabbarItemInfo: [],
				// 当前选中的tabbar序号
				currentTabbarIndex: 0,
				apiImgUrl: this.$store.state.imgUrl,
				industry_list: [],
				leftId: 0,
				selectShow: false,
				HomeTitle: '',
				selectList: [],
				gid: store.state.Gid,
				top: 0,
				openDqShow: false,
				selectTopNumber: 220,
				hy_name: '全部',
			}
		},
		onLoad(d) {
			console.log(d.id);
			if (typeof(d.id) != 'undefined') {
				this.gid = d.id;
			}
			this.getIndustryList();
			this.getAssociationIndex();
		},
		methods: {
			serach_do() {
				this.list = [];
				this.getAddressList();
			},
			getScroll(d) {
				this.top = d.scrollTop;
			},
			onload() {
				this.gid = store.state.Gid;
				this.getIndustryList();
				this.getAssociationIndex();
			},
			confirm(d) {
				var info = d[0];
				this.list = [];
				this.gid = info.value;
				this.getAssociationIndex();
				this.getIndustryList();
			},
			getAssociationIndex() {
				associationIndex()
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							var key = res.data;
							const transformedSelectList = key.map(item => ({
								value: item.id,
								label: item.association_name
							}));
							const foundNumber = transformedSelectList.find((element) => element.value == this.gid);
							this.HomeTitle = foundNumber.label;
							this.selectList = transformedSelectList;
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getIndustryList() {
				newIndustryIndex({
						association_id: this.gid
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							this.industry_list = res.data;
							this.industry_list.push({
								id: -1,
								industry_name: '其他行业'
							});
							this.industry_list.unshift({
								id: 0,
								industry_name: '全部'
							});
							this.leftId = res.data[0].id;
							uni.showLoading({
								title: '加载中...'
							});
							this.getAddressList();
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getAddressList() {
				addressList({
						position_id: 0,
						association_id: this.gid,
						industry_id: this.leftId,
						nikename: this.serach_content
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							this.list = res.data.ret;
						} else {
							this.showNo = true;
						}
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			clickClassifyNav(index) {
				uni.showLoading({
					title: '加载中...'
				});
				this.isFixed = false;
				this.showNo = false;
				this.openDqShow = false;
				this.currentTabbarIndex = index;
				this.leftId = this.industry_list[index].id;
				this.hy_name = this.industry_list[index].industry_name;
				this.list = [];
				this.getAddressList();
			},
			ReachScroll(e) {
				//当距离大于20的时候吸顶
				if (e.detail.scrollTop > 100) {
					this.isFixed = true;
				} else {
					this.isFixed = false;
				}
			},
			tn(url) {
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					})

				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}


	.left-width {
		flex-basis: 28%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {

		/* 搜索栏 start */


		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {}

		&__left-box {}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				height: 90rpx;

				&:first-child {
					border-top-right-radius: 0rpx;
				}

				&:last-child {
					border-bottom-right-radius: 0rpx;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					// font-weight: bold;
					color: #4AA2EF;

					&--prev {
						border-bottom-right-radius: 26rpx;
					}

					&--next {
						border-top-right-radius: 26rpx;
					}
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			margin: 18rpx;

			/* 推荐商品 start */
			&__recomm {
				margin-bottom: 40rpx;

				&__swiper {}
			}

			/* 推荐商品 end */

			/* 子栏目 start */
			&__sub-classify {
				margin-bottom: 20rpx;
				padding-bottom: 40rpx;

				&--title {
					font-weight: bold;
					margin-bottom: 18rpx;

				}

				&__content {

					&__item {
						padding: 20rpx;
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
	}

	.my-page {
		height: calc(100vh - 286rpx);
		padding-bottom: 100rpx;
	}

	.textThis {
		color: #3056D3;
		font-weight: bold;
	}

	.textNo {
		color: #000000;
	}

	.fixed {
		position: fixed;
	}

	.abc {
		position: absolute;
	}
</style>