<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<view class="search">
			<common-search placeholder="请输入组织名称" @change="changeValue"></common-search>
		</view>

		<!-- 组织区域 -->
		<view class="org">
			<!-- 分段器区域 -->
			<common-controlTag :tagList="tagList" rangekey="categoryName" :currentIndex="currentIndex" @change="changeIndex"></common-controlTag>

			<!-- 列表区域 -->
			<view class="org_list">
				<!-- 每一个组织区域 -->
				<view class="org_item" v-for="item in listData" :key="item.id" @click="handleClickItem(item)">
					<view class="item_top">
						<view class="top_name">{{ item.name || '未知' }}</view>
						<view>联系人：{{ item.contacts || '未知' }}</view>
						<view>电话：{{ item.phone || '未知' }}</view>
						<view class="top_email">邮箱：{{ item.email || '未知' }}</view>
					</view>
					<view v-if="item.isJoin == 1" class="item_bottom off">已加入</view>
					<view v-if="item.isJoin == 2" class="item_bottom" @click.stop="handleJoin_debounce(item)">立即加入</view>
					<view v-if="item.isJoin == 3" class="item_bottom off">已申请</view>
				</view>
			</view>
		</view>
		<!-- 无数据时展示的页面 -->
		<noData v-if="!listData.length"></noData>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getClubByCategoryId, getJoinClubApply } from '@/api/index.js'
import debounce from 'lodash/debounce'

// 分段器数组
const tagList = ref([])
// 分段器当前索引
const currentIndex = ref()
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 搜索框绑定值
const keyword = ref('')
// 组织列表
const listData = ref([])

onLoad((options) => {
	// console.log(options)
	if (options.list) {
		tagList.value = JSON.parse(decodeURIComponent(options.list))
	}
	if (options.index) {
		currentIndex.value = options.index
	}
	// 获取组织分页数据
	getData()
})

// 页面触底触发的回调
onReachBottom(() => {
	if (total.value > listData.value.length) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了~~',
			icon: 'none'
		})
	}
})

// 获取组织分页数据
const getData = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		categoryId: tagList.value[currentIndex.value].categoryId,
		keyword: keyword.value
	}
	const res = await getClubByCategoryId(data)
	// console.log(res)
	listData.value = [...listData.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 点击搜索按钮自定义事件
const changeValue = (e) => {
	// console.log(e)
	keyword.value = e
	currentPage.value = 1
	listData.value = []
	getData()
}

// 分段器切换回调
const changeIndex = (e) => {
	// console.log(e)
	currentIndex.value = e
	currentPage.value = 1
	listData.value = []
	getData()
}

const handleJoin = (item) => {
	// console.log(item)
	uni.showModal({
		title: '提示',
		content: `确定申请加入${item.name}吗？`,
		success: (res) => {
			if (res.confirm) {
				handleJoinReq(item)
			}
		}
	})
}
// 点击立即加入按钮回调
const handleJoin_debounce = debounce(handleJoin, 200)

// 申请加入组织请求
const handleJoinReq = async (item) => {
	let data = {
		id: item.id
	}
	const res = await getJoinClubApply(data)
	console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'none'
		})
		setTimeout(() => {
			getData()
		}, 1500)
	}
}

// 点击每一个组织回调
const handleClickItem = (item) => {
	// console.log(item)
	let info = encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url: `/pages/org_detail/org_detail?info=${info}`
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.search {
		padding-top: 12rpx;
	}

	.org {
		margin-top: 25rpx;

		.org_list {
			margin-top: 15rpx;

			.org_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx;
				margin-bottom: 20rpx;
				width: 714rpx;
				height: 267rpx;
				border-radius: 28rpx;
				box-shadow: 0 0 35rpx #d3d3d3;

				.item_top {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-right: 20rpx;
					height: 100%;
					font-size: 28rpx;
					color: #666666;
					overflow: hidden;

					.top_name {
						font-size: 32rpx;
						font-weight: bold;
						color: #000;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.top_email {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.item_bottom {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 151rpx;
					height: 70rpx;
					font-size: 28rpx;
					color: #fff;
					border-radius: 8rpx;
					background-color: #007aff;
				}

				.off {
					color: #a6a6a6;
					background-color: #e5e5e5;
				}
			}
		}
	}
}
</style>
