<template>
	<view class="page">
		<u-navbar title="旅行社" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar" :custom-back="btnfh">
		</u-navbar>
        
		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="search-bar" style="padding-left: 30rpx;">
				<u-icon name="search" size="28" color="#999"></u-icon>
				<input class="search-input" placeholder="搜索旅行社或景点" v-model="searchKeyword" />
				<view class="search-btn" @click="handleSearch">搜索</view>
			</view>
		</view>

		<!-- 导航标签 -->
		<view class="nav-tabs">
			<view class="tab-item" :class="{ active: activeTab === 'agency' }" @click="switchTab('agency')">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uAr85lTokPwVxBYsK7Kn" mode="aspectFill"></image>
				<text class="tab-text">旅行社</text>
			</view>
			<view	 class="tab-item" :class="{ active: activeTab === 'guide' }" @click="switchTab('guide')">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uOR922H7EqfSGKV4MgLL" mode="aspectFill"></image>
				<text class="tab-text">导游</text>
			</view>
			<view class="filter-dropdown" @click="showFilter = !showFilter">
				<text class="filter-text">{{ selectedRegion }}</text>
				<image src="https://api.ccttiot.com/smartmeter/img/static/u1NCxnrH7pK4HFbT3Y48" mode=""></image>
				<!-- 筛选下拉菜单 -->
				<view class="filter-menu" v-if="showFilter" @click.stop>
					<view class="filter-item" @click="selectRegion(1)">全部区域</view>
					<view class="filter-item" @click="selectRegion(item)" v-for="(item,index) in quyulist" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 遮罩层，点击关闭下拉菜单 -->
		<view class="mask" v-if="showFilter" @click="showFilter = false"></view>

		<!-- 旅行社列表 -->
		<scroll-view v-if="activeTab == 'agency'" class="agency-list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="agency-item" v-for="(agency, index) in agencyList" :key="index" @click="goToDetail(agency)">
				<image class="agency-image" :src="agency.picture" mode="aspectFill"></image>
				<view class="agency-info">
					<view class="agency-title">{{ agency.name }}</view>
					<view class="agency-desc">{{ agency.description == null ? '暂无简介' : agency.description }}</view>
					<u-rate :count="count" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="agency.averageRating"></u-rate>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				当前没有更多数据咯...
			</view>
		</scroll-view>
		<!-- 导游列表 -->
		<scroll-view v-if="activeTab == 'guide'" class="agency-list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="agency-item" style="padding: 20rpx 0;" v-for="(agency, index) in agencyList" :key="index" @click="btnDetail(agency)">
				<image class="agency-image" :src="agency.photo" mode="aspectFill"></image>
				<view class="agency-info">
					<view class="agency-title">{{ agency.name }}</view>
					<view class="agency-desc">{{ agency.description == null ? '暂无简介' : agency.description }}</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				当前没有更多数据咯...
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				count:5,
				searchKeyword: '',
				activeTab: 'agency',
				showFilter: false,
				selectedRegion: '全部区域',
				agencyList: [],
				isRefreshing:false,
				pageNum:1,
				areaIds:'',
				total:0,
				agencyId:'',
				quyulist:[],
				fanhui:''
			}
		},
		onLoad(option) {
           this.getlist()
		   this.getquyu()
		   if(option && option.fanhui){
			   this.fanhui = option.fanhui
		   }
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/page_fenbao/daoyou/index?fanhui=1'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/page_fenbao/daoyou/index?fanhui=1'
			}
		},
		methods: {
			btnfh(){
				if(this.fanhui == 1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 请求旅行社
			getlist(){
				this.$u.get(`/app/travelAgency/list?pageNum=${this.pageNum}&pageSize=20&areaIds=${this.areaIds}&keyword=${this.searchKeyword}`).then((res) => {
					if(res.code == 200){
						this.total = res.total
						 if(this.pageNum == 1){
							 this.pageNum++
							 this.agencyList = res.rows
						 }else{
							 this.pageNum++
							 this.agencyList = this.agencyList.concat(res.rows) 
						 }
					}
				})
			},
			// 请求导游
			getdylist(){
				this.$u.get(`/app/tourGuide/list?pageNum=${this.pageNum}&pageSize=20&agencyId=${this.agencyId}&areaIds=${this.areaIds}&keyword=${this.searchKeyword}`).then((res) => {
					if(res.code == 200){
						this.total = res.total
						 if(this.pageNum == 1){
							 this.pageNum++
							 this.agencyList = res.rows
						 }else{
							 this.pageNum++
							 this.agencyList = this.agencyList.concat(res.rows) 
						 }
					}
				})
			},
			// 上拉加载更多
			handqixing() {
				if(this.agencyList.length < this.total){
					if(this.activeTab == 'agency'){
						this.getlist()
					}else{
						this.getdylist()
					}
				}
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.isRefreshing = false
					this.pageNum = 1
					if(this.activeTab == 'agency'){
						this.getlist()
					}else{
						this.getdylist()
					}
				}, 1000)
			},
			// 点击搜索旅行社或导游
			handleSearch() {
				this.pageNum = 1
				if(this.activeTab == 'agency'){
					this.getlist() 
				}else{
					this.getdylist() 
				}
			},
			// 点击切换tab
			switchTab(tab) {
				this.activeTab = tab;
				this.pageNum = 1
				console.log(tab);
				if(tab == 'agency'){
					this.getlist() //请求旅行社
				}else{
					this.getdylist() //请求导游
				}
			},
			// 选择下拉菜单
			selectRegion(region) {
				if(region == 1){
					this.selectedRegion = '全部区域'
					this.areaIds = ''
				}else{
					this.selectedRegion = region.name
					this.areaIds = region.id
				}
				this.showFilter = false
				this.pageNum = 1
				if(this.activeTab == 'agency'){
					this.getlist() //请求旅行社
				}else{
					this.getdylist()
				}
			},
			// 点击旅行社跳转
			goToDetail(agency) {
				uni.navigateTo({
					url:'/page_fenbao/daoyou/lvxingshe?id=' + agency.id
				})
			},
			// 点击导游跳转
			btnDetail(agency){
				uni.navigateTo({
					url:'/page_fenbao/daoyou/daoyouxq?id=' + agency.id
				})
			},
			// 请求区域
			getquyu(){
				this.$u.get(`/app/scenicArea/simpleInfo/list`).then((res) => {
					if(res.code == 200){
						this.quyulist = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.page {
		background: #fff;
		min-height: 100vh;
	}

	// 搜索栏样式
	.search-container {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #F5F5F5;
		border-radius: 25rpx;
		height: 68rpx;
		padding: 0 8rpx;
		// margin-bottom: 20rpx;
	}

	.search-input {
		flex: 1;
		margin: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		color: #fff;
		// padding: 15rpx 30rpx;
		width: 154rpx;
		height: 56rpx;
		background: #ED8F27;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 56rpx;
	}

	// 导航标签样式
	.nav-tabs {
		display: flex;
		align-items: center;
		padding: 0 30rpx 20rpx;
		background: #fff;
		position: relative;
	}

	.tab-item {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
		padding: 20rpx 0;
		position: relative;
        image{
			width: 44rpx;
			height: 44rpx;
		}
		&.active {
			.tab-text {
				color: #262B37;
				font-weight: 600;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 4rpx;
				background: #ED8F27;
				border-radius: 2rpx;
			}
		}

		&:not(.active) {
			.tab-text {
				color: #999;
			}
		}
	}

	.tab-text {
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.filter-dropdown {
		position: absolute;
		right: 30rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		image{
			width: 52rpx;
			height: 30rpx;
		}
	}

	.filter-text {
		font-size: 28rpx;
		color: #262B37;
	}

	// 筛选菜单样式
	.filter-menu {
		position: absolute;
		top: 100%;
		right: 0;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 1001;
		min-width: 200rpx;
		margin-top: 10rpx;
		max-height: 600rpx;
		overflow: scroll;
	}

	// 遮罩层样式
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: transparent;
		z-index: 1000;
	}

	.filter-item {
		padding: 25rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background: #F5F5F5;
		}
	}

	// 旅行社列表样式
	.agency-list {
		// padding: 0 30rpx;
		// width: 680rpx;
		margin: auto;
		height: 76vh;
		overflow: scroll;
	}

	.agency-item {
		display: flex;
		margin: auto;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		width: 680rpx;
	}

	.agency-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 15rpx;
	}

	.agency-info {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.agency-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #262B37;
		margin-bottom: 15rpx;
	}

	.agency-desc {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.agency-rating {
		display: flex;
		align-items: center;
	}
</style>