<template>
	<view :class="{'h5-pc-page': isH5}">
		<view class="popupAll">
			<view class="tabList dispalyF" v-if="!allCheckShow">
				<scroll-view scroll-x style="white-space: nowrap;width: calc(100% - 144rpx);margin-left: 32rpx">
					<view class="rightView">
						<view
							@click="getTopActive(newCkeckData[0], index, item)"
							:class="
								index == newCkeckData[0].activeIndex
									? 'popupItem-active tabItem rightView'
									: 'popupItem tabItem rightView'
							"
							v-for="(item, index) in newCkeckData[0] && newCkeckData[0].data"
							:key="index"
							style="display: inline-block; margin-right: 15rpx;margin-bottom: 0"
						>
							{{ item.dictLabel }}
						</view>
					</view>
				</scroll-view>
				<view class="tabrightBtnOut" @click="allCheckShowChange">
					<image
						class="tabrightBtn"
						src="https://rc.jinan.gov.cn/qcwjyH5/static/images/getMoreCheck.png"
						mode=""
					></image>
				</view>
			</view>
			<view class="popupListAll" v-if="allCheckShow">
				<view
					class="popupList"
					v-for="(item, index) in newCkeckData"
					:key="index"
					v-show="!item.hidden"
				>
					<view class="tabTitle">
						{{ item.name }}
					</view>
					<view
						class="dispalyF filter-options-container"
						:style="[
							{
								position: 'sticky',
								top: '-2rpx',
								zIndex: 1,
								flexWrap: 'wrap',
							},
						]"
					>
						<template v-for="(itm, idx) in item.data">
							<view :key="idx" v-if="!itm.mode"
								@click="getActive(itm, index, idx)"
								:class="
									idx == item.activeIndex
									? 'popupItem-active'
									: 'popupItem'
									"
							>
								{{ itm.dictLabel }}
							</view>
						</template>
					</view>
				</view>
				<view class="bottom-search">
					<view class="search-left" @click="clearAll">
						清空
					</view>
					<view class="search-right" @click="search">查询</view>
				</view>
				<view class="popupPic" @click="close">
					<uni-icons type="arrow-up" color="#c0c4cc" :size="isH5 ? 20 : 16"></uni-icons>
				</view>
			</view>

			<view class="gropo" v-if="allCheckShow"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: "popupList",
	props: {
		checkData: {
			type: Array,
			default: [],
		},
	},
	data() {
		return {
			newCkeckData: this.checkData,
			allCheckShow: false,
			params: "",
			fijItem: "",
			outData: [],
			nickName: '',
			isH5: false
		};
	},
	watch: {
		checkData(newVal) {
			this.newCkeckData = newVal;
		},
		allCheckShow(newVal) {
			this.$parent.zctopShow = newVal;
		},
	},
	mounted() {
    // #ifdef H5
    this.isH5 = true;
    // #endif
    const rawUserInfo = uni.getStorageSync("userInfo");
    if (rawUserInfo) {
      try {
        let userInfo = typeof rawUserInfo === 'string' ? JSON.parse(rawUserInfo) : rawUserInfo;
        this.nickName = userInfo.userName || userInfo.name || "";
      } catch (e) {
        console.error("解析用户信息失败", e);
      }
    }
	},
	methods: {
		allCheckShowChange() {
			this.allCheckShow = !this.allCheckShow;
		},
		search() {
			this.allCheckShow = false;
			let param = [];
			this.$emit('popupSearch', this.newCkeckData)
		},
		clearAll(){
			this.allCheckShow = false;
			this.newCkeckData.forEach((item, index) => {
				item.activeIndex=0
			});
			this.$emit('popupSearch', this.newCkeckData)
		},
		close() {
			this.allCheckShow = false;
		},
		getActive(item, index, idx) {
			if(item.checkLogin&&!this.nickName){
				uni.showToast({
					title: item.noLoginText,
					icon: 'none'
				})
				return
			}
			this.newCkeckData[index].activeIndex = idx;
		},
		getTopActive(list, index, item) {
			if(item.checkLogin&&!this.nickName){
				uni.showToast({
					title: item.noLoginText,
					icon: 'none'
				})
				return
			}
			this.$set(this.newCkeckData[0], "activeIndex", index);
			this.search();
		},
	},
};
</script>

<style lang="scss">
.dispalyF {
	display: flex;
	align-items: center;
}

.popupAll {
	width: 100%;
	position: relative;
	z-index: 9;
}

.popupListAll {
	background: #F2F4F7;
	position: relative;
	z-index: 99;
	width: 100%;
	padding-top: 8rpx;
}

