<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$image,
		$response
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	const $props = defineProps({
		url: {
			type: String,
			default: "",
		},
	});

	const button_list = ref([]);
	const getButtonList = async (api) => {
		const response = await $api(api);
		$response(response, () => {
			// if (api === 'CheckUpTypeGetList') {
			// 	button_list.value = [
			// 		...response.data.list,
			// 		{
			// 			created_at: "2024-08-29 16:22:12",
			// 			id: 6,
			// 			is_del: 0,
			// 			logo: "/storage/20240822/sfptyuyue.png",
			// 			name: "指定体检医生",
			// 			status: 1,
			// 			updated_at: "2024-10-26 10:45:52",
			// 			url: "/pages/main/ysdate/ysdate"
			// 		}
			// 	];
			// } else {
				button_list.value = response.data.list;
			// }
		});
	};

	const checkType = () => {
		if ($props.url?.includes("api://")) {
			let api = $props.url.split("api://")[1];
			if (!!api) {
				getButtonList(api);
			}
		}
	};

	const mountedAction = () => {
		checkType();
	};

	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};

	const buttonClick = (info) => {
		if (!!info.url) {
			if (info.id) {
				$store.setCheckupTypeId({
					id: info.id
				});
			}
			$store.setComboContrast([]); // 清空套餐对比
			$store.setYytjInfo({});
			uni.navigateTo({
				url: info.url,
			});
		} else {
			uni.$lu.toast("暂未开放");
		}
	};

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>

		<view class="button_list_wrapper">
			<view @click="buttonClick(i)" class="button_item_wrapper" v-for="(i, k) in button_list" :key="k">
				<view class="button_icon_wrapper">
					<image :src="$image(i.logo)"></image>
				</view>
				<view class="button_name_wrapper">{{ i.name }}</view>
				<view class="button_right_wrapper">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.button_list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
	}

	.button_item_wrapper {
		width: 552rpx;
		height: 140rpx;
		background: #ffffff;
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0, 164, 172, 0.16);
		border-radius: 15rpx;
		margin: 50rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.button_icon_wrapper {
		width: 82rpx;
		height: 82rpx;
		margin-left: 48rpx;
	}

	.button_icon_wrapper image {
		width: 82rpx;
		height: 82rpx;
		display: inline-block;
		object-fit: contain;
	}

	.button_name_wrapper {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 1;
	}

	.button_right_wrapper {
		margin-right: 48rpx;
	}
</style>