<template>
		<a-modal
            class="affiche_modal"
            v-model:visible="affiche"
            :footer="null"
            width="25%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="afficheMask"
			:keyboard="false"
			:destroyOnClose="true"
			:zIndex="10004"
        >
		<div class="affiche_bg"></div>
		<div class="affiche_btn">
			<div class="collection_closeIcon" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
		</div>
		<div class="affiche_content">
			<div class="affiche_content_title">{{ afficheTitle }}</div>
			<div class="affiche_content_str" id="afficheStr">由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户由于您是使用用户A</div>
			<div class="affiche_content_btn started_btn" @click.stop="cancelDsign()">OK</div>
		</div>
	</a-modal>
</template>

<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
// import { Https } from "@/tool/https";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
// import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
// import domTurnImg from '@/tool/domTurnImg'

export default defineComponent({
    setup() {
        let affiche: any = ref(false);
		let afficheMask:any = ref(false)
		let afficheTitle:any = ref('')
		let afficheStr:any = ref('')
        return {
            affiche,
			afficheMask,
			afficheTitle,
			afficheStr,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },
    mounted() {
    },
    methods: {
		init(text:any){
			this.affiche = true
			let title = 'System Reminder'
			this.afficheTitle = text.title||title
			nextTick().then(()=>{
				let afficheStr:any = document.getElementById('afficheStr')
				afficheStr.innerHTML = text.str
			})
			
			// let afficheList = this.store.state.UploadFilesModule.moodboard
		},
		cancelDsign(){
			this.affiche = false
			sessionStorage.setItem('isTimeOne', JSON.stringify(true));
			openGuide()
		},
    },
});
</script>

<style lang="less">
.affiche_modal {
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	background: none;
	box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
	.ant-modal-content{
		background: none;
	}
	.affiche_bg{
		// backdrop-filter: blur(3rem);
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: calc(65rem*1.2);
		// background-color: #181818;
		display: flex;
		flex-direction: column;
    }
	.ant-modal-btn{
		
	}
    .affiche_btn {
		.collection_closeIcon{
			z-index: 3;
			position: absolute;
			top: 2rem;
			right: 2rem;
			cursor: pointer;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.fi-rr-cross-small::before{
				padding: .2rem;
				border-radius: 5px;
				border: solid 2px rgba(0, 0, 0, 0.22);
				transition: .3s all;
				color: rgba(0, 0, 0, 0.7);
			}
			&.collection_closeIcon:hover .fi-rr-cross-small::before{
				border: solid 2px rgba(0, 0, 0, 5);
				color: rgba(0, 0, 0, 1);
			}
			.fi-rr-down-to-line{
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
			.fi-rr-down-to-line:hover{
				color: rgba(0, 0, 0, 1);
			}
		}
	}
	.affiche_content{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0 4rem;
		// height: calc(100%-4rem);
		position: absolute;
		z-index: 2;
		flex-direction: column;
		align-items: center;
		.affiche_content_title{
			margin-top: 5rem;
			font-size: 3rem;
			font-weight: 600;
		}
		.affiche_content_str{
			min-height: 50%;
			flex: 1;
			font-size: 2rem;
			text-indent: 2em;
			overflow-y: auto;
			margin: 2rem 0;
			width: 100%;
			text-align: left;
			&.affiche_content_str::-webkit-scrollbar {
				/* 竖轴的宽度 */
				width: 1rem;
				/* 横轴的高度 */
				height: 1rem;
				transition: all .3s;
			}
			/* 进度 */
			&.affiche_content_str::-webkit-scrollbar-thumb {
				border-radius: 1rem;
				background: rgba(238, 238, 244, 0);
			}
			/* 轨道 */
			&.affiche_content_str::-webkit-scrollbar-track {
				border-radius: 1rem;
				background: rgba(238, 238, 244, 0);
			}
			&.affiche_content_str:hover {
				// overflow-x: scroll;
				&.affiche_content_str::-webkit-scrollbar-thumb {
					background: #543087;
				}
				/* 轨道 */
				&.affiche_content_str::-webkit-scrollbar-track {
					background: rgba(84, 48, 135,.2);
				}
			}
		}
		.affiche_content_btn{
			font-size: 2rem;
			margin-bottom: 4rem;
		}
	}
}
</style>