<template>
	<view class="page">
		<customHead mode='searchNav' :title='headtitle'></customHead>
		<!-- banner -->
		<view class="banner">
		<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
			interval="5000" duration="500">
				<swiper-item v-for="(item,index) in bannerIImg" :key="index">
					<image :src="BASE_URL+item.image[0].url" mode="aspectFill"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<!-- 文章数据 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="article-data">
				<view class="article-list">
					<view class="list" @click="onArticle(item.id)" v-for="item in dataList">
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.title}}</text>
							</view>
							<view class="find-collect">
								<view class="find">
									<text>{{item.browse}}人阅读</text>
								</view>
							</view>
						</view>
						<view class="thumb">
							<image :src="BASE_URL+item.cover[0].url"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import BASE_URL from '@/common/config.js'
	import TabBar from '../../components/TabBar/TabBar.vue';
	import customHead from "@/components/xy-customhead/xy-customhead.vue";
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			customHead,
		},
		data() {
			return {
				BASE_URL,
				headtitle: '铭钛招聘',
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/banner_02.png'
					},
				],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				dataList: [],
				query: {
					currentPage: 1,
					pageSize: 10
				},
					bannerIImg:[],
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad() {
			this.GetTbpolicyList(this.query);
			this.API.Gettbzcbanner().then(res=>{
				this.bannerIImg = res.data.list.map(res=>{
					res.image =JSON.parse(res.image);
					return res;
				});
			});
		},
		methods: {
			GetTbpolicyList(query) {
				this.API.GetTbpolicy(query).then(res => {
					if (res.code == 200) {
						this.dataList = res.data.list.map(res => {
							res.cover = JSON.parse(res.cover);
							return res;
						});
						console.log(this.dataList);
					}
				});
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {

				this.mescroll.endSuccess();
				var that = this;
				that.query = {
					currentPage: 1,
					pageSize: 10
				};
				this.GetTbpolicyList(that.query);
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);


				}, 2000)
			},
			/**
			 * 文章点击
			 */
			onArticle(id) {
				uni.navigateTo({
					url: '/pages/ArticleDetails/ArticleDetails?id='+id,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'discover.scss';
</style>
