<template>
	<view class="configuration-box">
		<view class="device-search">
			<u-dropdown active-color="#1b85e9">
				<u-dropdown-item v-model="dataType" title="组态类型" :options="typeOptions" @change="searchChange"></u-dropdown-item>
			</u-dropdown>
			<u-search placeholder="请输入组态名称搜索" margin="0 10rpx" class="uni-search-bar" v-model="searchVal" @custom="searchChange" @clear="searchChange" @search="searchChange"></u-search>
		</view>
		<mescroll-body ref="mescrollRef" top="160" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="configuration-list">
				<view class="configuration-item" v-for="(item,index) in configurationList" :key="index"  @click.stop="goDetail(item)">
					<view class="item-img-box">
						<image :src="item.iconPath" mode="aspectFit"></image>
					</view>
					<view class="item-content">
						<view class="content-left">
							<view class="content-top">
								<text class="content-name">{{item.sceneName}}</text>
							</view>
							<view class="content-time">{{item.createdAt}}</view>
							<!-- <view class="content-bottom">
								<view class="content-btn-box" @click.stop="clickShare(index)">
									<u-icon name="zhuanfa" color="#a5a4a5" size="42"></u-icon>
								</view>
								<text @click.stop="clickShare(index)">分享</text>
							</view> -->
							<view class="content-btn-box">
								<button type="primary">预览</button>
								<button type="primary"  @click.stop="clickShare(index)">分享</button>
							</view>
						</view>
						<!-- <u-icon name="arrow-right" color="#a5a4a5" size="42"></u-icon> -->
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 分享弹框 -->
		<u-popup v-model="shareShow" width="600" border-radius="10" class="share-popup" mode="center">
			<view class="title">
				请选择分享方式
			</view>
			<view class="popup-box">
				<!-- #ifdef MP-WEIXIN -->
				<view class="box-item" @click="shareFriend">
					<button type="default" plain="true" open-type="share">
						<view class="icon-bg" style="background-color: #44a941;">
							<u-icon name="weixin-fill" color="#fff" size="28"></u-icon>
						</view>
					</button>
					<text>分享小程序</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<!-- #endif -->
				<view class="box-item" @click="goShareList">
					<button type="default" plain="true">
						<view class="icon-bg" style="background-color: #f36038;">
							<u-icon name="attach" color="#fff" size="28"></u-icon>
						</view>
					</button>
					<text>分享链接</text>
				</view>
			</view>
			<view class="cancel-share" @click="cancelShare">
				取消分享
			</view>
		</u-popup>

		<!-- 生成海报 -->
		<hch-poster ref="hchPoster" @cancel="handleCancel" :posterData.sync="posterData" />
	</view>
</template>

