<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">
				<view class="text-btn" @click="deleteMode">{{ navRightTitle }}</view>
			</view>
		</view>
		<view class="download-tabs">
			<u-tabs
				:line-width="0"
				:line-height="0"
				line-color="#000"
				:inactiveStyle="{ color: '#fff', fontSize: '16px' }"
				:item-style="{ height: '36px', padding: '0 10px' }"
				:active-style="{ fontSize: '18px', fontWeight: '500', color: '#DA2538' }"
				:list="tabs"
				:current="tabsIndex"
				@click="tabsClick"
			></u-tabs>
		</view>
		<!-- <view class="download-container">
      <scroll-view style="height:100%;" scroll-y="true">
        <view class="download-list">
          <u-empty icon="/static/images/empty.svg" width="240" />
        </view>
      </scroll-view>
    </view> -->
		<swiper :current="tabsIndex" @change="swiperChange" class="swiper-container">
			<swiper-item>
				<downloading-class ref="downloadingClass" />
			</swiper-item>
			<swiper-item>
				<download-class ref="downloadClass" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import downloadingClass from './downloading-class.vue';
import downloadClass from './download-class.vue';
export default {
	components: {
		downloadClass,
		downloadingClass
	},
	data() {
		return {
			tabs: [
				{ id: 1, name: '下载中' },
				{ id: 2, name: '历史下载' }
			],
			tabsIndex: 0,
			isDeleteModel: false,
			navRightTitle: '管理'
		};
	},
	watch: {
		tabsIndex: {
			handler() {
				this.$nextTick(() => {
					this.loadData();
				});
			}
		}
	},
	onShow() {
		this.$nextTick(() => {
			this.loadData();
		});
	},
	methods: {
		tabsClick(data) {
			if (this.tabsIndex != data.index) {
				this.tabsIndex = data.index;
			}
		},
		swiperChange(e) {
			this.tabsIndex = e.detail.current;
		},
		deleteMode() {
			this.isDeleteModel = !this.isDeleteModel;
			this.navRightTitle = this.isDeleteModel ? '取消' : '管理';
			this.$refs.downloadClass.showDelete(this.isDeleteModel);
			this.$refs.downloadingClass.showCancel(this.isDeleteModel);
		},
		loadData() {
			if (this.tabsIndex == 1) {
				this.$refs.downloadClass.init();
			} else {
				this.$refs.downloadingClass.init();
			}
		}
	}
};
</script>

<style lang="scss">
.page-container {
	height: 100%;
	background-color: $uni-bg-color;
	.header-bg {
		height: 100px;
	}
	.download-tabs {
		margin: 10px 0;
	}
	.download-container {
		height: calc(100% - var(--safe-top) - 94px);
		.u-empty {
			padding-top: 100px;
		}
	}

	.swiper-container {
		height: calc(100% - var(--safe-top) - 94px);
		display: flex;
		flex-direction: column;
	}
}
</style>
