<template>
	<view class="mobile-work">
		<!-- #ifdef APP -->
		<view class="app-top" :style="{ height: CustomBar+2+'rpx',
		background: topLevel===0? 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)' : `rgba(255, 255, 255,${topLevel})` }"></view>
		<view :style="{ height: CustomBar+'rpx',background: 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)'}"></view>
		<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`,marginTop:  CustomBar+2+'rpx'}">
		<!-- #endif -->
		<!-- #ifndef APP -->
		<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
		<!-- #endif -->
			<image :src="fileUrl+logo"></image>
		</view>
		<view class="mw-top" :style="{backgroundImage: `url(${fileUrl+topBackground})`}">
			<view class="mwt-one">
				<view class="mwto-item" :style="current===index ? {backgroundImage: `url(${fileUrl+selectBottom})`,
				color: `rgba(33,33,33,1)`}:{}" v-for="(item,index) in selectList" :key="index" @click="changeSelect(index)">
					{{ item }}
					<image v-show="current===index" :src="fileUrl+blackStar" class="mwto-star"></image>
				</view>
			</view>
			<view class="mwt-two">
				<view class="mwtt-num">
					<u-count-to autoplay color="#ff4269" fontSize="100" bold 
					:startVal="startVal" :endVal="current===0? collectCount:workCount"></u-count-to>
					<image :src="fileUrl+redStar" class="mwtt-star"></image>
				</view>
				<view class="mwtt-unit">
					件{{ current===0? '藏':'作' }}品
				</view>
			</view>
		</view>
		<view class="mw-content">
			<view class="show-work">
				<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in current===0?collectList:workList" :key="index">
					<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.delete" @click.stop="deleteCollect(item,index)"></image>
					<image class="work-picture" :src="item.picture" mode="widthFix"></image>
					<view class="sign-text">{{ siftList.length?siftList[item.type].label : '暂无' }}</view>
					<image class="sign" :src="fileUrl+sign"></image>
					<image class="compare-sign" mode="widthFix" :src="item.compare"></image>
				</view>
			</view>
			<!-- 下面这里等后端有了之后，用isFinish判断 -->
			<view class="last-tip">
				~~ 已加载全部 ~~
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
export default {
	props: {
		topLevel:{
			type: Number,
			default: 0
		},
		siftList:{
			type: Array,
			default: []
		}
	},
	data(){
		return{
			// 基础路径
			fileUrl: configService.fileUrl + 'pixel/',
			// logo图标
			logo: 'home/logo.png',
			// 筛选项
			selectList: ["我的藏品", "我的创作"],
			// 顶部背景
			topBackground: 'work/background.png',
			// 选择黑星图片
			blackStar: 'work/black-star.png',
			// 选择白底图片
			selectBottom: 'work/select-bottom.png',
			// 选择白底图片
			redStar: 'work/red-star.png',
			// 选择白底图片
			trash: 'work/trash.png',
			// 当前选项
			current: 0,
			// 收藏数
			collectCount: 55,
			// 作品数
			workCount: 15,
			// 收藏作品列表
			collectList:[
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/af29f44ad5abf333f52f7a0e9dd65260.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/1b6ef6597fd59c8af1b50dc2658f431e.jpg',
					type: 1,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e6aa2563a3a58064b9d5144be60f6320.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/f1f0a1a6c08a026d90f396294b57f96b.png',
					type: 7,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png',
					type: 7,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png',
					type: 6,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png',
					type: 2,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg',
					type: 4,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png',
					type: 7,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png',
					type: 6,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png',
					type: 2,
				},
				{
					picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png',
					compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg',
					type: 4,
				}
			],
			// 我的创作
			workList:[
				
			],
			// 标签图标
			sign: 'home/typelam.png',
			// 点击次数
			touchNum: 0,
			// 数字滚动开始数字
			startVal: 0,
		}
	},
	methods:{
		// 初始化
		init(){
			
		},
		// 切换选项
		changeSelect(index){
			this.current = index;
			this.startVal = index===0?this.workCount:this.collectCount;
		},
		// 监听单双击，单击-预览图片、双击-显示删除图标
		maskTouchend(item,index){
			this.touchNum ++;
			setTimeout(()=>{
				if(this.touchNum == 1){
					tools.methods.lookImage(0,[item.picture,item.compare]);
				}
				if(this.touchNum >= 2){
					const result = item.delete?0:1;
					if(result === 0){
						// 添加淡出的class样式
						item.display = 1;
						this.$forceUpdate();
						// 下面的操作应该替换为请求后端数据后，再停止旋转
						// 模拟刷新操作，这里用setTimeout模拟  
						setTimeout(() => {  
						    // 移除淡出类
							item.delete = result;
							item.display = 0;
							this.$forceUpdate();
						}, 800); 
					}else{
						item.delete =  result;	
						this.$forceUpdate();
					}
				}
				this.touchNum = 0;
			},250)
		},
		// 取消收藏
		deleteCollect(item,index){
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认取消收藏该作品？',
				confirmColor: '#94d500',
				success: function (res) {
					if (res.confirm) {
						that.$refs.uToast.show({type:'success',title: "已取消收藏!"});
					}
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
.mobile-work{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	// #ifdef APP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
	}
	// #endif
	.mobile-logo{
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		z-index: 81;
		padding: 15rpx 0;
		image{
			width: 200rpx;
			height: 45rpx;
		}
	}
	.mw-top{
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		background-size: cover;
		.mwt-one{
			margin-top: 65rpx;
			display: flex;
			.mwto-item{
				font-size: 35rpx;
				font-weight: bold;
				color: rgba(33,33,33,0.8);
				margin-left: 40rpx;
				position: relative;
				padding: 5rpx 10rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: bottom;
				background-size: 100%;
				transition: 0.5s;
				.mwto-star{
					position: absolute;
					right: -16rpx;
					top: -7rpx;
					width: 30rpx;
					height: 34rpx;
				}
			}
		}
		.mwt-two{
			display: flex;
			margin-left: 65rpx;
			margin-top: 32rpx;
			align-items: flex-end;
			.mwtt-num{
				font-weight: bolder;
				margin-right: 18rpx;
				position: relative;
				.mwtt-star{
					position: absolute;
					right: -30rpx;
					top: -10rpx;
					width: 30rpx;
					height: 34rpx;
				}
			}
			.mwtt-unit{
				font-size: 31rpx;
				font-weight: bold;
				color: rgba(33,33,33,0.8);
				line-height: 80rpx;
			}
		}
	}
	.mw-content{
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		z-index: 80;
		flex: 1;
		width: 100%;
		margin-top: -35rpx;
		border-top-right-radius: 36rpx;
		border-top-left-radius: 36rpx;
		background-color: #1a1929;
		.show-work{
			margin: 20rpx 45rpx 0;
			column-count:2;
			-moz-column-count:2; /* Firefox */
			-webkit-column-count:2; /* Safari 和 Chrome */
			column-gap: 1em;
			-moz-column-gap: 1em;
			-webkit-column-gap: 1em; 
			.work-item{
				-webkit-column-break-inside: avoid;
				break-inside: avoid; /*防止断点*/
				// margin-bottom: 0.5em;
				position: relative;
				padding-top: 30rpx;
				.work-picture{
					border: 0.1em solid #d5ff00;
					border-radius: 30rpx;
				}
				.sign{
					border: none;
					border-radius: 0;
					position: absolute;
					top: 1.7em;
					left: 0.6em;
					width: 142rpx;
					height: 47rpx;
				}
				.sign-text{
					color: #ffffff;
					font-size: 28rpx;
					position: absolute;
					top: 1.8em;
					left: 0.9em;
					z-index: 1;
				}
				.compare-sign{
					position: absolute;
					left: 0;
					bottom: 0.2em;
					width: 120rpx;
					border: 0.1em solid #d5ff00;
					border-radius: 20rpx;
					box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
				}
				.trash{
					animation-duration: 0.8s;
					animation-fill-mode: both;
					backface-visibility: visible !important;
					animation-name: showTrash;
					width: 100rpx;
					height: 110rpx;
					position: absolute;
					right: -22rpx;
					margin-top: -30rpx;
					z-index: 1;
				}
				.hideTrash {
				    animation-duration: calc(1s * 0.75);
				    backface-visibility: visible !important;
				    animation-name: hideTrash;
				}
			}
		}
		.last-tip{
			color: #d5ff00;
			font-size: 28rpx;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 160rpx;
		}
	}
}
@keyframes showTrash {
	from {
	        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
	        animation-timing-function: ease-in;
	        opacity: 0;
	    }
	
	    40% {
	        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
	        animation-timing-function: ease-in;
	    }
	
	    60% {
	        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	        opacity: 1;
	    }
	
	    80% {
	        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	    }
	
	    to {
	        transform: perspective(400px);
	    }
}
@keyframes hideTrash {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
</style>