<template>
	<div class="sponsors-container" title="点击前往体验" v-show="state.sponsors.isShow" @click="onSponsorsClick">
		<el-carousel height="240px" indicator-position="none" :arrow="setCarouselShow" @change="onCarouselChange">
			<el-carousel-item v-for="(v, k) in state.sponsors.list" :key="k">
				<img :src="v.url" class="sponsors-img" />
				<div class="sponsors-text" v-html="v.text"></div>
			</el-carousel-item>
		</el-carousel>
		<div class="sponsors-close">
			<SvgIcon name="ele-Close" :size="12" title="关闭赞助商" @click.stop="onCloseSponsors" />
		</div>
	</div>
</template>

<script setup lang="ts" name="layoutSponsors">
import { reactive, computed, onMounted } from 'vue';
import sponsorsOne from '/@/assets/ccflowRightNextAdmin.png';

// 定义变量内容
const state = reactive({
	sponsors: {
		list: [
			{
				url: sponsorsOne,
				text: `驰骋BPM系统包含表单引擎+流程引擎+权限控制,方便集成,配置灵活,功能强大,适合中国国情的工作流引擎.演示:http://demo.ccflow.org。右上角点star方可加群: 1060674395`,
				link: 'http://www.ccflow.org/',
			},
		],
		isShow: false,
		index: 0,
	},
});

// 设置轮播图箭头显示
const setCarouselShow = computed(() => {
	return state.sponsors.list.length <= 1 ? 'never' : 'hover';
});
// 关闭赞助商
const onCloseSponsors = () => {
	state.sponsors.isShow = false;
};
// 轮播图改变时
const onCarouselChange = (e: number) => {
	state.sponsors.index = e;
};
// 当前项内容点击
const onSponsorsClick = () => {
	window.open(state.sponsors.list[state.sponsors.index].link);
};
// 延迟显示，防止影响其它界面加载
const delayShow = () => {
	setTimeout(() => {
		state.sponsors.isShow = true;
	}, 3000);
};
// 页面加载时
onMounted(() => {
	delayShow();
});
</script>

<style scoped lang="scss">
.sponsors-container {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 3;
	width: 200px;
	background-color: var(--next-bg-main-color);
	box-shadow: var(--el-box-shadow-lighter);
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	.sponsors-img {
		width: 100%;
		height: 80px;
	}
	.sponsors-text {
		padding: 10px;
		color: var(--el-text-color-regular);
		font-size: var(--el-dialog-content-font-size);
	}
	.sponsors-close {
		width: 60px;
		height: 60px;
		border-radius: 100%;
		background: rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		position: absolute;
		right: -35px;
		bottom: -35px;
		:deep(i) {
			position: absolute;
			left: 9px;
			top: 9px;
			color: #afafaf;
			transition: all 0.3s ease;
		}
		&:hover {
			transition: all 0.3s ease;
			:deep(i) {
				color: var(--el-color-primary);
				transition: all 0.3s ease;
			}
		}
	}
}
</style>