<template>
	<view>
		<!-- tabs -->
		<u-sticky bgColor="white">
		    <u-tabs
				:list="types"
				keyName="title"
				:scrollable="types.length > 4"
				lineColor="#34CE98"
				@click="setData('type', $event)"
			></u-tabs>
		</u-sticky>
		<view class="board">
			<!-- screening -->
			<view class="screening">
				<view class="item" v-for="(item,index) in dateBetween" :key="index" :class="{'show': item.key === date}" @click="setData('date', item)">{{item.title}}</view>
			</view>
			<!-- 数据看板 -->
			<block v-if="boardData.length > 0">
				<view class="block-flex" v-for="(item,index) in boardData" :key="index">
					<view class="block-title">{{item.title}}</view>
					<view class="block-number">{{item.number}}<text>{{item.units}}</text></view>
				</view>
			</block>
			<block v-else>
				<view class="null vertical">
					<u-empty
							mode="data"
							icon="http://cdn.uviewui.com/uview/empty/data.png"
							text="暂无相关数据"
					>
					</u-empty>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { getAppdata, getData } from '@/apis/interfaces/app.js'
	export default {
		data() {
			return {
				types		: [],
				dateBetween	: [],
				boardData	: [],
				type		: '',
				date		: ''
			};
		},
		created() {
			uni.showLoading({
				title: '初始化...',
			})
			getAppdata().then(res => {
				this.types 		= res.types
				this.dateBetween= res.date_between
				this.boardData	= res.data
				this.type		= res.type
				this.date		= res.date
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			setData(type, e){
				if(this[type] === e.key) return
				this[type] = e.key
				this.boardData = []
				this.getData()
			},
			getData(){
				uni.showLoading({
					title: '加载中...'
				})
				getData({
					type: this.type,
					date: this.date
				}).then(res => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.boardData = res.data
				}).catch(err => {
					uni.stopPullDownRefresh()
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onPullDownRefresh() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.null{
		height: 60vh;
	}
	.board {
		background: $window-color;
		min-height: calc(100vh - 44px);
		overflow: hidden;
		padding-bottom: $padding;
		box-sizing: border-box;
		// 数据筛选
		.screening{
			padding: $padding 20rpx;
			display: flex;
			justify-content: space-between;
			.item{
				background: white;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				width: calc(20% - 20rpx);
				margin:  0 10rpx;
				text-align: center;
				border-radius: 25rpx;
				color: #555;
				&.show{
					background: $main-color;
					color: white;
				}
			}
		}
		// 数据看板
		.block-flex{
			display: flex;
			justify-content: space-between;
			background: white;
			border-radius: $radius;
			margin: 0 $margin;
			padding: $padding;
			margin-bottom: $margin - 10;
			font-size: 30rpx;
			.block-title{
				font-weight: bold;
				color: #555;
			}
			.block-number{
				color: $text-price;
				font-weight: bold;
				text{
					color: gray;
					font-size: 80%;
					padding-left: 5rpx;
					font-weight: normal;
				}
			}
		}
	}
</style>
