<template>
	<view class="all-circle">
		<view class="doctorsay-container-up">
			<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
				<view class="doctorsay-container-card"
					:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
					<image class="doctorsay-container-card-img"
						:src="index === upmenuIndex ? item.targetUrl : item.url" />
					<view
						:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'
	const emit = defineEmits(['getDownListIndex']);
	// 初始化下面侧单列表
	const doctorsayList = ref([
		{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },
		{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
		{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
		{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
		{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' },
	]);
	const upmenuIndex = ref(-1)
	//变更左侧菜单
	const changLeft = (index : number) => {
		upmenuIndex.value = index
		emit('getDownListIndex',index)
		setTimeout(()=>{
			upmenuIndex.value = -1
		},400)
		// downList.value = bigArray.value[index].children
	}
</script>

<style scoped lang="less">
	.all-circle {
		position: absolute;
		bottom: 300rpx;
		right: 50rpx;
		width: 400rpx;
		height: 500rpx;
		background-color: rgba(127, 127, 127, 0.1);
		border-radius: 20rpx;
		z-index: 999;
		display: flex;
		// justify-content: center;
		align-items: center;
		.doctorsay-container-up {
			display: flex;
			flex-wrap: wrap;
			margin-left: 60rpx;
			.doctorsay-container-card {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgb(221, 234, 250);
				width: 130rpx;
				height: 130rpx;
				margin: 0 18rpx 15rpx 0rpx;
				border-radius: 30rpx;
				border: 2rpx solid rgb(221, 234, 250);
				box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2);
		
				/* 右下角阴影 */
				.doctorsay-container-card-img {
					width: 75rpx;
					height: 75rpx;
				}
		
				.doctorsay-container-card-font {
					font-size: 30rpx;
					margin-top: -10rpx;
				}
		
				.doctorsay-container-card-font-dark {
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: -10rpx;
				}
			}
		}
	}
</style>