<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 style="transform:scale(0.7)">
						<radio-group @change="change"><radio value="defValue" :checked="item.check" :disabled="item.check" @click="radioChange(item, index)" /></radio-group>
					</view>
					<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 { onBackPress } from '@dcloudio/uni-app';
import { baseURL } from '@/services/request';
import { getPageComponent, deletePageComponent, customPageChecked } from '@/services/api';

let downUrl = '/wx/storage/fetch/';

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

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

let change = (data: string) => {
	console.log(data);
}

let radioChange = (data: any, i: number) => {
	if (data.check == true) return;
	uni.showModal({
		content: '确认设为默认？',
		success(res) {
			if (res.confirm) {
				console.log('默认');
				customPageChecked({ customPageId: data.id }).then((res: any) => {
					if (res.data.errno == 0) {
						emits('initHavePage');
					}
				});
			} else {
				location.reload()
			}
		}
	});
};

// 删除模板列表
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 initHavePage = async () => {
	uni.$on('previewData', (data: any) => {
		previewData.value = data.previewData.customPage;
		for (let s in previewData.value) {
			if (previewData.value[s].id == data.previewData.checkedId) previewData.value[s]['check'] = true;
			else previewData.value[s]['check'] = false;
		}
		// checkId.value = data.previewData.checkId;
		console.log(previewData.value, 'zzz');
	});
};
initHavePage();

onBackPress(() => {
	uni.navigateBack({
		delta: 0
	});
});
</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>
