<template>
	<view class="xkl-com-bg" style="min-height: calc(100vh - 120rpx);background-color: #F7F7F7;">
		<u-tabs :list="tabData.list" @change="changeCur"></u-tabs>
		<view style="height: 20rpx;"></view>
		<view>
			<view v-for="(item,index) in articleItems" :key="item.id">
				<navigator v-if="item.oa_url" :url="`/pages/article/web?id=${item.id}`"
					style="padding: 10rpx; background-color: #ffffff;border-radius: 10rpx;margin-bottom: 20rpx;">
					<u-image v-if="item.cover" :src="item.cover" width="630rpx" height="353rpx"></u-image>
					<view style="height: 10rpx;"></view>
					<view class="xkl_line1" style="padding: 10rpx;">
						{{item.title}}
					</view>
				</navigator>
				<view v-else-if="item.video"
					style="padding: 10rpx; background-color: #ffffff;border-radius: 10rpx;margin-bottom: 20rpx;">
					<video style="width: 630rpx;height:353rpx" :poster="item.cover" :src="item.video" :direction="90">
					</video>
					<view style="height: 10rpx;"></view>
					<navigator class="xkl_line1" :url="`/pages/article/detail?id=${item.id}`" style="padding: 10rpx;">
						{{item.title}}
					</navigator>
				</view>
				<navigator v-else :url="`/pages/article/detail?id=${item.id}`"
					style="padding: 10rpx; background-color: #ffffff;border-radius: 10rpx;margin-bottom: 20rpx;">
					<u-image v-if="item.cover" :src="item.cover" width="630rpx" height="353rpx"></u-image>
					<view style="height: 10rpx;"></view>
					<view class="xkl_line1" style="padding: 10rpx;">
						{{item.title}}
					</view>
				</navigator>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	let self;
	import {
		getUser,
		setUser
	} from '@/com/storage/auth.js';
	export default {
		data() {
			return {
				tabData: {
					list: []
				},
				articleItems: [],
				loadStatus: 'loadmore',
				search: {
					page: 1,
					cid: 1,
				},
				page: {
					current: 0,
					last_page: 1
				},
			}
		},
		onLoad() {
			self = this;
			self.pageStatus();
		},
		onPullDownRefresh() {
			self.search.page = 1;
			self.articleItems = [];
			self.getArticleItems();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (!self.pageStatus()) {
				return;
			}
			self.loadStatus = 'loading';
			self.search.page = ++self.search.page;
			self.getArticleItems();
		},
		onShow() {
			self.getC();
			self.getArticleItems();
		},
		methods: {
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			changeCur(row) {
				self.search.page = 1;
				self.search.cid = row.id;
				self.articleItems = [];
				self.getArticleItems();
			},
			getC() {
				this.$http.get('/shop/v10/article/c').then(({
					data,
					success
				}) => {
					if (success) {
						this.tabData.list = data;

					}
				})
			},
			getArticleItems() {
				this.$http.get('/shop/v10/article/items', this.search).then(({
					data,
					success
				}) => {
					if (success) {
						this.articleItems = data.data;
						this.page.last_page = data.last_page;
						this.pageStatus();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xkl_line1 {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>