.popupList {
	background: #F2F4F7;
	margin: 0 32rpx;

	.tabTitle {
		font-family: Source Han Sans;
		font-size: 24rpx;
		color: #282828;
		margin: 16rpx 0;
	}

	.popupItem {
		padding: 0 32rpx;
		text-align: center;
		background: #fff;
		border-radius: 4rpx;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-feature-settings: "kern" on;
		color: #282828;
		margin-right: 15rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
		line-height: 56rpx;
		min-width: 144rpx;
		border: 1rpx solid #CAD4E2;
		box-sizing: border-box;
	}

	.popupItem-active {
		padding: 0 32rpx;
		text-align: center;
		background: #1A62CE;
		border-radius: 4rpx;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-feature-settings: "kern" on;
		color: #fff;
		margin-right: 15rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
		line-height: 56rpx;
		min-width: 144rpx;
		border: 1rpx solid #1A62CE;
		box-sizing: border-box;
	}
}

.popupPic {
	width: 100%;
	padding-top: 16rpx;
	padding-bottom: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gropo {
	position: fixed;
	left: 0rpx;
	top: 0rpx;
	width: 100vw;
	height: 100vh;
	opacity: 0.6;
	background: rgba(0, 0, 0, 0.23);
}

.tabList {
	padding: 32rpx 0;
	position: relative;
	overflow: hidden;
	flex-wrap: nowrap;
	width: 100%;
	z-index: 105; /* 增加层级，确保在筛选条上方而不被遮挡 */

	.tabItem {
		line-height: 56rpx;
		padding: 0 32rpx;
		background: #fff;
		border-radius: 4rpx;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-feature-settings: "kern" on;
		color: #282828;
		margin-right: 15rpx;
		flex-shrink: 0;
		min-width: 144rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.tabrightBtnOut {
		position: absolute;
		right: 0;
		width: 87rpx;
		height: 56rpx;
    z-index: 100; /* 确保图标可点击 */
	}

	.tabrightBtn {
		position: absolute;
		right: 36rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
		z-index: 99;
	}
	.popupItem {
		padding: 0 32rpx;
		text-align: center;
		background: #fff;
		border-radius: 4rpx;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-feature-settings: "kern" on;
		color: #282828;
		margin-right: 15rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
		line-height: 56rpx;
		min-width: 144rpx;
		border: 1rpx solid #CAD4E2;
		box-sizing: border-box;
	}
	.popupItem-active {
		padding: 0 32rpx;
		text-align: center;
		background: #1A62CE;
		border-radius: 4rpx;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-feature-settings: "kern" on;
		color: #fff;
		margin-right: 15rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
		line-height: 56rpx;
		min-width: 144rpx;
		border: 1rpx solid #1A62CE;
		box-sizing: border-box;
	}
}

.bottom-search {
	margin-top:56rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 16rpx 32rpx 0;
	.search-left {
		font-family: Source Han Sans;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 70rpx;
		background: #fff;
		color: #3D3D3D;
		border-radius: 4rpx;
		height: 62rpx;
		flex-grow: 1;
		text-align: center;
	}
	.search-right {
		margin-right: 30rpx;
		width: 472rpx;
		line-height: 64rpx;
		border-radius: 4rpx;
		background: linear-gradient(270deg, #53A0EA 10%, #1A62CE 100%);
		font-family: Source Han Sans;
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 24rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* #ifdef H5 */
.h5-pc-page {
  .tabList {
    padding: 12px 0 !important;
    background: #f5f7fa !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: flex !important;
  }
  .tabList .tabItem {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 48px !important;
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: 24px !important;
    width: auto !important;
    min-width: 100px !important; /* 减小最小宽度，防止溢出 */
    margin-right: 12px !important;
    vertical-align: middle;
    background-color: #ffffff !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  .tabItem.popupItem-active {
    background-color: #1a62ce !important;
    color: #fff !important;
  }
  .tabTitle {
    font-size: 20px !important;
    margin: 16px 0 12px !important;
    font-weight: 600;
    display: block !important;
  }
  .filter-options-container {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
    min-height: 40px !important; 
  }
  /* 仅针对展开后的筛选列表应用网格项样式，避免影响顶部 Tab */
  .popupList .popupItem, 
  .popupList .popupItem-active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 10px 24px !important;
    margin: 0 16px 16px 0 !important;
    border-radius: 8px !important;
    border: 1px solid #CAD4E2 !important;
    min-width: 140px !important;
    height: auto !important;
  }
  .popupItem-active {
    background-color: #1a62ce !important;
    color: #fff !important;
    border-color: #1a62ce !important;
  }
  .bottom-search .search-left, .bottom-search .search-right {
    font-size: 20px !important;
    height: 54px !important;
    line-height: 54px !important;
  }
}
/* #endif */
</style>
