<style>
	.quick_top {
		display: flex;
		margin: 10px auto;
	}

	.quick_slider {
		padding: 5px 17px;
		border-radius: 20px;
		/* background-color: #ebebeb; */
		color: #272727;
		display: inline-block;
		font-size: 12px;
		margin-left: 10px;
		letter-spacing: 2px;
	}

	.quick_arrow {
		width: 10%;
	}

	.quick_arrow .u_icon {
		margin-left: 20%;
		line-height: 30px;
		color: #cd9621;
		font-size: 20px;
	}

	.quick_arrow .allTags {
		margin: 20px;
	}

	.allTags_List {
		padding-bottom: 20px;
	}

	.allTags_List {
		display: flex;
	}

	.quick_Content {
		width: 100%;
	}

	.quick_Inner {
		display: flex;
		justify-content: space-between;
		padding: 20px;
	}

	.quick_Inner:last-child {
		margin: 0px !important;
	}

	.quick_ImgDiv {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
	}

	.quick_ImgDiv img {
		width: 100%;
		height: 100%;
	}

	.quick_Center {
		position: relative;
		width: 85%;
	}

	.share_Content {
		position: absolute;
		right: 0;
		top: 0;
		padding: 5px 10px;
		background-color: #faf3e3;
		border-radius: 20px;
		font-size: 12px;
		display: flex;
		min-width: 50px;
		align-items: center;
	}

	.Quick_Shareicon {
		width: 13px;
		height: 13px;
		margin-right: 5px;
	}

	.Quick_ImgContent {
		display: flex;
		justify-content: space-between;
	}

	.quick_page img {
		width: 650rpx;
		height: 700rpx;
	}

	.quick_page .hotsopt {
		position: absolute;
		background: transparent;
		border: none;
		outline: none;
	}

	.quick_page .hotsopt::after {
		border: none;
	}

	.qr_DialogBtn {
		position: absolute;
		bottom: 30px;
		width: 80%;
		background-color: #ff4048;
		color: #fff;
		margin: auto;
		left: 50%;
		margin-left: -40%;
		border-radius: 20px;
	}

	.qr_Line {
		width: 100%;
		height: 1px;
		background-color: #f4f4f4;
		margin: 10px 0 0 0;
	}
