<template>
	<view>
		<view class="tabs">
			<u-tabs class="defalt-utabs" :is-scroll="false" :list="navigationList" @change="changeNav" lineColor="#B22338" :current="tabIndex"
					:inactiveStyle="{ color: '#999999' }" :activeStyle="{ color: '#B22338', fontWeight: 'bold' }"
					keyName="title"></u-tabs>
		</view>

		<view  :style="{ height: height }" class="bord">
			<swiper :style="{ height: height }" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,index) in navigationList" :key="index">
					<view>
						<mescroll-item ref="MescrollItem"  :i="index" :index="tabIndex" :tabs="navigationList" :height="height">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";

	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";

	import colors from '@/mixins/color.js';
	export default {
		components: {
			MescrollItem
		},
		mixins: [colors],
		data() {
			return {
				height:'',

				navigationList: [{
					title: '全部',
					id: '0'
				}, {
					title: '处理中',
					id: '1'
				},{
					title: '已退款',
					id: '2'
				}],

				tabIndex: 0,


			};
		},
		computed: mapGetters(['isLogin']),

		onShow(){
			let sysInfo = uni.getSystemInfoSync()
			this.height= sysInfo.windowHeight -(sysInfo.screenWidth/750) * (100) +'px';
			console.log(this.height)
		},
		onLoad() {
			if (this.isLogin) {

			} else {
				toLogin();
			}
		},

		methods: {
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},

			changeNav (e) {
				this.tabIndex = e.index
			},

		}
	}
</script>

<style lang="scss" scoped>





</style>
