<template>
	<uni-section title="定制模板列表" type="line">
		<view class="preview-container">
			<view v-for="(item, index) in previewData" :key="item.id">
				<view class="preview-list">
					<view class="img"><image :src="baseURL + downUrl + item.cover" mode="aspectFill" class="preview-img" /></view>
					<view class="preview-content">
						<text>创建时间: {{ item.createTime }}</text>
						<view class="options">
							<view size="mini" @tap="preview(item.id)" class="box">预览</view>
							<view @tap="preEdit(item.id)" class="box">编辑</view>
							<view size="mini" @tap="preDelete(item.id)" class="box">删除</view>
						</view>
					</view>
				</view>
				<view v-if="index != previewData.length - 1" class="divider"></view>
			</view>
		</view>
	</uni-section>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import { baseURL } from '@/services/request';
import { getPageComponent, deletePageComponent } from '@/services/api';

let downUrl = '/wx/storage/fetch/'
let videoList = ref();
let imageArr = ref();
let imageValue = ref([] as any);

let emits = defineEmits(['initHavePage']);
// 模板列表
let previewData = ref();

// 模板子列表数据
let pageData = ref();

// 删除模板列表
let preDelete = async (id: number) => {
	uni.showModal({
		cancelText: '取消',
		confirmText: '确认',
		content: '确认删除图片？',
		success: async (res: any) => {
			if (res.confirm) {
				let data: any = await deletePageComponent({ id });
				if (data.data.errno == 0) emits('initHavePage');
			}
		}
	});
};

// 获取预览数据
let preview = async (id: number) => {
	let res: any = await getPageComponent({ pageId: id });
	if (res.statusCode == 200) {
		pageData.value = res.data;
		uni.navigateTo({
			url: `./preview?pageData=${JSON.stringify(pageData.value)}`
		});
	}
};

// 编辑模板数据
let preEdit = async (id: number) => {
	let res: any = await getPageComponent({ pageId: id });
	if (res.statusCode == 200) {
		pageData.value = res.data;
		uni.navigateTo({
			url: `./uploadImageVideo?pageData=${JSON.stringify(pageData.value)}&type=${JSON.stringify('edit')}&templateId=${JSON.stringify(id)}`
		});
	}
};

// 替换图片
let replacevideo = (index: number) => {
	uni.showModal({
		cancelText: '取消',
		confirmText: '确认',
		content: '确认替换图片？',
		success: (res: any) => {
			if (res.confirm) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res: any) {
						videoList.value[index]['path'] = res.tempFiles[0].path;
					}
				});
			}
		}
	});
};

let initHavePage = async () => {
	uni.$on('previewData', (data: any) => {
		previewData.value = data.previewData;
	});
};
initHavePage();

onBackPress(() => {
	uni.navigateBack();
});
</script>

<style lang="scss" scoped>
.preview-container {
	padding: 10rpx;
	border: 2px solid #dfdfdf;
	.preview-list {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 100px;
		padding: 10rpx 0;
		.img {
			width: 130px;
			height: 100%;
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			.preview-img {
				width: 100%;
				height: 100%;
				margin-right: 100rpx;
				border-radius: 10rpx;
			}
		}
		.preview-content {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 20rpx 0;
			text {
				font-size: 12px;
				color: #ccc;
				margin-bottom: 20%;
			}
			.options {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				.box {
					width: 100rpx;
					height: 40rpx;
					text-align: center;
					line-height: 42rpx;
					// padding: 14rpx;
					border: 1px solid #ccc;
					border-radius: 7px;
					margin-right: 10rpx;
				}
			}
		}
	}
	.divider {
		border: 0.5px solid #dfdfdf;
	}
}
</style>
