<template>
	<view v-if="async">
		<omitReport v-if="widget.value.styleItem == 1" :viewModel="viewModel" :count="widget.value.count"></omitReport>
		<tabsReport v-if="widget.value.styleItem == 2" :viewModel="viewModel"></tabsReport>
		<rankReport v-if="widget.value.styleItem == 3" :viewModel="viewModel"></rankReport>
	</view>
</template>

<script>
	import ala from '@/service/ala'
	import omitReport from './widget/omit.vue'
	import rankReport from './widget/rank.vue'
	import tabsReport from './widget/tabs.vue'
	export default {
		components: {
			omitReport,
			rankReport,
			tabsReport
		},
		data() {
			return {
				widgetModel: {},
				async: false,
				viewModel: [],
				idList: [], // Id顺序排序用
				styleType: '',
				isLoading: true
			}
		},
		props: {
			widget: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 不请求Api接口
			async init() {
				var singleData = this.widget.value
				var localDataReports = ala.vuexLocalGet('single_data_reports')
				if (!localDataReports) {
					localDataReports = []
				}
				if (singleData && singleData.singleReportForm) {
					singleData.singleReportForm.forEach(async (element, index) => {
						this.idList.push(element.id)
						var value = 0
						var isRequest = true
						var find = this.getFind(localDataReports, element.id)
						if (find) {
							value = find.value
							isRequest = false
						}
						var data = this.setdata(element, value)
						data.dataCouse = element.dataCouse
						data.isRequest = isRequest
						if (!isRequest) {
							data.time = find.time
						}
						this.viewModel.push(data)
						localDataReports = localDataReports.filter(r => r.id !== data.id)
						localDataReports.push(data)
					})
				}
				this.viewModel = this.sort(this.viewModel)
				ala.vuexLocalSet('single_data_reports', localDataReports)
				this.async = true
				setTimeout(async () => {
					await this.initAfter(localDataReports)
				}, 500)
			},
			// 数据完成以后请求
			async initAfter(localDataReports) {
				this.viewModel.forEach(async (element, index) => {
					if (element.isRequest === true) {
						var response = await ala.httpPost('api/Report/GetSingleReport', element.dataCouse)
						if (response) {
							if (response.status === 1) {
								response = 0 // 处理接口请求错误时候的bug
							}
							localDataReports = localDataReports.filter(r => r.id !== element.id)
							element.value = response
							element.time = Math.round(new Date(new Date().getTime() + 600000) / 1000) // 保存10分钟后的时间
							this.$set(this.viewModel[index], 'value', element.value)
							localDataReports.push(element)
							ala.vuexLocalSet('single_data_reports', localDataReports)
						}
					}
				})
			},
			// 排序
			sort(reportArray) {
				var newArray = []
				this.idList.forEach(element => {
					var dataItem = reportArray.find(r => r.id === element)
					if (dataItem) {
						newArray.push(dataItem)
					}
				})
				return newArray
			},
			// 根据id查找缓存中的元素
			getFind(localReports, id) {
				if (localReports && id) {
					// 读取缓存中的值
					var find = localReports.find(r => r.id === id)
					if (find) {
						if (find.time > Math.round(new Date().getTime() / 1000)) {
							return find
						}
					}
				}
			},
			// 设置元素值
			setdata(element, value) {
				var data = {
					name: element.name,
					id: element.id,
					value: value,
					icon: element.icon,
					bgcolor: element.bgColor,
					color: element.color,
					intro: element.intro
				}
				if (element.time) {
					data.time = element.time
				}
				if (ala.strIsEmpty(data.color)) {
					data.color = '#ffffff'
				}
				return data
			}
		}
	}
</script>

<style></style>
