<template>
	<div class="upgrade-dialog">
		<el-dialog
			v-model="getVersion"
			width="600px"
			destroy-on-close
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
           
		>
			<div  style="font-weight: 700;">
				<span style="color: #409EFF;">胜透版本有更新哦 ({{ versionList.versionTime.substring(0,10) }}) &nbsp;&nbsp;版本号：{{ versionList.versionNo }}&nbsp;
				</span>
			</div>
			<div style="color: #409EFF; font-weight: 500; margin-top: 10px; margin-bottom: 10px;">快来看看更新了那些内容吧</div>
			<div class="text_container">
				<div  v-html="versionList.versionText">
				</div>
			</div>
			<div style="text-align: center;margin-top: 20px;padding-top: 20px; border-top: 1px solid rgb(196, 191, 191);">
				<el-button size="mini"   type="primary" @click="onCancel">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="layoutUpgrade">
import { reactive, computed, onMounted, watch, ref } from 'vue';
import {getVersionAlert,updateVersion} from '/@/api/upgrade/index'
import { Session } from '/@/utils/storage';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const route=useRoute()
// 获取版本号
const getVersion=ref(false)
const versionList=ref({
	versionNo:'',
	versionTitle:'',
	versionTime:'',
	versionText:'',
	code:''
})
const versionCode=ref('')

let OK;

// 点击确认按钮不再弹窗
const onCancel = ()=> {
	updateVersion(`versionCode=${versionList.value.code}`).then(res=>{
		ElMessage.success('确认成功')
		getVersion.value=false
	})
};
watch(
	() => route.path,
	() => {
		if (Session.get('token')){
			console.log('路由动作改')
			getVersion.value= false;
			getVersionAlert().then(res=>{
				if(res.data == "OK"){
					getVersion.value=false
				}else{
					console.log(res.data,'得到版本信息')
					getVersion.value = true;
					versionList.value=res.data
				}
				console.log(res.data,'版本数据---------')
			})

		}
	}
);

</script>

<style scoped lang="scss">
.upgrade-dialog {
	:deep(.el-dialog) {
		.el-dialog__body {
			padding: 0 !important;
		}
		.el-dialog__header {
			display: none !important;
		}
		.upgrade-title {
			text-align: center;
			height: 130px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				background-color: var(--el-color-primary-light-1);
				width: 130%;
				height: 130px;
				border-bottom-left-radius: 100%;
				border-bottom-right-radius: 100%;
			}
			.upgrade-title-warp {
				z-index: 1;
				position: relative;
				.upgrade-title-warp-txt {
					color: var(--next-color-white);
					font-size: 22px;
					letter-spacing: 3px;
				}
				.upgrade-title-warp-version {
					color: var(--next-color-white);
					background-color: var(--el-color-primary-light-4);
					font-size: 12px;
					position: absolute;
					display: flex;
					top: -2px;
					right: -50px;
					padding: 2px 4px;
					border-radius: 2px;
				}
			}
		}
		.upgrade-content {
			padding: 20px;
			line-height: 22px;
			font-size: 13px;
			font-weight: 700;
			.upgrade-content-desc {
				color: var(--el-color-info-light-5);
				
			}
		}
		.upgrade-btn {
			border-top: 1px solid var(--el-border-color-lighter);
			display: flex;
			justify-content: space-around;
			padding: 15px 20px;
			
			.el-button {
				width: 100%;
			}
		}
		.text_container {
			display: inline-block; /* 或者使用 block，根据需求选择 */
			padding-left: 30px;
			// height: 550px;
			min-height: 100px; /* 设置最小高度 */
			overflow-y: auto;
		}
	}
}
</style>
