<template>
<el-drawer v-model="visible" :title="mode === 'show' ? '查看成员' : (mode === 'add' ? '添加成员' : '编辑成员')" size="600px" destroy-on-close>
	<el-form :model="form" :rules="rules" ref="formRef" label-width="100px" :disabled="mode === 'show'">
		<el-form-item label="所属家庭" prop="family_id">
			<el-select v-model="form.family_id" placeholder="请选择所属家庭" style="width: 100%;" :disabled="mode === 'edit'">
				<el-option
					v-for="family in families"
					:key="family.id"
					:label="family.name"
					:value="family.id">
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="用户手机号" prop="user_phone">
			<el-input v-model="form.user_phone" placeholder="请输入用户手机号" :disabled="mode === 'edit'" />
		</el-form-item>

		<el-form-item label="角色" prop="role">
			<el-select v-model="form.role" placeholder="请选择角色" style="width: 100%;">
				<el-option label="家庭主" value="owner"></el-option>
				<el-option label="管理员" value="admin"></el-option>
				<el-option label="成员" value="member"></el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="加入时间" v-if="form.joined_at">
			<el-input v-model="form.joined_at" disabled />
		</el-form-item>

		<el-form-item label="用户信息" v-if="form.user">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="用户ID">{{ form.user.id }}</el-descriptions-item>
				<el-descriptions-item label="昵称">{{ form.user.nickname }}</el-descriptions-item>
				<el-descriptions-item label="手机号">{{ form.user.phone }}</el-descriptions-item>
				<el-descriptions-item label="邮箱">{{ form.user.email || '-' }}</el-descriptions-item>
			</el-descriptions>
		</el-form-item>
	</el-form>

	<template #footer>
		<div style="flex: auto">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submit" v-if="mode !== 'show'">确定</el-button>
		</div>
	</template>
</el-drawer>
</template>

<script>
export default {
	name: 'account.members.save',
	data(){
		return {
			visible: false,
			mode: 'add',
			form: {
				id: 0,
				family_id: null,
				user_id: null,
				user_phone: '',
				role: 'member',
				joined_at: '',
				user: null
			},
			rules: {
				family_id: [
					{ required: true, message: '请选择所属家庭', trigger: 'change' }
				],
				user_phone: [
					{ required: true, message: '请输入用户手机号', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
				],
				role: [
					{ required: true, message: '请选择角色', trigger: 'change' }
				]
			},
			families: []
		}
	},
	methods:{
		open(mode){
			this.mode = mode
			this.visible = true
			if(mode !== 'show'){
				this.loadFamilies()
			}
			return this
		},
		setData(data){
			this.form = {
				id: data.id || 0,
				family_id: data.family_id || null,
				user_id: data.user_id || null,
				user_phone: data.user?.phone || '',
				role: data.role || 'member',
				joined_at: data.joined_at || '',
				user: data.user || null
			}
			return this
		},
		async loadFamilies(){
			const res = await this.$API.account.family.list.get({})
			if(res.code === 1){
				this.families = res.data.list || []
			}
		},
		async submit(){
			await this.$refs.formRef.validate(async (valid) => {
				if(valid){
					const api = this.mode === 'add' ? this.$API.account.members.add : this.$API.account.members.edit
					const res = await api.post(this.form)
					if(res.code === 1){
						this.$message.success(this.mode === 'add' ? '添加成功' : '编辑成功')
						this.visible = false
						this.$emit('success')
					}else{
						this.$message.error(res.message || '操作失败')
					}
				}
			})
		}
	}
}
</script>

<style scoped>
</style>
