<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="name">
			<el-input v-model="form.name" placeholder="请输入家庭名称" maxlength="50" show-word-limit />
		</el-form-item>

		<el-form-item label="家庭描述" prop="description">
			<el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入家庭描述" maxlength="200" show-word-limit />
		</el-form-item>

		<el-form-item label="家庭头像" prop="avatar">
			<el-upload
				class="avatar-uploader"
				:action="uploadUrl"
				:headers="uploadHeaders"
				:show-file-list="false"
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload"
				v-if="mode !== 'show'">
				<img v-if="form.avatar" :src="form.avatar" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
			</el-upload>
			<el-avatar v-else-if="form.avatar" :src="form.avatar" :size="100"></el-avatar>
			<el-avatar v-else :size="100">家</el-avatar>
		</el-form-item>

		<el-form-item label="创建者" prop="creator_name" v-if="form.creator_name">
			<el-input v-model="form.creator_name" disabled />
		</el-form-item>

		<el-form-item label="创建时间" v-if="form.created_at">
			<el-input v-model="form.created_at" disabled />
		</el-form-item>

		<el-form-item label="更新时间" v-if="form.updated_at">
			<el-input v-model="form.updated_at" disabled />
		</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>
import { Plus } from '@element-plus/icons-vue'

export default {
	name: 'account.family.save',
	components: { Plus },
	data(){
		return {
			visible: false,
			mode: 'add',
			form: {
				id: 0,
				name: '',
				description: '',
				avatar: '',
				creator_name: '',
				created_at: '',
				updated_at: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入家庭名称', trigger: 'blur' },
					{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
				]
			},
			uploadUrl: '',
			uploadHeaders: {}
		}
	},
	mounted(){
		// 设置上传地址
		const token = localStorage.getItem('token')
		this.uploadHeaders = {
			'Authorization': `Bearer ${token}`
		}
		// 这里需要根据实际情况配置上传接口
		this.uploadUrl = '/api/upload/image'
	},
	methods:{
		open(mode){
			this.mode = mode
			this.visible = true
			return this
		},
		setData(data){
			this.form = {
				id: data.id || 0,
				name: data.name || '',
				description: data.description || '',
				avatar: data.avatar || '',
				creator_name: data.creator_name || '',
				created_at: data.created_at || '',
				updated_at: data.updated_at || ''
			}
			return this
		},
		handleAvatarSuccess(response){
			if(response.code === 1){
				this.form.avatar = response.data.url
				this.$message.success('上传成功')
			}else{
				this.$message.error(response.message || '上传失败')
			}
		},
		beforeAvatarUpload(file){
			const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
			const isLt2M = file.size / 1024 / 1024 < 2

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
				return false
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
				return false
			}
			return true
		},
		async submit(){
			await this.$refs.formRef.validate(async (valid) => {
				if(valid){
					const api = this.mode === 'add' ? this.$API.account.family.add : this.$API.account.family.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>
.avatar-uploader {
	width: 100px;
	height: 100px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar-uploader:hover {
	border-color: #409EFF;
}

.avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
}
</style>
