<template>
	<view>
		<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"
						:style="[
							{
								position: 'sticky',
								top: '-2rpx',
								zIndex: 1,
								flexWrap: 'wrap',
							},
						]"
					>
						<template>
							<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'
										"
									style="margin-right: 20rpx"
								>
									{{ itm.dictLabel }}
								</view>
								<!-- <view v-if="itm.mode == 'timerange'">
									{{itm.start||'开始时间'}} - {{ item.end||'结束时间' }}
								</view> -->
							</template>
						</template>
					</view>
				</view>
				<!-- <view class="search_btn" @click="search">
					查询
				</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">
					<u-icon name="arrow-up"></u-icon>
				</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: ''
		};
	},
	watch: {
		checkData(newVal) {
			this.newCkeckData = newVal;
		},
		allCheckShow(newVal) {
			this.$parent.zctopShow = newVal;
		},
	},
	mounted() {
    if (uni.getStorageSync("userInfo")) {
      let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      this.nickName = userInfo.userName ? userInfo.userName : "";
    }
	},
	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: 9;

	.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;
		// background: linear-gradient(270deg, #2A51DF 0%, rgba(66, 110, 230, 0) 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;
	}
}

.dispalyF {
	display: flex;
	align-items: center;
}

.rightView :last-child {
	margin-right: 100rpx !important;
}

.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;
	}
}
</style>
