<template>
	<view class="dialog-overlay" v-if="visible" @click="close" :style="{top: navH + 'rpx'}">
		<view class="dialog-content" @click.stop :style="{top: navH + 'rpx'}">
			<view class="uni-textarea">
				<textarea class="text-reply pl-10 pt-10 mb-20" placeholder="我来评论" />
			</view>
			<input class="input-reply flex-y-center pl-10 mb-20" placeholder="昵称" />
			<view class="flex-center">
				<button class="bg-color pt-20 pb-20" @click="close">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				visible: false,
				navH: '',
			}
		},
		computed: mapGetters(['globalData']),
		created() {
			// #ifdef MP || APP-PLUS
			// 获取导航高度；
			this.navH = this.globalData.navHeight;
			// #endif
			// #ifdef H5
			this.navH = 80;
			// #endif
		},
		methods: {
			close() {
				this.$emit('update:visible', false);
				this.visible = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: fadeIn 0.5s;
		z-index: 90;
	}

	.dialog-content {
		position: fixed;
		background-color: white;
		border-radius: 8px;
		padding: 20px;
		width: 100%;
		animation: slideDown 0.5s;
	}

	@keyframes slideDown {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
	
	.bg-color {
		background-color: $bg-color-primary;
		border-radius: 40rpx;
		width: 70%;
		color: #fff;
	}
	
	.text-reply {
		background-color: #F8F8FA;
		width: 100%;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
	
	.input-reply {
		height: 70rpx;
		background-color: #F8F8FA;
		border-radius: 10rpx;
	}
</style>