<template>
	<view class="warpbox">
		<view class="tablist_new">
			<view class="tabtn" @click="changeTab(0)" :class="{'tabtn_active':active == 0}">{{i18n['全部']}}</view>
			<view class="tabtn" @click="changeTab(1)" :class="{'tabtn_active':active == 1}">{{i18n['处理中']}}</view>
			<view class="tabtn" @click="changeTab(2)" :class="{'tabtn_active':active == 2}">{{i18n['已完成']}}</view>
		</view>
		
		<scroll-view scroll-y class="scrollbox" @scrolltolower="loadMore">
			<view class="listwarp">
				<progressItem :list="list"></progressItem>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import progressItem from './item.vue'
	import { netOrderList } from '@/api/api.js'
	
	export default{
		components:{
			progressItem
		},
		data() {
			return{
				active:0,
				page:1,
				totalPage:1,
				list:[]
			}
		},
		computed:{
			i18n() {
				return this.$t("progress")
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n['查看进度']
			})
		},
		methods:{
			changeTab(e) {
				this.active = e
				this.init()
			},
			init() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				let params = {
					type:this.active,
					page:this.page
				}
				netOrderList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			loadMore() {
				if(this.page >= this.totalPage) {
					return
				}
				this.page ++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.scrollbox{
		width:750rpx;
		height:calc(100vh - 100rpx);
		.listwarp{
			padding:24rpx;
		}
	}
</style>
