<template>
	<view class="news-list">
		<view class="mainnav flex">
		    <view class="mainnav--item" :class="{'active': current === 1}" @click="changeNav(1)">
		        <text>资料库</text> 
		    </view>
		   
			<view class="mainnav--item" :class="{'active': current === 3}" @click="changeNav(3)">
			    <text>机构</text>
			</view>
			
			<view class="mainnav--item" :class="{'active': current === 4}" @click="changeNav(4)">
			    <text>专家</text>
			</view>
			
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:up="upOption">
			<!-- 检测机构 -->
			<organ :active="currentNav" v-show="currentNav===3"></organ>
			<!-- 专家服务 -->
			<team :active="currentNav" v-show="currentNav===4"></team>
			
			<view class="contain" :active="currentNav" v-show="currentNav===1">
				<view >
				    <router-link
				    	:to="{path: '/bundle_b/pages/resource_search/resource_search'}">
				        <u-search disabled
				            placeholder="请输入搜索内容" height="64" focus
				            ></u-search>
				    </router-link>
				</view>
				<view >
				<!-- 城市 -->
				<router-link  class="m-l-16 flex row-center city" to="/bundle_b/pages/city/city">
					<text class="m-r-6">{{ cityInfo.name || '选择' }}</text>
					<u-icon name="arrow-down" size="24" color="#FFFFFF"></u-icon>
					<!-- <image class="icon-md m-l-30" src="/static/images/icon_news.png">
					</image> -->
				</router-link>
				</view>
				<view class="banner">
					<ad-swipers  :pid="30" height="340rpx">
					</ad-swipers>
				</view>
				<tabs :current="active" @change="changeActive" :bar-width="60">
					<!-- <tab name="全部"></tab> -->
					<tab v-for="(item, index) in categoryList" :key="index" :name="item.name"></tab>
				</tabs>
				
				<tabs  v-if="categoryList2.length" :current="active2" @change="changeActive2" :bar-width="60">
					<!-- <tab name="全部"></tab> -->
					<tab v-for="(item, index) in categoryList2" :key="index" :name="item.name"></tab>
				</tabs>
				
				<view class="main">
					<view class="article-list">
						<view class="article-item bg-white"  v-for="(item, index) in newsList" :key="index" >
							<router-link :to="{path: '/bundle/pages/resource_details/resource_details', query: {id: item.id, type}}">
								<view class="flex col-top">
									<view class="info flex-1">
										<view class="title lg line-2 m-b-20" style="-webkit-line-clamp:1">{{ item.title }}</view>
										<view class="lighter line-2">
											<view>{{ item.intro }}</view>
										</view>
										<view class="flex row-between price">
											<view class="xs muted">价格: <text style="color: red;">{{item.price_str}}</text></view>
										</view>
									</view>
									<u-image width="240rpx" height="180rpx" class="img m-l-20" :src="item.image" />
								</view>
								
								<view class="flex row-between m-t-20">
									<view class="xs muted">发布时间: {{item.create_time}}</view>
									<view class="flex">
										<image class="icon-sm" src="/static/images/icon_see.png"></image>
										<view class="m-l-10 xs muted">{{ item.visit }}人浏览</view>
									</view>
								</view>
							</router-link>
						</view>
					</view>
				</view>
			</view>

		</mescroll-body>
		<tabbar></tabbar>
	</view>
</template>

