<template>
	<view class="reporttable">
		<scroll-view scroll-x class="reporttable-scroll">
			<view class="reporttable-ul" :style="{width: (viewList.columns.length * 235.5) + 'rpx'}">
				<view class="reporttable-li" v-for="(item, index) in viewList.columns" :key="index">
					<view class="reporttable-li-title" :style="{color: colors[index]}">{{item}}</view>
					<view class="reporttable-cont">
						<view class="reporttable-cont-li" :style="{color: colors[index]}" v-for="(rowItem, rowIndex) in viewList.rows" :key="rowIndex">{{rowItem[item]}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="reporttable-pagination">
			<uni-pagination :total="viewList.totalCount" :pageSize="viewList.pageSize" @change="paginationChange"></uni-pagination>
		</view>
	</view>
</template>

<script>
	import actions from './actions.js'
	export default {
		props: {
			viewModel: {},
			dataModel: {}
		},
		data() {
			return {
				colorList: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
				colors: [],
				tableApi: 'Api/Report/GetCountTable',
				viewList: []
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.viewList = JSON.parse(JSON.stringify(this.viewModel))
				this.colors = []
				this.viewModel.columns.forEach(item => {
					let round = Math.round(Math.random() * (this.colorList.length - 1))
					this.colors.push(this.colorList[round])
				})
			},
			async paginationChange(ev) {
				let result = await actions.pageChange(this, ev.current)
				if (result) {
					this.viewList = JSON.parse(JSON.stringify(result))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reporttable {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		&-scroll{
			width: 710rpx;
		}
		&-ul {
			display: flex;
		}
		&-li{
			width: 236rpx;
			&-title{
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				@include styleFont(#343434, 28rpx, 1);
				&:last-child {
					border-right-width: 0;
				}
			}
		}
		&-cont{
			&-li{
				height: 80rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				text-align: center;
				@include styleFont(#343434, 28rpx, 1);
			}
		}
		&-pagination{
			padding: 0 20rpx;
			margin: 30rpx 0;
		}
	}
</style>

<style>
	.reporttable-cont-li:last-child {
		border-right: none;
	}
</style>