<template>
	<view class="item-doc" :style="{ height: headHeight + 'px' }">
		<view class="item" :style="{ height: headHeight + 'px' }">
			<view class="left">
				<image v-if="options.icon.indexOf('http') != -1" :src="options.icon" mode="aspectFit" class="icon"></image>
				<image v-else :src="`/static/applocation/${options.icon}.png`" mode="aspectFit" class="icon"></image>

				<view class="info">
					<view class="title">
						<text class="t">{{ options.name }}</text>
					</view>
					<view class="intro">
						<text class="t">{{ options.intro }}</text>
					</view>
				</view>
			</view>
			<view class="right" v-if="showSwitch">
				<u-switch :active-value="1" :inactive-value="0" v-model="isOpen" @change="defineEmits(['update:isOpen'])"></u-switch>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const props = defineProps({
	options: {
		type: Object,
		default: {
			name: '标题',
			intro: '说明',
			icon: 'xszk'
		}
	},
	showSwitch: {
		type: Boolean,
		default: false
	}
});

const headHeight = ref(70);

const isOpen = defineModel('isOpen', {
	type: [Boolean, String, Number],
	default: 0
});

const emits = defineEmits(['load']);

onMounted(() => {
	nextTick(() => {
		emits('load', { height: headHeight.value });
	});
});
</script>

<style scoped lang="scss">
.item-doc {
	width: 100%;
}
.item {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 20upx 28upx;
	.left {
		display: flex;
		.icon {
			$size: 80upx;
			width: $size;
			height: $size;
			flex-shrink: 0;
		}
		.info {
			display: flex;
			padding-left: 20upx;
			flex-direction: column;
			.title {
				margin-top: -4upx;
				.t {
					font-size: 28upx;
					font-weight: bold;
				}
			}
			.intro {
				.t {
					font-size: 28upx;
					color: #999;
				}
			}
		}
	}
}
</style>
