<template>
	<view v-if="merchantListSize>1">
		<uni-collapse :accordion="true">
			<uni-list>
				<view  v-for="merchant in merchantList" :key="merchant.id">
					<uni-list-item :title="getMerchantTitle(merchant)" @click="openEquipmentStatisticsByAdmin(merchant)"/>
				</view>
			</uni-list>
		</uni-collapse>	
	</view>
	<view v-else>
		<equipmentStatistics v-if="firstMerchantAdminId" :adminId="firstMerchantAdminId" style="padding: 20upx;"></equipmentStatistics>
		<view v-else style="text-align: center;">暂无数据</view>
	</view>
</template>

<script>
    import {mapState,mapActions,mapMutations} from 'vuex'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {equipmentStatistics} from '@/pages/Charts/equipmentStatistics';
    export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				globalUser:{},
				merchantList:[{equipmentList:[]}],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				}
			}
		},
		computed: {
			...mapState(['loginUser']),
			firstMerchantAdminId:{
				get(){
					console.log('firstMerchantAdminId',this.merchantList[0].id)
					return this.merchantList[0].id;
				}
			},
			merchantListSize:{
				get(){
					console.log('merchantList1',this.merchantList.length)
					return this.merchantList.length;
				}
			}
		},
		onShow(state){
			this.globalUser = uni.getStorageSync("globalUser");
			this.init();
		},
		onLoad(state){
			// this.init();
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			async init(){
				await this.getEquipmentListData();
			},
			openEquipmentStatisticsByAdmin(merchant){
				const adminId = merchant.id;
				const pname = merchant.name;
				uni.navigateTo({
					url: '/pages/Charts/equipmentStatistics?adminId=' + adminId+'&pname='+pname,
				});
			},
			getMerchantTitle(merchant){
				return merchant.name?merchant.name:merchant.username;
			},
			getEquipmentListData(){
				// console.log('getEquipmentListData')
				this.getEquipmentListByUser(this.globalUser)
				.then(data => {
					this.merchantList = data;
					console.log('getEquipmentListData',this.merchantList)
					uni.stopPullDownRefresh();
				}
				, _ => void uni.stopPullDownRefresh());
			}
		}
    }
</script>

<style>
	
</style>
