<template>
	<view data-component-name="diy-form" 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>
// 自定义表单
import DiyMinx from './minx.js'
export default {
	name: 'diy-from',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [DiyMinx],
	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>