<template>
	<view class="category">
		<template v-if="list.length">
			<view class="module" v-for="item in list">
				<view class="category-item" hover-class="none" v-for="item2 in item.children" :key="item2.path"
					@click="handleToBooking(item2)">
					<image v-if="item2.auth" class="icon" :src="item2.imgUrl" mode="scaleToFill"></image>
					<image v-else class="icon" :src="item2.defaultImgUrl" mode="scaleToFill"></image>
				</view>
			</view>
		</template>
		<view v-else class="empty-data">
			<image class="icon" src="/static/images/home-empty.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapGetters
	} from "vuex";
	import {
		getIMReply,
		relocation
	} from "@/api/message.js";
	export default {
		props: ["list"],
		mixins: [],
		data() {
			return {
				isLoading: false,
			};
		},
		watch: {},
		computed: {},
		onLoad() {},
		onUnload() {},
		methods: {
			handleToBooking(item) {
				uni.navigateTo({
					url: item.path
				});
			},
		},
	};
</script>

<style lang="scss" scope>
	.category {
		padding: 32rpx 10rpx;
		margin: 16rpx;
		border-radius: 4rpx;
		display: flex;
		flex-wrap: wrap;

		// min-height: 80vh;
		.module {
			width: 100%;

			// margin: 10rpx 0;
			.module-title {
				font-size: 32rpx;
				color: #1d2129;
			}

			.category-item {
				border-radius: 16rpx;
				margin: 40rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				box-shadow: 0px 3px 12px 0px rgba(63, 112, 157, 0.5);
				width: 100%;

				.icon {
					width: 100%;
					height: 240rpx;
				}
			}
		}

		.empty-data {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 480rpx;
			height: 528rpx;
			transform: translate(-50%, -50%);
		}
	}
</style>