<template>
	<view class="msgWrap">
		<view class="sendMsgWrap">
			<view class="sendMsgTitle">
				<view class="titleLabel"></view>
				留言
			</view>
			<view class="changeMsg" :class="{changeMsgDis:msg != ''}">
				<view class="changeMsgTop">
					{{randomMsg.Content}}
				</view>
				<view class="changeMsgBottom" @click="changeMsg" :class="{msgBottomDis:msg != ''}">
					<image v-if="msg == ''" src="../static/image/Group-220-@2x@2x.png" mode=""></image>
					<image v-else src="../static/image/Group-217-@2x@2x.png" mode=""></image>
					换一句
				</view>
			</view>
			<view class="writeMsg">
				<textarea @focus="writeMsgFocus" @blur="writeMsgBlur" v-model="msg" placeholder="手动输入悼念词" />
			</view>
			<view class="sendMsgBtn" @click="confirmSend">
				确认发送
			</view>
			<view class="closeGift" @click="closeWriteMsg">
				<image src="../static/image/cross@2x.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				msg:'',
				message:''
			}
		},
		props:{
			randomMsg:{
				type:Object,
				default:{}
			},
			ob_id:{
				type:String
			}
		},
		methods:{
			changeMsg(){
				uni.request({
					url:this.apiUrl + '/api/Config/RandMessage',
					method:'post',
					success: (res) => {
						this.randomMsg.Content = res.data.data.Content
					}
				})
			},
			writeMsgFocus(){
				this.writeMsgFlag = true
			},
			writeMsgBlur(){
				this.writeMsgFlag = false
			},
			confirmSend(){
				if(this.randomMsg.Content == null && this.msg == ''){
					uni.showToast({
						title:'留言信息不能为空',
						icon:'none'
					})
					return
				}
				if(this.msg != ''){
					this.message = this.msg
				}else{
					this.message = this.randomMsg.Content
				}
				this.$request('/api/Config/GiveGift',{
					ob_id:this.ob_id,
					gift_id:0,
					message:this.message
				},2,2).then((res)=>{
					if(res.code == 1){
						this.$emit('closeWriteMsg',{code:1})
					}
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.$emit('closeWriteMsg',{code:0})
					}
				})
			},
			closeWriteMsg(){
				this.$emit('closeWriteMsg',{code:-1})
			}
		}
	}
</script>

<style>
	.msgWrap{background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;}
	.sendMsgWrap{position: relative;width: 586rpx;height: 500rpx; border-radius: 54rpx;padding: 24rpx;background: #fff;}
	.sendMsgWrap .closeGift{position: absolute;width: 44rpx;height: 44rpx;top: 20rpx;right: 40rpx;}
	.closeGift image{width: 44rpx;height: 44rpx;}
	.sendMsgTitle{display: flex;align-items: center;color: #323233;font-size: 32rpx;margin-top: 20rpx;}
	.titleLabel{
		height: 32rpx;
		width: 8rpx;
		border-radius: 2px;
		background-image: linear-gradient(to top, #fff , #491716);
		margin-right: 10rpx;
	}
	.changeMsg{padding: 24rpx;background: #FFECEC;border-radius: 18rpx;margin-top: 10rpx;}
	.changeMsg.changeMsgDis{background: #F2F3F5;}
	.changeMsg .changeMsgTop{color: #646566;font-size: 28rpx;line-height: 42rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.changeMsg .changeMsgBottom{display: flex;justify-content: flex-end;align-items: center;color: #894746;font-size: 28rpx;}
	.changeMsgBottom.msgBottomDis{color: #C8C9CC;}
	.changeMsgBottom image{width: 28rpx;height: 28rpx;margin-right: 10rpx;}
	.writeMsg{height: 150rpx;background: #F2F3F5;border-radius: 18rpx;margin-top: 20rpx;padding: 10rpx;}
	.writeMsg textarea{color: #C8C9CC;font-size: 28rpx;width: 100%;height: 100%;}
	.sendMsgBtn{height: 80rpx;background: #894746;text-align: center;line-height: 80rpx;color: #fff;font-size: 28rpx;border-radius: 18rpx;margin-top: 30rpx;}
</style>