<!-- 生成记录 -->
<template>
	<!-- #ifdef APP -->
	<view class="share-detail" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="share-detail" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
	<!-- #endif -->
		<view class="sdt-top">
			<!-- #ifdef MP -->
			<view :style="{height: `${StatusBar}px`}"></view>
			<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
			<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
				<u-icon name="arrow-left" size="40" class="back" @click="back"
				:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
				<image :src="myFileUrl+logo"></image>
				<view style="width: 75rpx;"></view>
			</view>
			<view class="detail-content">
				<u-section title="发布记录" sub-title="筛选" 
				color="#befda1" fontSize="34" subColor="#cdfbf2">
					<template slot="right">
						<image @click="showSift = true" class="dc-sift" src="/static/sift.png"></image>
					</template>
				</u-section>
				<scroll-view :scrollTop="scrollTop" :scrollY="true" class="shareList" 
				scroll-with-animation @scroll="scroll">
					<u-swipe-action :index="index" v-for="(item, index) in shareList" 
					:key="item.id" @click="handleClick" bgColor="#3e3256" @content-click="contentClick"
					:options="swipeOptions">
						<view class="share-item" :class="currentClickIndex===index?'change-morphology':''">
							<view class="si-left">
								<u-lazy-load border-radius="16" class="sil-image" :height="currentClickIndex===index? 200 : 140"
								:image="getImagePath(item.path)" @click.native.stop="previewImage(item.path)"></u-lazy-load>
							</view>
							<view class="si-right">
								<text :style="{color: statusList[item.reviewStatus]?statusList[item.reviewStatus].color:'#61affe'}">
									{{ statusList[item.reviewStatus]?statusList[item.reviewStatus].name:'未知' }}
								</text>
								<text>{{ dateFormat(item.createtime) }}</text>
							</view>
						</view>
					</u-swipe-action>
					<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
				</scroll-view>
			</view>
		</view>
		<view @click="goTop">
			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }" 
			:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
		</view>
		<u-select v-model="showSift" :list="statusList" @confirm="selectSift" :defaultValue="[siftIndex]"
		confirm-color="#94d500" labelName="name" valueName="value"></u-select>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import configService from '@/common/config.service.js';
	import { tools } from '@/utils/utils.js';
	export default {
		data(){
			return{
				// #ifdef MP
				// 微信小程序自定义导航栏参数
				StatusBar: this.StatusBar || 0,
				CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
				// #endif
				// 基础路径
				myFileUrl: configService.fileUrl + 'pixel/my/',
				// 我的页面背景
				background: 'background.png',
				// logo图标
				logo: 'logo-new.png',
				// 顶部距离等级
				topLevel: 0,
				// 是否结束——loadmore加载更多，loading加载中，nomore无更多
				isFinish: 'nomore',
				form: {
					size: 10,
					current: 1,
					reviewStatus: ''
				},
				currentClickIndex: '',
				// 滚动顶部
				scrollTop: 0,
				oldScrollTop: 0,
				// 生成/消费记录
				shareList: [],
				// 单元滑动格删除样式
				swipeOptions: [{text:'删除',style:{backgroundColor:'#dd524d',marginRight: '-2rpx'}}],
				// 状态列表
				statusList: [
					{name: '全部', color: '#61affe', value: ''},
					{name: '审核中', color: '#fca130', value: 1},
					{name: '通过', color: '#49cc90', value: 2},
					{name: '未通过', color: '#f93e3e', value: 3},
					{name: '已推荐', color: '#49cc90', value: 4},
					{name: '取消推荐', color: '#fca130', value: 5},
				],
				// 筛选下标
				siftIndex: 0,
				// 筛选显示
				showSift: false,
			}
		},
		// #ifndef H5
		onPageScroll(e) {
			const level = e.scrollTop/60;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
		},
		// #endif
		
		// #ifdef H5
		mounted(){
			let that = this;
			window.onscroll = function () {
			    //为了保证兼容性，这里取三个值，哪个有值取哪一个
			    //scrollTop就是触发滚轮事件时滚轮的高度
			    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				const level = scrollTop/60;
				if(level<=1) that.topLevel = level;
				else that.topLevel = 1;
			}
		},
		onHide() {
			window.onscroll = null;
		},
		// #endif
		// 上拉刷新
		onPullDownRefresh(){
			try{
				this.init();
			}catch(e){}
			finally{
				uni.stopPullDownRefresh();
			}
		},
		onLoad(options) {
			this.init();
		},
		methods:{
			// 图片格式化
			getImagePath(path){
				if(!path) return;
				let index = path?.indexOf('?');
				let judge = path?.includes(configService.anotherAliUrl);
				return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.staticIp+path);
			},
			// 返回
			back(){
				uni.navigateBack();
			},
			// 滚动回顶部
			goTop() {
				this.scrollTop = this.oldScrollTop;
				this.$nextTick(()=>{
				    this.scrollTop = 0;
				});
			},
			// 滚动监听
			scroll(e){
				this.oldScrollTop = e.detail.scrollTop;
			},
			// 时间格式化
			dateFormat(time){
				let date = new Date(time);
				let month = date.getMonth()+1,
				day = date.getDate(),
				hour = date.getHours(),
				minute = date.getMinutes(),
				second = date.getSeconds();
				return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
			},
			// 点击按钮
			async handleClick(itemIndex, functionIndex){
				// 删除
				if(functionIndex === 0) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: `是否确认删除该作品发布？`,
						confirmColor: '#94d500',
						success: async (res) => {
							if (res.confirm) {
								let res = await that.$api.deleteReleases(that.shareList[itemIndex].id);
								if(res?.success){
									that.currentClickIndex = '';
									that.shareList.splice(itemIndex, 1);
									that.$refs.uToast.show({type:'success',title: "发布记录删除成功!"});
								}else{
									that.$refs.uToast.show({type:'error',title: "发布记录删除失败!"});
								}
							}
						}
					});
				}
			},
			// 内容点击
			contentClick(index){
				this.currentClickIndex = this.currentClickIndex===index ? '' : index;
			},
			// 预览图片
			previewImage(path){
				tools.methods.lookImage(0,[this.getImagePath(path)]);
			},
			// 加载更多
			getMore(){
				if(this.isFinish === 'nomore') return;
				this.form.current++;
				this.getShareList();
			},
			// 获取生产记录列表
			async getShareList(){
				this.isFinish = 'loading';
				let res = await this.$api.getReleases(this.form);
				if(res?.success){
					const { records, size, total, current } = res.data;
					if(current === 1) this.shareList = records;
					else this.shareList.push(...records);
					this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
				}else{
					this.$refs.uToast.show({type:'error',title: "发布记录获取失败!"});
					this.isFinish = 'loadmore';
				}
			},
			// 初始化
			init(){
				this.form = {size: 10, current: 1, reviewStatus: ''};
				this.getShareList();
			},
			// 筛选
			selectSift(e){
				const value = e[0].value;
				this.siftIndex = value === '' ? 0 : value;
				this.form = {size: 10, current: 1, reviewStatus: value};
				this.currentClickIndex = '';
				this.getShareList();
			},
		}
	}
