<template>
	<view class="container">
		<u-card>
			<view class="u-body-item">
				<view style="border: 1px solid #ccc;">
					<text style="margin-left: 9px">意见收集:</text>
					<u--textarea v-model="remarks" maxlength="-1" placeholder="请详述您的问题，以便我们为您提供更好的服务"
						:autoHeight="true"></u--textarea>
				</view>
				<view class="SignItem">
					<view class="Cancel">
						<u-button color="#4e87ff" @click="remarksSubmit">提交</u-button>
					</view>
				</view>
			</view>
		</u-card>
	</view>

</template>

<script>
	import {
		firectrlAdvice
	} from '@/api/login';
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				remarks: ""
			};
		},
		computed: {
			// 拿取vuex里的数据
			...mapGetters({

				userInfo: 'users/getLoginInfo'
			})
		},
		methods: {

			async remarksSubmit() {
				const dataList = {
					content: this.remarks,
					creatorId: this.userInfo.id
				}
				if (this.remarks.length > 0) {
					await firectrlAdvice(dataList)
					uni.showLoading({
						title: '正在提交中....'
					});
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功'
						});
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/index/index`
							});
						}, 900);
					}, 1000);
				}else{
					 uni.showToast({
					 	title: '意见不能为空'
					 });
				}

			}
		}
	}
</script>

<style lang="scss">
	/* pages/call/call.wxss */
	.container {
		width: 100%;
		margin: 0;
		padding: 0;
		min-height: 100vh;
		overflow: hidden;
		background-color: #fbfbfb;
	}

	.box {
		width: 90%;
		margin-left: 20rpx;
		margin-top: 40rpx;
		height: 480rpx;
		border: 2rpx solid #f8f8f8;
		border-radius: 40rpx;
		box-shadow: 2rpx 10rpx 6rpx rgb(211, 210, 210)
	}

	.u-card-wrap {
		background-color: #ccc;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		margin: 14rpx;
		background-color: #fff;
	}

	.SignItem {
		transform: translateY(15%);
		display: flex;
		flex-direction: column;
		margin: 20rpx 48rpx;
		// background-color: #fff;
		border-radius: 20rpx;
	}

	.Cancel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		margin: 20rpx 40rpx;
	}
</style>