import { ComponentOptions, defineComponent, ref } from 'vue'
import type { IPermiObj } from './type'
import { css } from '@emotion/css'
import 'vant/lib/index.css';
import { Button } from 'vant';

const MyComponent = (prop: IPermiObj | Boolean): ComponentOptions =>
	defineComponent({
		name: 'MyComponent',
		components: {
			[Button.name as string]: Button
		},
		setup() {
			const obj = prop as IPermiObj
			const FixDivMode = css`
				width: 100vw;
				height: 100vh;
				position: fixed;
				left: 0;
				top: 0;
				overflow: hidden;
				z-index: 999999;
			`
			const FixUpperLevels = css`
				width: 100%;
				height: 185px;
				background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
			`
			const FixTips = css`
				font-size: 14px;
				text-align: center;
				width: 100%;
				color: #666666;
				height: calc(100vh - 185px);
				background: #fff;
				padding-top: 138px;
				box-sizing: border-box;
			`
			const FixBtn = css`
				font-size: 13px;
				margin-top: 15px;
				width: 315px;
				height: 42px;
				white-space: nowrap;
				background-color: #FF5B00;
				color: #FFF;
			`
			const handleClick = () => {
				//window.localStorage.setItem('permission', '0')
				window.open('https://www.caimei365.com/')
			}
			const pageLocation = ref<number>(0)
			const stop = () => {
				pageLocation.value = window.scrollY
				document.body.style.position = 'fixed'
				document.body.style.top = '-' + pageLocation.value + 'px'
			}
			const move = () => {
				document.body.style.position = 'static';
    		window.scrollTo(0, pageLocation.value);
			}
			return {
				FixTips,
				FixDivMode,
				FixBtn,
				FixUpperLevels,
				handleClick,
				obj,
				stop,
				move
			}
		},
		render() {
			prop ? this.stop() : this.move()
			return prop && <div class={this.FixDivMode}>
				<div class={this.FixUpperLevels}></div>
				<div class={this.FixTips}>
					<div>
						{this.obj.text}
					</div>
					<div>
						<van-button class={this.FixBtn} onClick={this.handleClick}>{this.obj.btnText}</van-button>
					</div>
				</div>
			</div>
		},
	})

export default MyComponent