import { ComponentOptions, defineComponent } 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, permi: number): ComponentOptions =>
	defineComponent({
		name: 'MyComponent',
		components: {
			[Button.name as string]: Button
		},
		setup() {
			const obj = prop as IPermiObj
			const FixDivMode = css`
				width: 100vw;
				height: 100vh;
				background-color: rgba(255, 255, 255, 0.5);
				position: fixed;
				left: 0;
				top: 0;
			`
			const FixTips = css`
				font-size: 14px;
				position: absolute;
				bottom: 200px;
				text-align: center;
				width: 100%;
				color: red;
			`
			const FixBtn = css`
				font-size: 16px;
				margin-top: 10px;
				width: 160px;
				height: 50px;
				white-space: nowrap;
			`
			const handleClick = () => {
				console.log(permi)
			}
			return {
				FixTips,
				FixDivMode,
				FixBtn,
				handleClick,
				obj
			}
		},
		render() {
			console.log(prop)
			return prop && <div class={this.FixDivMode}>
				<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