<template>
	<div
		ref="indexRef"
		:class="prefixCls">
		<div :class="`${prefixCls}-banner`">
			<a-carousel>
				<a-carousel-item
					v-for="item in images"
					@click="jumpUrl(item)">
					<a-image
						:src="item.imageUrl"
						:preview="false"
						fit="cover"
						width="100%"
						height="100%" />
				</a-carousel-item>
			</a-carousel>
		</div>
		<div :class="`${prefixCls}-wrap`">
			<a-row :gutter="10">
				<a-col
					v-for="item in dataList"
					:xl="6"
					:xs="12">
					<div :class="`${prefixCls}-item`">
						<div
							:class="`${prefixCls}-item-image`"
							@click="checkPermission(item.result)">
							<button
								v-if="item.type == 21"
								:class="`${prefixCls}-item-play`"></button>
							<mf-video
								:width="292"
								:height="320"
								:controls="false"
								:modelValue="item.result"
								v-if="item.type == 21" />
							<a-image
								v-else
								fit="cover"
								:preview="false"
								:height="320"
								:src="item.result" />
							<!-- <div :class="`${prefixCls}-item-shadow`">
								
							</div> -->
							<mf-button
								type="primary"
								@click.stop="doSame(item)">
								{{ $t('common.doSame') }}
							</mf-button>
						</div>
						<!-- 	<div :class="`${prefixCls}-item-content`">
							<div :class="`${prefixCls}-item-title`">
								{{ item.title }}
							</div>
							<div :class="`${prefixCls}-item-tags`">
								<div
									:class="`${prefixCls}-item-tag`"
									v-for="tag in item.tags">
									#{{ tag }}
								</div>
							</div>
						</div> -->
					</div>
				</a-col>
			</a-row>
			<div
				ref="loadMoreRef"
				class="loading">
				{{
					loading
						? $t('common.loadingText')
						: hasMore
						? ''
						: $t('common.noMore')
				}}
			</div>
		</div>
		<mf-preview
			:visible="previewVisible"
			:url="previewUrl"
			:loading="previewLoading"
			@cancel="cancelPreview" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			prefixCls: 'index',
			dataList: [],
			images: [],
			pagination: {
				total: 0,
				pageNum: 1,
				pageSize: 12,
				layout: 'total, sizes, prev, pager, next'
			},
			previewUrl: '',
			previewVisible: false,
			previewLoading: false,
			loading: false,
			hasMore: true,
			reachBottom: false
		}
	},
	mounted() {
		this.getBanner()
		this.getData()
		this.$refs.indexRef.addEventListener('scroll', this.handleScroll)
	},
	beforeUnmount() {
		this.$refs.indexRef.removeEventListener('scroll', this.handleScroll)
	},
	methods: {
		doSame(item) {
			if (item.type == 21) {
				this.$router.push(`/fast-video?text=${item.text}`)
			} else if (item.type == 1) {
				this.$router.push(`/fast-image?text=${item.text}`)
			} else if (item.type == 11) {
				this.$router.push(`/image-to-image`) //?text=${item.text}
			} else if (item.type == 12) {
				this.$router.push(`/image-to-image?type=2&text=${item.text}`)
			} else if (item.type == 13) {
				this.$router.push(
					`/change-face` //?text=${item.text}
				)
			}
		},
		cancelPreview() {
			this.previewVisible = false
			this.previewUrl = ''
			this.previewLoading = false
		},
		async checkPermission(url) {
			let res = await this.$axios({
				url: '/api/user/checkIsStandard',
				method: 'GET'
			}).then((res) => {
				return { result: res.result, totalAmount: res.totalAmount }
			})
			if (!res.result) {
				this.$message.warning(
					this.$t('common.permissionError', {
						total: res.totalAmount
					})
				)
				return
			}
			this.viewDetail(url)
		},
		viewDetail(url) {
			let suffix = this.$file.getSuffix(url)
			if (['jpeg', 'jpg', 'png'].indexOf(suffix) > -1) {
				this.$viewerApi({
					options: {
						initialViewIndex: 0,
						toolbar: true
					},
					images: [url]
				})
			} else if (['mp4', 'mov'].indexOf(suffix) > -1) {
				this.previewUrl = url
				this.previewVisible = true
			} else {
				if (url.startsWith('cgt-')) {
					this.viewVideo(url)
				} else {
					window.open(url)
				}
			}
		},
		viewVideo(videoId) {
			if (!videoId) return
			this.previewVisible = true
			this.previewLoading = true
			this.$axios({
				url: `api/ai/${videoId}`,
				method: 'GET'
			})
				.then((res) => {
					this.previewLoading = false
					if (res.code == 200) {
						if (res.data.status == 'succeeded') {
							this.previewUrl = res.data.content.video_url
						} else {
							this.$message.warning(
								this.$t('common.videoLoadingText')
							)
						}
					}
				})
				.catch((_) => {
					this.previewLoading = false
				})
		},
		jumpUrl(item) {
			if (item.type == 0) {
				this.$router.push(item.jumpUrl)
			} else if (item.type == 1) {
				window.open(item.jumpUrl)
			}
		},
		getBanner() {
			this.$axios({
				url: 'api/banner/getBannerList',
				method: 'GET',
				data: {
					position: 0
				}
			}).then((res) => {
				this.images = res.rows
			})
		},
		handleScroll() {
			let ref = this.$refs.indexRef
			if (!ref || this.loading) return
			const scrollTop = ref.scrollTop
			const clientHeight = ref.clientHeight
			const scrollHeight = ref.scrollHeight
			 const isBottom = scrollTop + clientHeight >= scrollHeight - 50
			 
			if (isBottom && !this.reachBottom) {
				 this.reachBottom = true
				this.loadMore()
			}
			if (!isBottom) {
			    this.reachBottom = false
			  }
		},
		loadMore() {
			if (this.loading) return
			this.pagination.pageNum++
			this.getData(true)
		},
		getData(loadMore = false) {
			if (this.loading || !this.hasMore) return
			if (loadMore) this.loading = true
			this.$axios({
				url: 'api/work/getAiWorkList',
				method: 'GET',
				data: {
					pageNum: this.pagination.pageNum,
					pageSize: this.pagination.pageSize
				}
			})
				.then((res) => {
					this.loading = false
					if (loadMore) {
						this.dataList = this.dataList.concat(res.rows)
					} else {
						this.dataList = res.rows
					}
					this.hasMore = this.dataList.length < res.total
				})
				.catch((_) => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="less" scoped>
.index {
	height: 100%;
	overflow-y: auto;
	padding: 0 20px 30px 20px;

	.loading {
		color: #fff;
		text-align: center;
		margin-top: 20px;
	}

	&-banner {
		width: 100%;
		aspect-ratio: 6 / 1; 
		margin-bottom: 40px;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;

		:deep(.arco-carousel) {
			width: 100%;
			height: 100%;
			&-arrow {
				> div {
					width: 36px;
					height: 36px;
					background-color: rgba(0, 0, 0, 0.3);

					.arco-icon {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}

	&-wrap {
		width: 1200px;
		margin: 0 auto;
	}

	&-item {
		border-radius: 10px;
		overflow: hidden;
		background: #1a1b20;
		height: 320px;
		margin-bottom: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		// border: 1px solid rgba(#e0e0e0, 0.1);

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
			// background-color: rgb(var(--primary-6));

			.arco-image {
				transform: scale(1.1);
			}
		}

		:deep(.arco-image-error) {
			background-color: transparent;
		}
		.arco-image {
			transform: scale(1);
			transition: all 1s;
		}

		&-play {
			width: 50px;
			height: 50px;
			position: absolute;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transition: all 0.4s;
			cursor: pointer;
			font-size: 3em;
			line-height: 1.5em;
			transform: translate(-50%, -50%);
			background-color: rgba(43, 51, 63, 0.7);
			border: 2px solid #fff;
			z-index: 1;

			&:before {
				content: '\f101';
				font-family: VideoJS;
				font-weight: normal;
				font-style: normal;
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30px;
			}
		}

		&-image {
			width: 100%;
			overflow: hidden;
			height: 320px;

			:deep(.arco-image) {
				width: 100%;

				img {
					width: 100%;
				}
			}
		}

		&-title {
			font-size: 14px;
			color: #ffffff;
			margin-top: 14px;
			margin-bottom: 14px;
		}

		&-content {
			padding: 16px 8px;
		}

		.mf-button {
			position: absolute;
			bottom: 0;
			right: 0;
			border-top-left-radius: 10px;
		}

		&-shadow {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.25);
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			pointer-events: none;
			.mf-button {
				border-top-left-radius: 10px;
			}
		}
	}
}

@media (max-width: 576px) {
	.index {
		padding: 0 10px;
		:deep(.arco-carousel) {
			.arco-image {
				height: 100%;
				img {
					height: 100%;
				}
			}
		}

		&-banner {
			margin-bottom: 10px;
		}

		&-wrap {
			width: 100%;
		}

		&-item {
			height: 250px;
			&-image {
				height: 250px;
			}
		}

		.video-js {
			width: 100%;
			height: 250px;
		}
	}
}
</style>
