<template>
	<div ref="phoneModelDom"></div>
	<a-modal
		class="phoneModel generalModel"
		:get-container="() => $refs.phoneModelDom"
		v-model:visible="phoneModel"
		:footer="null"
		:width="pageWidth"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="phoneModelMask"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<!-- <i class="fi fi-rr-cross-small"></i> -->
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<div class="phoneLogin">
			<!-- <div id="wx_id_signin"></div> -->
		</div>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
	</a-modal>

</template>

<script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
const md5 = require("md5");
export default defineComponent({
    components: {
        VerificationCodeInput,
    },
    setup(){
		let phoneModel = reactive({
			phoneModel:false,
			phoneModelMask:true,
			pageWidth:'50%',
		})
		let data = reactive({
			loadingShow:false,
		})
		const init = async ()=>{
			phoneModel.phoneModel = true
		}
		const cancelDsign = ()=>{
			phoneModel.phoneModel = false
		}
        return{
			...toRefs(phoneModel),
			...toRefs(data),
			init,
			cancelDsign,
        }
    },
    data() {
        return {
        };
    },
    methods: {
    },
});
</script>
<style lang="less" scoped>
.phoneLogin {
    width: 100%;
    height: 100%;
}
</style>