<script>
	// import Organ from "../../components/components/organ.vue"
	// import Team from "../../components/components/team.vue"
	
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getResourceCategoryList,
		getResourceList
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		// components: {
		// 	Organ,
		// 	Team
		// },
		mixins: [MescrollMixin],
		data() {
			return {
				current:1,
				currentNav:1,
				active: 0,
				active2: 0,
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/news_null.png',
						tip: "暂无数据",
					}
				},
				cid:0,
				cid2:0,
				categoryList: [],
				categoryList2: [],
				newsList: [],
				type: -1,
				cate_type:0,
			};
		},

		async onShow() {
			console.log(111)
			// this.categoryList = [],
			// this.type =  0;
			// this.cate_type =  0;
			uni.setNavigationBarTitle({
				title: '资料库'
			});
			// this.cid = 0
			// this.current = 1
			// this.currentNav = 1
			
			let queryString = uni.getStorageSync("params") 
			uni.removeStorageSync("params")
			console.log("获取的参数:",queryString)
			if(queryString){
				// 使用URLSearchParams类解析查询参数
				const regex =/([^=&]+)=([^&]*)/g;
				let match, params = {};
				
				while (match = regex.exec(queryString)) {
				  params[match[1]] = match[2];
				}
				
				// 使用get方法获取index和cate的值
				let p_index =  params['index'];
				let p_cate = params['cate'];
				let cate_type = params['cate_type'];
				
				if(p_index !=undefined && p_index!=""){
					this.current = parseInt(p_index)
					this.currentNav = parseInt(p_index)
				}else{
					this.current = 1
				    this.currentNav = 1
				}
				
				if(p_cate !=undefined && p_cate!=""){
					this.cid = parseInt(p_cate)
				}else{
					this.cid = 0
				}
				
				if(cate_type !=undefined && cate_type!=""){
					this.cate_type = parseInt(cate_type)
					this.active = 0
					this.active2 = 0
					if(this.cate_type == 1){
						uni.setNavigationBarTitle({
							title: '全国案例'
						});
					}
				}
				
			}else if(queryString == ""){
				this.cid = 0
				this.current = 1
				this.currentNav = 1
				this.categoryList = [],
				this.type =  0;
				this.cate_type =  0;
			}
			
			
			console.log("this.cate_type :",this.cate_type,this.cate_type )
		    console.log("this.active :",this.current,this.currentNav )
			// 选择城市后是否刷新
			await this.downCallback();
		},
		
		async onLoad() {
			
			this.type =  0;
			uni.setNavigationBarTitle({
				title: '资料库'
			});
			console.log(11111)
			// 选择城市后是否刷新
			// await this.downCallback();
		
		},

		methods: {
			changeNav(index){
				if(index == 1){
					this.current = index
					this.currentNav = index
					console.log("此时数据：",this.currentNav)
					this.mescroll.resetUpScroll();
				}else if(index == 3){
				
					uni.navigateTo({
						url: "/bundle_b/pages/resource_list/ogran_list"
					});
				}
				else if(index == 4){
					uni.navigateTo({
						url: "/bundle_b/pages/resource_list/team_list"
					});
				}
			},
			changeActive(e) {
				this.active2 = 0 ;
				this.active = e;
				this.newsList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			changeActive2(e) {
				this.active2 = e;
				this.newsList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			async downCallback() {
				await this.getCategoryListFun();
				this.mescroll.resetUpScroll();		
			},
			upCallback(page) {
				const { cityInfo,type, active, categoryList } = this
				console.log("active:",categoryList[this.active])
				let city_id=0
				if(cityInfo.id !=null && cityInfo.id!=undefined && cityInfo.id>0){
					city_id = cityInfo.id
				}
				getResourceList({
					type: this.type,
					cid: this.active ? categoryList[this.active].id : '',
					cid2: this.active2 ? this.categoryList2[this.active2].id : '',
					city_id:city_id,
					page_size:page.size,
					page_no:page.num,
					cate_type: this.cate_type,
				}).then(({
					data
				}) => {
					if (page.num == 1) this.newsList = [];
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					this.newsList = this.newsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
				this.getCategoryListFun2();
			},
	
			async getCategoryListFun2() {
				console.log("获取子分类开始",this.active)
				this.categoryList2 = [];
				console.log("当前分类",this.categoryList[this.active].id)
				
				const {
					code,
					data
				} = await getResourceCategoryList({
					pid: this.active ? this.categoryList[this.active].id : 999,
				})
				
				if (code == 1 && data.length>0) {
					this.categoryList2 = [{
							name: '全部',
							id: ''
						}, ...data]
				}
				let item = {}
				
				this.$nextTick(() => {
					// 在DOM更新之后使用Vue.set来更新数组
					this.categoryList2.forEach((item, index) => {
					  this.$set(this.categoryList2, index, item);
					});
				  });
				
				this.categoryList2.forEach((item, index) => {
					if(this.cid2>0 && item.id == this.cid2){
						this.active2 = index+1	
					}
				})
			},

			
			async getCategoryListFun() {
				this.categoryList = [];
				console.log("当前分类",this.categoryList)
				let {
					cityInfo,
					isLogin
				} = this;
				const {
					code,
					data
				} = await getResourceCategoryList({
					cate_type: this.cate_type,
				})
				
				if (code == 1) {
					this.categoryList = [{
							name: '全部',
							id: ''
						}, ...data]
				}
				let item = {}
				
				if(this.cate_type == 0){
					let item = {id:0,name:"全国"}
					if(cityInfo.id !=null && cityInfo.id!=undefined && cityInfo.id>0){
						item = {id:"city_"+cityInfo.id,name:"本地"}
					}
					this.categoryList.push(item)
				}
				
				if(isLogin){
					item = {id:"my_buy",name:"我的购买"}
					this.categoryList.push(item)
					
					item = {id:"my_download",name:"我的下载"}
					this.categoryList.push(item)	
				}
				this.$nextTick(() => {
				    // 在DOM更新之后使用Vue.set来更新数组
				    this.categoryList.forEach((item, index) => {
				      this.$set(this.categoryList, index, item);
				    });
				  });
				
				this.categoryList.forEach((item, index) => {
					if(this.cid>0 && item.id == this.cid){
						console.log("当前值：{}",this.cate_type)
						if(this.cate_type == 0){
							this.active = index+1
						}else{
							this.active = index
						}
						console.log("当前值：{}",this.active)
						
					}
				})
				
			},
		},
		computed: {
			...mapGetters(['cityInfo'])
		}
		
	};
</script>
<style lang="scss">
	
	.news-list {
		.mainnav {
			padding: 16rpx 150rpx;
			background-color: $-color-white;
		    &--item {
		        width: 150rpx;
		        font-size: 32rpx;
		        font-weight: 500;
		        text-align: center;
		        color: #BBBBBB;
		        transition: all .2s linear;
			
		        .new {
		            width: 10rpx;
		            height: 10rpx;
		            border-radius: 50%;
		            display: inline-block;
		            margin-bottom: 24rpx;
		            background-color: $-color-primary;
		        }
		    }
			
		    .active {
		        color: #000000;
		    }
		}
		
		.main {
			.article-list {
				padding-top: 20rpx;

				.article-item {
					padding: 20rpx;
					align-items: flex-start;
					&:not(:last-of-type){
						border-bottom: $-solid-border;
					}
				}
			}
		}
	}
	page {
		padding: 0;
	}
	.index-bg {
		background-image: url('https://cdn.ahbcqz.com/uploads/images/202307051615359ddc37211.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.index {
		min-height: calc(100vh - var(--window-bottom));
		
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}
		
		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: #FFFFFF;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 9999;
			bottom: -80rpx;
			right: -150rpx;
		}
		.capsule-tips::after {
			content: '';
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}
	
		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}
	.col-top {
		position: relative;
		.price {
				position: absolute;
				bottom:10rpx;
			}
	}
	
	.city {
		    position: absolute;
		    top: 100rpx;
		    z-index: 999;
		    color: #fff;
			padding: 10rpx 15rpx;
			background: rgba(0,0,0,.3);
			border-radius: 10rpx;
	}
</style>
