<template>
	<view class="page-container">
		<scroll-view style="height: 100%" scroll-y="true">
			<view class="download-list">
				<scroll-view scroll-x scroll-with-animation :scroll-animation-duration="300"
					:disable-programmatic-animation="true">
					<checkbox-group class="item-container" @change="changeCheck">
						<label v-for="(item, index) in fileArr" :key="index" class="history-item align-center">
							<checkbox v-if="isDeleteMode" color="#DA2538" :value="item.name"
								:checked="item.is_checked" />
							<download-item v-on:DeleteFile="deleteFile" :item="item" showDetail="true"></download-item>
						</label>
					</checkbox-group>
				</scroll-view>
				<u-empty v-if="isEmpty" icon="/static/images/empty.svg" width="240" />
			</view>
		</scroll-view>

		<view v-if="isDeleteMode" class="history-bottom align-center">

			<u-button :plain="true" shape="circle" text="全选" @click="selectAll"></u-button>
			<u-button type="error" :plain="true" shape="circle" text="删除" @click="deldownload"></u-button>
		</view>
	</view>
</template>

<script>
	import fileManager from "@/utils/fileManager.js";
	import downloadItem from '@/components/download-item.vue'
	export default {
		components: {
			downloadItem,
		},
		data() {
			return {
				isEmpty: false,
				loaded: false,
				fileArr: [],
				isDeleteMode: false,
				checked: []
			};
		},
		methods: {
			selectAll() {
				this.fileArr.map((item, index) => {
					if (!this.checked.includes(item.name)) {
						this.checked.push(item.name)
						item.is_checked = true
					}
				})
			},

			async deldownload() {
				if (this.checked.length > 0 && this.fileArr.length > 0) {
					const indexesToDelete = [];
					for (const [i, item] of this.fileArr.entries()) {
						if (item.is_checked === true) {
							await fileManager.deleteFileWithPath(item.fullPath).then((res) => {
								let file = item
								fileManager.clearSuccessFileName(file.name)
								let value = JSON.parse(uni.getStorageSync('Download-Success'))
								for (let i = 0; i < value.length; i++) {
									if (value[i] == item.localPath) {
										value.splice(i, 1)
									}
								}
								uni.setStorageSync('Download-Success', JSON.stringify(value))
							})
							indexesToDelete.push(i);
						}
					}

					// 从后往前删除元素，以避免索引变化影响删除操作
					for (let i = indexesToDelete.length - 1; i >= 0; i--) {
						this.fileArr.splice(indexesToDelete[i], 1);
					}

					this.checked = [];
				}
			},
			changeCheck(e) {

				this.checked = e.detail.value
				this.fileArr.map(item => {
					if (this.checked.includes(item.name)) {
						item.is_checked = true
					} else {
						item.is_checked = false
					}
				})
			},
			showDelete(isDeleteMode) {
				this.isDeleteMode = isDeleteMode
				// for (let i = 0; i < this.fileArr.length; i ++) {
				// 	this.$refs["downloadItem"+i][0].showDelete(this.isDeleteMode)
				// }
			},

			async deleteFile(fullPath, localPath) {
				await fileManager.deleteFileWithPath(fullPath).then((res) => {
					for (let i = 0; i < this.fileArr.length; i++) {
						let file = this.fileArr[0]
						if (file.fullPath == fullPath) {
							this.fileArr.splice(i, 1)
							console.log(file.name)
							fileManager.clearSuccessFileName(file.name)
						}
					}

					let value = JSON.parse(uni.getStorageSync('Download-Success'))
					for (let i = 0; i < value.length; i++) {
						console.log(value[i]);
						if (value[i] == localPath) {
							value.splice(i, 1)
							console.log(value);
						}
					}
					uni.setStorageSync('Download-Success', JSON.stringify(value))

				})
			},
			async init() {
				await fileManager.getSuccessVideoFiles().then((res) => {
					console.log(res);
					this.fileArr = res

					this.isEmpty = res.length == 0
				});
			},
		},
	};
</script>

<style lang="scss">
	.page-container {
		height: calc(100% - var(--safe-top) - 94px);
		background-color: $uni-bg-color;

		.u-empty {
			padding-top: 100px;
		}

		.download-list {
			padding: 15px;
		}

		.history-bottom {
			height: 60px;
			width: 100%;
			padding: 0 10px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			position: fixed;
			bottom: 0px;

			.u-button {
				flex: 1 1 0%;
				margin: 0 5px;

				&::before {
					display: none;
				}
			}
		}
	}
</style>