<script>
	let typeOptions=[
		{
			label: '全部',
			value: '',
		},
		{
			label: '2D',
			value: '2d',
		},
		{
			label: '3D',
			value: '3d',
		},
		{
			label: 'GIS',
			value: 'gis',
		}
	]
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import HchPoster from "@/components/hch-poster/hch-poster.vue"
	export default{
		mixins: [MescrollMixin],
		data(){
			return {
				expire:0,
				token:'',
				// 所属项目名称
				projectName:1,
				typeOptions:typeOptions,
				configurationList:[],
				dataType:'',
				searchVal:'',
				upOption:{
					noMoreSize: 4,
					textNoMore: '----  已经到底啦  ----',
					empty:{
						tip: '~ 搜索无数据 ~' // 提示
					}
				},
				
				shareShow:false,
				shareIndex:null, //当前点击分享的索引
				shareToken:'',
				filePrefix:'',
				// 海报模板数据
				posterData: {
					poster: {
						//根据屏幕大小自动生成海报背景大小
						url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
						r: 10, //圆角半径
						w: 300, //海报宽度
						h: 480, //海报高度
						p: 20 //海报内边距padding
					},
					mainImg: {
						//海报主商品图
						url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
						r: 10, //圆角半径
						w: 250, //宽度
						h: 200 //高度
					},
					title: {
						//商品标题
						text: "标题",//文本
						fontSize: 16, //字体大小
						color: "#000", //颜色
						lineHeight: 25, //行高
						mt: 20 //margin-top
					},
					codeImg: {
						//小程序码
						url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
						w: 100, //宽度
						h: 100, //高度
						mt: 20, //margin-top
						r: 50 //圆角半径
					},
					tips: [
						//提示信息
						{
							text: "小程序码",//文本
							fontSize: 14,//字体大小
							color: "#2f1709",//字体颜色
							align: "center",//对齐方式
							lineHeight: 25,//行高
							mt: 20//margin-top
						},
						{
							text: "长按/扫描识别查看",//文本
							fontSize: 12,//字体大小
							color: "#2f1709",//字体颜色
							align: "center",//对齐方式
							lineHeight: 25,//行高
							mt: 20//margin-top
						}
					]
				}
			}
		},
		components:{
			HchPoster
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
				return this.$u.mpShare
			}
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.$u.mpShare
		},
		// #endif
		onLoad() {
			this.getToken();
			this.$u.mpShare = {
				title: '', // 默认为小程序名称
				path: '', // 默认为当前页面路径
				imageUrl: '' // 默认为当前页面的截图
			}
			this.getFilePrefix();
			this.configurationList=[];
			this.pageNum=1;
			// this.getConfigurationList();
		},
		methods:{
			// 获取token和有效期
			getToken(){
				uni.getStorage({
					key:'token',
				}).then(res => {
					// 如果返回数组为两位就是正确
					if(res.length==2){
						this.token = res[1].data;
					}
					return uni.getStorage({
						key:'expire',
					})
				}).then(res => {
					if(res.length==2){
						this.expire = res[1].data;
					}
				})
			},
			getFilePrefix(){
				let configList = uni.getStorageSync('configList');
				let configIndex = uni.getStorageSync('configIndex');
				if(!configList || configIndex==-1){
					uni.showToast({
						title: '请求域名为空，请先添加',
						icon: 'none',
						duration: 1500
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/tabbar/config'
						})
					},1500)
				}else{
					this.filePrefix = configList[configIndex].protocol + configList[configIndex].address;
				}
			},
			searchChange(e) {
				this.configurationList = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			// 获取产品列表
			upCallback(page){
				let params = {
					page: page.num,
					pageSize: page.size,
					dataType:this.dataType,
					"Wheres": {
							"wheres": [
								{"fields": ["sceneName"],"operator": "keyword","value": this.searchVal}
							]
					},
				}
				this.$api.configurationApi.getConfigurationListData(params).then(res => {
					if(res.code === 0){
						let curPageData = res.data && res.data.list;
						let curPageLen = curPageData && curPageData.length || 0;
						let totalSize = res.data.totalCount; 
						this.$nextTick(()=>{
							// 隐藏下拉刷新和上拉加载的状态;
							this.mescroll.endBySize(curPageLen, totalSize);
						})
						//设置列表数据
						if(page.num == 1) this.configurationList = []; //如果是第一页需手动制空列表
						let data = curPageData.map(item=>{
							if(!item.iconImage || item.iconImage == ''){
								item.iconPath = 'https://am-img.gkiiot.com/iotos/app/img/configuration/default.jpg'
							}else{
								item.iconPath = this.filePrefix + item.iconImage
							}
							item.url =  this.filePrefix + '/console/' + item.dataType + '/preview?sceneId=' + item.uuid;
							return item;
						})
						
						this.configurationList = curPageLen > 0 &&  this.configurationList.concat(data); //追加新数据
						this.total = totalSize;
					}else{
						this.$u.toast(res.msg);
						this.mescroll.endErr();
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			// 点击分享
			clickShare(index){
				console.log("点击分享",index)
				// #ifdef MP-WEIXIN
				this.shareShow = true;
				this.shareIndex = index;
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url:'./configuration-share?uuid=' + this.configurationList[index].uuid + '&name=' + this.configurationList[index].sceneName + '&imgPath=' + encodeURIComponent(this.configurationList[index].iconPath)
				})
				// #endif
				// this.$u.toast('功能开发中');
				// console.log(this.configurationList[index])
				// this.shareShow = true;
				// this.shareIndex = index;
			},
			// 跳转分享列表
			goShareList(){
				uni.navigateTo({
					url:'./configuration-share?uuid=' + this.configurationList[this.shareIndex].uuid + '&name=' + this.configurationList[this.shareIndex].sceneName + '&imgPath=' + encodeURIComponent(this.configurationList[this.shareIndex].iconPath)
				})
			},
			// 分享给好友(小程序)
			shareFriend(){
				let obj = this.configurationList[this.shareIndex];
				let url = obj.url + '&expires=' + this.expire + '&token=' + this.token;
				this.$u.mpShare = {
					title: obj.sceneName, // 默认为小程序名称
					path: '/pages/configuration/configuration-detail?name=' + encodeURIComponent(obj.sceneName) + '&url=' + encodeURIComponent(url), // 默认为当前页面路径
					imageUrl: obj.iconPath // 默认为当前页面的截图
				}
			},
			// 分享给好友(app)
			appShareFriend(){
				let obj = this.configurationList[this.shareIndex];
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: this.filePrefix+obj.iconPath,
				    title: obj.name,
				    miniProgram: {
				        id: 'gh_74c767462f0a',
				        path: '/pages/hcwl/configuration/configuration-detail?name=' + encodeURIComponent(obj.name) + '&url=' + encodeURIComponent(obj.url),
				        type: 0,
				        webUrl: '/pages/hcwl/configuration/configuration-detail?name=' + encodeURIComponent(obj.name) + '&url=' + encodeURIComponent(obj.url)
				    },
				    success: (res) => {
							this.$u.toast('分享成功',res);
				    },
						fail: (e) => {
							this.$u.toast('分享失败',e);
						},
						complete:(e) => {
							console.log('分享操作结束!')
						}
				});
			},
			// 获取小程序码
			getQrCode(){
				let obj = this.configurationList[this.shareIndex];
				console.log("当前点击数据",obj)
				let id = encodeURIComponent(obj.id);
				let opt = {
					url: '/prod-api/system/open/wechat/er/image',
					method: "POST",
				}
				let params = {
					page:'pages/configuration/configuration-transfer',
					// page:'pages/productList/transfer',
					scene: id
				}
				this.$request.TokenRequest(opt,params).then(res => {
					console.log("获取二维码成功",res);
					if(res.code != 200){
						this.$u.toast('生成海报失败！');
						return;
					}
					this.shareShow = false;
					this.$set(this.posterData.mainImg,'url',this.filePrefix+obj.iconPath)
					this.$set(this.posterData.title,'text',obj.name)
					this.$set(this.posterData.codeImg,'url',res.data)
					console.log("当前海报信息",this.posterData)
					this.$nextTick(()=>{
						this.$refs.hchPoster.posterShow()
					})
				}, error => {
					this.$u.toast('获取二维码失败！');
					console.log("获取二维码失败",error)
				})
			},
			// 取消海报生成
			handleCancel(){
				console.log("取消海报生成")
			},
			// 取消分享
			cancelShare(){
				this.shareShow = false;
			},
			// 跳转详情页
			goDetail(item){
				console.log("跳转详情页",item)
				let url = item.url + '&expires=' + this.expire + '&token=' + this.token;
				uni.navigateTo({
					url:'./configuration-detail?name=' + encodeURIComponent(item.sceneName) + '&url=' + encodeURIComponent(url)
				})
			},
			// 上拉加载更多
			reachBottom() {
				console.log("这里上拉加载更多")
				if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.loadStatus = 'loading';
					this.isLoadMore=true
					this.pageNum+=1
					this.getConfigurationList()
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.configuration-box{
		background: #f5f5f5;
		// height: 100vh;
	}
	.device-search{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		height: 160rpx;
		background-color: #fff;
		width: 100%;
		z-index: 999;
		.uni-search-bar{
			// padding: 0 10rpx;
		}
	}
	// .scroll-box{
	// 	// height: calc(100% - var(--status-bar-height) - 48px - 120rpx);
	// 	height: calc(100% - var(--status-bar-height) - 48px);
	// 	/* #ifdef APP-PLUS */
	// 	height: calc(100% - var(--status-bar-height) - 44px);
	// 	/* #endif */
	// }
	.configuration-list{
		padding: 10rpx 24rpx;
		.configuration-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			// height: 115rpx;
			border-bottom: 1px solid #e0dede;
			.item-img-box{
				width: 192rpx;
				height: 150rpx;
				margin-right: 20rpx;
				background-color: #eee;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.item-content{
				flex: 1;
				height: 150rpx;
				// display: flex;
				// justify-content: space-between;
				.content-left{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex:1;
					.content-top{
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;
					}
					.content-time{
						font-size: 24rpx;
						color: #999;
						margin: 4rpx 0 16rpx 0;
					}
					.content-btn-box{
						display: flex;
						align-items: center;
						// justify-content: space-around;
						button{
							width: 200rpx;
							height: 60rpx;
							margin-left: 0;
							font-size: 26rpx;
							padding: 0;
							background: #2979ff;
							display: flex;
							justify-content: center;
							align-items: center;
							&:first-child{
								margin-right: 30rpx;
							}
						}
					}
					.content-bottom{
						display: flex;
						align-items: center;
						// justify-content: space-between;
						// margin-top: 10rpx;
						.content-bottom-left{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #999;
							.content-txt{
								margin: 0 10rpx;
								&:first-of-type{
									margin-right: 30rpx;
								}
							}
						}
						.content-btn-box{
							margin-right: 10rpx;
							::v-deep button{
								background-color: #1b85e9;
								padding: 10rpx 30rpx;
							}
						}
					}
				}
			}
		}

	}

	// 分享弹框
	.share-popup{
		.title{
			background-color: #eeeff1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
		}
		.popup-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.box-item{
				padding: 20rpx 0;
				button{
					border: 0px solid #fff;
					background: #fff;
					padding: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;
					.icon-bg{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		.cancel-share{
			border-top: 1px solid #f0f0f0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
			color: #666;
		}
	}
</style>