</style>
<template>
	<view class="quick-box" style="height:100vh;" :style="{ 'height': `calc(100vh - ${paddingBottm})` }">
		<view style="padding:5px 10px">
			<u-search v-model="conMsg.KeyWords" :show-action="true" action-text="搜索" :animation="true" @blur="goSearch"></u-search>
		</view>
		<view class="quick-head">
			<u-tabs name="Name" :list="dataFirst" :is-scroll="false" :current="active" :bar-width="80" :font-size="28"
			 :active-color="mainColor" @change="getChild"></u-tabs>
			<view style="white-space: nowrap;display: flex;margin:10px auto;background-color:#EBEBEB;border-radius:20px;width:95%;">
				<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;width:100%;">
					<view @click="getSecond(item,index)" style="padding:8px 17px;margin-left:0;flex:1;text-align:center;" :style="{ color: index==active2 ? '#fff' : '#272727',backgroundColor:index==active2 ? mainColor:'' }"
					 class="quick_slider" v-for="(item,index) in dataSecond" :key="index">{{item.Name}}</view>
				</scroll-view>
			</view>
			<view class="qr_Line"></view>
			<view class="quick_top" v-if="dataThird.length>0">
				<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;width:90%">
					<view @click="getThird(item,index)" :style="{ color: index==active3 ? '#fff' : '#272727',backgroundColor:index==active3 ? mainColor:'' }"
					 class="quick_slider" v-for="(item,index) in dataThird" :key="index">{{item.Name}}</view>
				</scroll-view>
				<view class="quick_arrow" v-if="dataThird.length>4">
					<u-icon class="u_icon" name="arrow-up" v-if="show" @click="show=false"></u-icon>
					<u-icon class="u_icon" name="arrow-down" v-else @click="show=true"></u-icon>
					<u-popup v-model="show" mode="top">
						<view class="allTags">全部标签</view>
						<view class="allTags_List">
							<view @click="getThird(item,index)" :class="{'checkedItem':index==active3}" class="quick_slider" v-for="(item,index) in dataThird"
							 :key="index">{{item.Name}}</view>
						</view>
					</u-popup>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" style="background-color: #f0f4f7;" :enable-back-to-top="true" :enable-flex="true"
		 @scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
			<view class="quick_Content" style="width: 100%;min-height:100%">
				<view class="quick_Inner" v-for="(item,subIndex) in dataList" :key="subIndex" style="margin-bottom:10px;background-color:#fff;">
					<view class="quick_ImgDiv">
						<img :src="item.HeadImg" alt />
					</view>
					<view class="quick_Center">
						<view style="margin-bottom:10px;font-weight:bold">{{item.UserName}}</view>
						<view v-html="item.MaterialInfo" @click="goUrl(item)" style="margin-bottom:10px;"></view>
						<view v-if="item.LinkUrl!=''" @click="goUrl(item)" style="color:#b08b38;margin-bottom:10px;">查看详情</view>
						<view v-for="(sItem,i) in imgArr" :key="i">
							<view style="flex-direction:row;display:flex;">
								<!-- 横排布局 -->
								<view v-for="(subItem,index) in item.ImgList" :key="index" style="margin-bottom:2px;">
									<!-- 遍历数组 -->
									<view v-if="index>=i*3&&index<3*(i+1)" class="flex-item" style="margin-right:5px;">
										<!-- 分段显示 -->
										<img :src="subItem" @click="previewImage(index, item.ImgList)" style="height:190rpx;width:190rpx;" />
									</view>
								</view>
							</view>
						</view>
						<view class="share_Content" @click="openShare(item)">
							<image src="@/static/images/icon/icon-share.png" class="Quick_Shareicon" />
							{{item.ShareCount}}
						</view>
					</view>
				</view>
			</view>
			<view style="padding:10px 0;background:#FFF">
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#fff" />
			</view>
		</scroll-view>
		<tabbar v-if="showtab==true"></tabbar>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<u-popup v-model="showDialog" mode="center" :mask-close-able="false" custom-style="padding:0;background:none;">
			<view style="position: relative;">
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/qrDialog.png" mode="widthFix" />
				<button class="qr_DialogBtn" @click="showDialog=false">确定</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import auth from "@/components/auth/index";
	import tabbar from "@/components/tabbar/index";
	export default {
		data() {
			return {
				show: false,
				pageTitle: "分享",
				loading: true,
				showAuth: false,
				mainColor: "",
				u: {},
				msg: {
					Name: "", //页面名称
					pageIndex: 1,
					pageSize: 10
				},
				active: 0, //一级
				active2: -1, //二级选中
				active3: -1, //三级选中
				conMsg: {
					CateId: 0,
					QStartDate: "", //开始时间
					QEndDate: "", //结束时间
					KeyWords: "", //页面名称
					pageIndex: 1,
					pageSize: 10,
					total: 0,
					GoodsId:0,
				},
				//第一层数据
				dataFirst: [],
				//第二层
				dataSecond: [],
				//第三层
				dataThird: [],

				//内容数据
				dataList: [],
				imgArr: [0, 1, 2],
				showShare: false, // 显示分享
				showAuth: false, //是否登录弹窗
				scrollHeight: 0,
				status: "loadmore",
				pageCount: 1,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				goodTitle: "", //名称=>传子组件
				images: [], //图片=>传子组件
				qrHeight: 160,
				showDialog: false,
				paddingBottm: "0px",
				showtab:true,
			};
		},
		components: {
			auth,
			tabbar,
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title :
				[];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			
		},
		onLoad(option) {
			console.log(option)
			if(option && option.KeyWords){
				// this.conMsg.KeyWords = option.KeyWords;
			}
			if(option && option.GoodsId){
				this.conMsg.GoodsId = option.GoodsId;
				this.showtab = false
				
			}
			if(this.showtab==true){
				setTimeout(()=>{
					this.getTabsHeight();
				},1000)
			}
			setTimeout(() => {
				this.getHeadHeight();
			}, 1000);
			this.getList();
			this.u = uni.getStorageSync("mall_UserInfo");
		},
		methods: {
			goSearch() {
				this.conMsg.pageIndex = 1
				this.dataList = []
				this.getContent();
			
			},
			getTabsHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".quick-box >>> .tabbarMain")
					.boundingClientRect((data) => {
						that.paddingBottm = data.height + "px";
					})
					.exec();
			},
			getHeadHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".quick-head")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
			//点击切换
			changeHandler(i) {
				this.active = i;
			},
			//获取头部数据
			getList() {
				this.request2({
						url: "/api/Share/GetShareCategoryList",
						data: this.msg,
					},
					(res) => {
						var data = res.data;
						this.dataFirst = data;
						if (data && data.length > 0) {
							this.dataSecond = data[0].children;
						}
						if (this.dataFirst.length > 0) {
							this.conMsg.CateId = this.dataFirst[0].Id;
							this.getContent();
						}else{
							if(this.u.TenantId==29){
								this.getContent();
							}
							
						}
					}
				);
			},
			//获取内容
			getContent() {
				this.request2({
						url: "/api/Share/AppGetShareFriendPage",
						data: this.conMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							if(this.conMsg.GoodsId!=0){
								this.conMsg.GoodsId=0
							}
							this.dataList = this.dataList.concat(res.data.pageData);
							this.pageCount = res.data.pageCount;
						}
					}
				);
			},
			getChang() {
				if (this.dataThird.length == 0) {
					this.qrHeight = 160;
				} else {
					this.qrHeight = 196;
				}
			},
			//点击一级分类
			getChild(index) {
				this.dataList = [];
				this.active = index;
				this.dataSecond = this.dataFirst[index].children;
				this.dataThird = [];
				this.active2 = -1;
				this.active3 = -1;
				this.conMsg.CateId = this.dataFirst[index].Id;
				
				this.conMsg.pageIndex = 1
				this.getContent();
				this.getChang();
			},
			//点击二级分类
			getSecond(item, index) {
				this.dataList = [];
				this.active2 = index;
				this.dataThird = item.children;
				this.active3 = -1;
				this.conMsg.CateId = item.Id;
				this.conMsg.pageIndex = 1
				this.getContent();
				this.getChang();
			},
			//点击三级分类
			getThird(item, index) {
				this.dataList = [];
				this.active3 = index;
				this.show = false;
				this.conMsg.CateId = item.Id;
				this.conMsg.pageIndex = 1
				this.getContent();
				this.getChang();
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			closeShare() {
				this.showShare = false;
			},
			//点击分享
			openShare(item) {
				if (this.u) {
					this.request2({
							url: "/api/Share/SetShareCount",
							data: {
								Id: item.Id,
							},
						},
						(res) => {
							if (res.resultCode == 1) {
								item.ShareCount++;
							}
						}
					);
					this.goodTitle = item.MaterialInfo;
					this.images = item.ImgList;
					this.sendQuanHandler();
					this.showShare = true;
				} else {
					this.showAuth = true;
				}
			},
			//滚动加载
			lower(e) {
				if (this.conMsg.pageIndex < this.pageCount) {
					this.conMsg.pageIndex++;
					this.status = "loading";
					this.getContent();
				} else {
					this.status = "nomore";
				}
			},
			//跳转
			goUrl(item) {
				if (item.LinkUrl && item.LinkUrl.length > 0) {
					uni.navigateTo({
						url: item.LinkUrl,
					});
				}
			},
			//分享复制
			sendQuanHandler() {
				this.copyHandler();
				//判断有图片再调用复制图片
				if (this.images.length > 0) {
					setTimeout(() => {
						this.savePicHandler();
					}, 1000);
				}
			},
			//复制文字
			copyHandler() {
				uni.setClipboardData({
					data: this.goodTitle,
				});
			},
			savePicHandler() {
				uni.showLoading({
					title: "正在下载图片",
				});
				let arr = JSON.parse(JSON.stringify(this.images));
				this.downLoadImage(arr);
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			downLoadImage(arr) {
				let that = this;
				uni.downloadFile({
					url: arr[0],
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									arr.splice(0, 1);
									if (arr.length > 0) {
										that.downLoadImage(arr);
									} else {
										uni.hideLoading();
										uni.showToast({
											title: "下载成功",
										});
										that.showDialog = true;
									}
								},
								fail: function(e) {
									uni.hideLoading();
									that.$refs.uTips.show({
										title: "下载失败，请稍后重试",
										type: "error",
										duration: "2300",
									});
								},
							});
						} else {
							uni.hideLoading();
							that.$refs.uTips.show({
								title: "下载失败，请稍后重试",
								type: "error",
								duration: "2300",
							});
						}
					},
				});
			},
		},
	};
</script>