<template>
	<view class="page-container">
		<view class="header-bg">
			<view class="header-bg-upper"></view>
		</view>
		<view class="status-bar"></view>
		<view class="page-head">
			<view class="page-head-btn" @click="back">
				<uni-icons type="back" size="26"></uni-icons>
			</view>
			<view class="page-head-title">已付费视频</view>
			<!-- <view class="page-head-btn" @click="edit">
        <view class="text-btn">{{ isEdit ? '取消' : '管理' }}</view>
      </view> -->
		</view>
		<view class="favorites-container">
			<scroll-view
				scroll-y
				refresher-enabled="true"
				refresher-background="none"
				:refresher-threshold="100"
				:refresher-triggered="refreshTriggered"
				@refresherrefresh="refresh"
				@scrolltolower="getData"
			>
				<view class="favorites-list">
					<checkbox-group @change="changeCheck">
						<label v-for="(vod, index) in list" :key="index" class="favorites-item align-center" @click="click(vod)">
							<checkbox v-if="isEdit" color="#09a96a" :value="vod.fav_id + ''" :checked="vod.is_checked" />
							<view class="vod-image">
								<vod-image :src="vod.data && vod.data.vod_pic" />
							</view>
							<view class="vod-info">
								<view v-if="vod.data" class="vod-name">{{ vod.data.vod_name }}</view>
								<view v-else class="vod-name vod-name-gray">该影片已被删除</view>
								<view v-if="vod.data" class="vod-progress">{{ vod.data.vod_remarks }}</view>
								<view class="vod-time">{{ formatTime(vod.fav_time) }}</view>
							</view>
						</label>
					</checkbox-group>
				</view>
				<u-empty v-if="isEmpty" icon="/static/images/empty.svg" width="240" />
				<view v-else class="load-more">
					<u-loadmore :status="loadStatus" loading-icon="semicircle" :line="true" />
				</view>
			</scroll-view>
			<view v-if="isEdit" class="favorites-bottom align-center">
				<u-button :plain="true" shape="circle" text="全选" @click="selectAll"></u-button>
				<u-button type="error" :plain="true" shape="circle" :disabled="loading" :loading="loading" text="删除" @click="delFav"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import vodImage from '@/components/vod-image.vue';
import { app } from '@/utils/api';

export default {
	components: {
		vodImage
	},
	data() {
		return {
			list: [],
			checked: [],
			page: 1,
			loadStatus: 'loadmore',
			refreshTriggered: false,
			isEdit: false,
			loading: false,
			isEmpty: false
		};
	},
	async onLoad() {
		await this.$onLaunched;
		const token = getApp().globalData.userToken;
		if (!token) {
			uni.redirectTo({
				url: '/pages/user/login'
			});
		} else {
			this.getData();
		}
	},
	methods: {
		async getData() {
			if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
				return;
			}
			this.loadStatus = 'loading';
			await app
				.vodBuyLog(this.page)
				.then((res) => {
					if (res.code == 1) {
						if (res.data.count == 0) {
							this.isEmpty = true;
						}
						if (res.data.page < res.data.page_total) {
							this.loadStatus = 'loadmore';
							this.page++;
						} else {
							this.loadStatus = 'nomore';
						}
						this.list = this.list.concat(res.data.list);
					} else {
						this.loadStatus = 'loadmore';
					}
				})
				.catch((e) => {
					this.loadStatus = 'loadmore';
				});
			this.refreshTriggered = false;
		},
		async delFav() {
			if (this.checked.length > 0) {
				const ids = this.checked.join(',');
				this.loading = true;
				await app
					.delFav(ids)
					.then((res) => {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 3000
						});
						if (res.code === 1) {
							this.list = this.list.filter((item) => {
								return !this.checked.includes(item.fav_id + '');
							});
							this.checked = [];
							if (this.loadStatus == 'nomore' && this.list.length == 0) {
								this.isEmpty = true;
							}
						}
					})
					.catch((e) => {});
				this.loading = false;
			}
		},
		refresh() {
			this.refreshTriggered = true;
			this.isEmpty = false;
			this.loadStatus = 'loadmore';
			this.page = 1;
			this.list = [];
			this.getData();
		},
		edit() {
			this.isEdit = !this.isEdit;
		},
		selectAll() {
			this.list.map((item) => {
				if (!this.checked.includes(item.fav_id + '')) {
					this.checked.push(item.fav_id + '');
					this.$set(item, 'is_checked', true);
				}
			});
		},
		changeCheck(e) {
			this.checked = e.detail.value;
			this.list.map((item) => {
				if (this.checked.includes(item.fav_id + '')) {
					this.$set(item, 'is_checked', true);
				} else {
					this.$set(item, 'is_checked', false);
				}
			});
		},
		click(data) {
			if (this.isEdit === false && data.data) {
				// #ifdef APP
				uni.navigateTo({
					url: '/pages/video/video-app?id=' + data.data.vod_id
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/video/video?id=' + data.data.vod_id
				});
				// #endif
			}
		}
	}
};
</script>

<style lang="scss">
.page-container {
	height: 100%;
	background-color: $uni-bg-color;
	.header-bg {
		height: 100px;
	}
	.favorites-container {
		height: calc(100% - var(--safe-top) - 44px);
		display: flex;
		flex-direction: column;
		uni-scroll-view {
			height: 0;
			flex: 1 1 0%;
			.favorites-list {
				padding: 0 15px;
				.favorites-item {
					margin: 15px 0;
					uni-checkbox {
						margin-right: 8px;
					}
					.vod-image {
						width: 130px;
						height: 72px;
						margin-right: 10px;
						background-color: #171929;
						&::before {
							display: none;
						}
					}
					.vod-info {
						flex: 1 1 0%;
						.vod-name {
							color: #fff;
							font-size: 16px;
							font-weight: 700;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							&.vod-name-gray {
								color: #ccc;
							}
						}
						.vod-progress,
						.vod-time {
							margin-top: 6px;
							font-size: 12px;
							color: #60606c;
						}
					}
				}
			}
			.u-empty {
				padding-top: 120px;
			}
		}
		.favorites-bottom {
			height: 60px;
			padding: 0 10px;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			.u-button {
				flex: 1 1 0%;
				margin: 0 5px;
				&::before {
					display: none;
				}
			}
		}
	}
}
</style>
