<template>
	<view class="notice adffc" v-if="show">
		<view class="notice-box adffc">
			<view class="notice-box-title">{{title}}</view>
			<image class="notice-box-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<view class="notice-box-content">
				<u-parse :content='content' style="color: #667E90;font-size: 26rpx;line-height: 42rpx;"></u-parse>
			</view>
			<view class="notice-box-bottom">
				<view class="notice-box-bottom-btn" @click="handleKnow">{{btnText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				typeof:String,
				default:'问卷须知'
			},
			btnText:{
				typeof:String,
				default:'我已知晓'
			},
			show:{
				typeof:Boolean,
				default:false
			},
			content:{
				typeof:String,
				default:`<div style="color:#002846">"您正在准备激活一次ＰＥＲＩＬＬ团队发展动态评估问卷调研，这是创衡版权所有的团队发展动态评估模型，其中的评估、分析过程基于创衡独创的团队教练方法及PERILL诊断模型及知识库来完成，为了更好地辅助您以及团队成员结合问卷陈述评估团队发展动态，我们邀请您设置问卷对应团队的各项基本信息，这些信息将被保存在问卷对应的项目信息中，您可以选择一个既有的项目来复用相关设置，也可以新建一个项目来创建一组新的团队基本信息。<br>
如果您激活的是个人版问卷，项目基本信息设置完成后，您可以直接开始填写问卷；<br>
如果您激活的是团队版问卷，项目基本信息设置完成后，您可以点击"分享问卷"按钮，将问卷链接转发给需要填写问卷的团队成员伙伴。<br>
注意：团队版问卷仅支持评估发起者已填写的「参与评估的团队成员」可以做答，请确保每个用户的关键联系信息：「姓名-必填」、「手机号-必填」、「邮箱地址-选填」填写准确；为便于为参与评估的用户匹配问卷，务必提供正确的「手机号」信息，非境内手机号码需添加区号，格式为：＋区号＋手机号（去除前导0），例如+85297000111。<br>
涉及的用户信息保护具体参见「"ＰＥＲＩＬＬ团队发展动态评估-小程序"用户隐私协议」</div>`
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			handleKnow(){
				this.$emit('handleKnow')
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 1000;
		justify-content: flex-end;
		&-box{
			height: calc(100% - 317rpx);
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #002846;
				line-height: 36rpx;
				text-align: center;
				margin-top: 48rpx;
			}
			&-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 48rpx;
				right: 30rpx;
			}
			&-content{
				overflow-y: auto;
				padding: 43rpx 40rpx 182rpx;
			}
			&-bottom{
				background: #FFFFFF;
				box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
				padding: 20rpx 50rpx 54rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				&-btn{
					width: 100%;
					height: 88rpx;
					background: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);;
					border-radius: 44rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>