<template>
	<view class="download-item">
		<view class="download-info">
			<view class="info">
				<view class="download-name">{{ getRelFileName(item.options.filename) }}</view>
				<view class="progress-box">
					<progress :percent="progress" activeColor="#DA2538"  font-size="13" show-info stroke-width="3" />
				</view>
			</view>
			<!-- <view  class="download-cancel" @click.stop="cancelTask">
				<u-icon  size="16" name="trash-fill" color="#c80000"></u-icon>
			</view> -->
			<view class="download-cancel" v-if="isDownload && item.state!==5" @click.stop="pauseDownload">
				<u-icon name="pause-circle-fill" size="20" color="#fff" ></u-icon>
			</view>
			<view class="download-cancel" v-else @click.stop="resumeDownload">
				<u-icon name="play-right-fill" size="20" color="#fff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			item: {},
			progress: 0,
		},
		data() {
			return {
				isCancel: false,
				isDownload: true
			}
		},
		methods: {
			showCancel(isCancel) {
				this.isCancel = isCancel
			},
			getRelFileName(fileName) {
				let relName = fileName
				var index = fileName.lastIndexOf("/");
				relName = fileName.substring(index + 1, fileName.length);
				return relName
			},
			cancelTask() {
				this.$emit("CancelTask", this.item.id)
			},
			pauseDownload() {
				this.isDownload = false
				this.$emit("pauseDownload", this.item.id)
			},
			resumeDownload() {
				this.isDownload = true
				this.$emit("resumeDownload", this.item.id)
			},
		}
	};
</script>

<style lang="scss">
	.download-item {
		padding: 10px 15px;
		width: 100%;
		display: flex;
		align-items: center;

		.download-info {
			padding: 10px 10px;
			background-color: #171929;
			border-radius: 6px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			overflow: hidden;
			flex: 1;

			.info {
				flex: 1 1 0%;
				overflow: hidden;

				.download-name {
					font-size: 16px;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #fff;
				}

				.progress-box {
					color: #fff;
					padding: 15px 20px 0px 0px;
				}
			}

			.download-cancel {
				color: red;
				margin-left: 10px;
			}
		}
	}
</style>