<template>
	<view class="center plr-25">
		<view class="overflow-y">
			<scroll-view scroll-y style="height: 100%;">
				<view class="flex-column br-12 fs-28 mt-30" style="background: #FFFFFF;">
					<text class="fs-32 fw-700 pad-30" style="text-align: left;">家庭成员</text>
					<view class="flex-row-between pad-30" style="border-bottom: 1rpx solid #E9E9E9;">
						<text>姓名</text>
						<input style="text-align: right;" placeholder="请输入姓名" v-model="data.name" />
					</view>
					<!-- <view class="flex-row-between pad-30" style="border-bottom: 1rpx solid #E9E9E9;" @click="open">
						<text>性别</text>
						<view class="flex v-center">
							<text>{{sex==''?"请选择":sex}}</text>
							<image class="w-25 h-30 ml-10" src="/static/icon_r.png"></image>
						</view>
					</view> -->
					<view class="flex-row-between pad-30" style="border-bottom: 1rpx solid #E9E9E9;">
						<text>手机号</text>
						<input style="text-align: right;" :disabled="disabled" type="tel" maxlength="11"
							placeholder="请输入手机号" v-model="data.phone" />
					</view>

				</view>
				<u-picker :show="show" :columns="columns" closeOnClickOverlay="true" @cancel="close" @close="close"
					@confirm="confirm"></u-picker>
			</scroll-view>
		</view>
		<view class="pt-20">
			<view v-if="type==0" class="fullscreen-btn mb-30" @click="onClick('确认添加')">
				确认添加
			</view>
			<view v-if="type==1" class="fullscreen-btn mb-30" @click="onClick('确认修改')">
				确认修改
			</view>
			<view v-if="type==1" class="fullscreen-btn mb-30" style="background: #FF6363;" @click="onClick('确认删除')">
				确认删除
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false, //禁止输入 true
				show: false,
				sex: '',
				columns: [
					['男', '女']
				],
				type: 0,
				userInfo: '',
				data: {
					id: "",
					proprietorId: 0,
					name: "",
					phone: "",
				}
			};
		},
		onLoad(options) {
			this.type = options.type
			if (this.type == 1) {
				this.disabled = true
			}
			if (!this.$wskj.isNull(options.data)) {
				const json = JSON.parse(decodeURIComponent(options.data))
				console.log(json)
				this.data.id = json.id
				this.data.name = json.name
				this.data.phone = json.phone
			}
			this.getUserInfo()
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.sex = e.value[0]
				console.log("LMG", e.value[0])
			},
			onClick(e) {
				if (e == "确认添加") {
					this.add()
					return
				}
				if (e == "确认修改") {
					this.up()
					return
				}
				if (e == "确认删除") {
					this.delete()
					return
				}
			},
			getUserInfo() {
				const params = {
					url: '/api/login/userInfo',
					loadingTip: '',
					method: 'GET',
					data: {}
				}
				this.$request(params).then(res => {
					this.data.proprietorId = res.data.proprietorId

				})
			},
			add() {
				if (this.$wskj.isNull(this.data.name)) {
					this.$wskj.toast('请输入姓名')
					return
				}
				if (this.$wskj.isNull(this.data.phone)) {
					this.$wskj.toast('请输入手机号')
					return
				}
				const params = {
					url: '/api/familyMember/add',
					data: this.data
				}
				this.$request(params).then(res => {
					this.$u.toast(res.msg || '添加成功')
					setTimeout(() => {
						this.$wskj.goBack(1)
					}, 600)
				})
			},
			up() {
				if (this.$wskj.isNull(this.data.name)) {
					this.$wskj.toast('请输入姓名')
					return
				}
				const params = {
					url: '/api/familyMember/update',
					data: {
						id: this.data.id,
						name: this.data.name
					}
				}
				this.$request(params).then(res => {
					this.$u.toast(res.msg || '修改成功')
					setTimeout(() => {
						this.$wskj.goBack(1)
					}, 600)
				})
			},
			delete() {
				const params = {
					url: '/api/familyMember/delete/' + this.data.id,
				}
				this.$request(params).then(res => {
					this.$u.toast(res.msg || '删除成功')
					setTimeout(() => {
						this.$wskj.goBack(1)
					}, 600)
				})
			},

		}
	};
</script>

<style>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F2F2F2;
	}

	.item {
		width: 100%;
		height: 200rpx;
		margin-top: 20rpx;
	}

	.item2 {
		width: 100%;
		height: 150rpx;
		margin-top: 20rpx;
	}
</style>