<template>
	<view class="diy-from" :style="style">
			<view class="fui-cell-group">
				<view class="fui-cell  ">
					<view class="fui-cell-label ">您的姓名</view>
					<view class="fui-cell-info">
						<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名" value=""></input>
					</view>
				</view>
				<view class="fui-cell ">
					<view class="fui-cell-label">手机号码</view>
					<view class="fui-cell-info">
						<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号" type="number" ></input>
					</view>
				</view>
				<view class="fui-cell ">
					<view class="fui-cell-label">您的邮箱</view>
					<view class="fui-cell-info">
						<input v-model="Form.mailbox"  class="fui-input" placeholder="请输入您的邮箱" type="text" ></input>
					</view>
				</view>
				<view class="fui-cell">
					<view class="fui-cell-label">所在城市</view>
					<view class="fui-cell-info">
						<input v-model="Form.citys" class="fui-input" placeholder="请输入您的所在地" value=""></input>
					</view>
				</view>
				<view class="fui-cell">
					<view class="fui-cell-label">备注</view>
					<view class="fui-cell-info">
						<input v-model="Form.remark" class="fui-input" placeholder="请输入备注" value=""></input>
					</view>
				</view>
			</view>
			<view @click="submitform" class="fui-btn btn-danger block mtop">提交信息</view>
	</view>
</template>

<script>
	export default {
		name: 'diy-from',
		props: {
			value: {
				type: Object
			}
		},
		data() {
			return {
				loading: true,
				markers:[],
				Form:{
					realname:'',
					mobile:'',
					mailbox:'',
					citys:'',
					remark:'',
				}
			};
		},
		created() {
		},
		watch: {
			// 组件刷新监听
			componentRefresh: function(nval) {
				// this.getDataList();
			}
		},
		computed: {
			markerst(){
				return [{
						id:1,
						latitude:this.value.list[0].lat,
						longitude:this.value.list[0].lng
					}]
			},
			style() {
				var css = '';
				css += 'background-color:' + this.value.contentBgColor + ';';
				if (this.value.elementAngle == 'round') {
					css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
					css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
					css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
					css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
				}
				return css;
			}
		},
		methods: {
			submitform(){
				this.$api.sendRequest({
					url: '/api/member/information',
					data: this.Form,
					success: res => {
						this.$util.showToast({
							title: res.message
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.diy-from{
		background: #fff;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
	}
</style>