</script>

<style scoped lang="scss">
.share-detail{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	// #ifdef APP || MP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.sdt-top{
		// #ifdef APP
		.app-top{
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}
		// #endif
		.mobile-logo{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.back{
				margin-left: 35rpx;
				margin-top: 5rpx
			}
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;
			image{
				width: 200rpx;
				height: 45rpx;
			}
			// .u-icon{
				
			// }
		}
	}
	.detail-content{
		margin: 120rpx 20rpx 32rpx;
		padding: 34rpx 25rpx 20rpx;
		background-color: rgba(160, 160, 160, 0.1);
		border-radius: 16rpx;
		.shareList{
			margin: 30rpx 0;
			width: 100%;
			height: 76vh;
			.share-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				margin: 20rpx;
				.si-left{
					transition: 0.3s;
					width: 140rpx;
					height: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.sil-image{
						width: 140rpx;
						height: 140rpx;
					}
				}
				.si-right{
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					height: 140rpx;
					justify-content: space-around;
					color: #b3a0da;
					text{
						margin-right: 20rpx;
					}
				}
			}
			.change-morphology{
				.si-left{
					width: 100%;
					height: 100%;
					transition: 0.5s;
					.sil-image{
						width: 200rpx;
						height: 200rpx;
					}
				}
				.si-right{
					width: 100%;
					align-items: center;
					justify-content: center;
					text{
						margin-bottom: 10rpx;
						margin-right: 0rpx;
					}
				}
			}
		}
		.dc-sift{
			width: 50rpx;
			height: 50rpx;
			margin-bottom: -5rpx;
			&:active{
				opacity: 0.8;
			}
		}
	}
}
::v-deep .u-swipe-action{
	border-radius: 10rpx;
	margin: 0 0 20rpx;
}
</style>