<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="type">
			<el-select v-model="form.type" placeholder="请选择账户类型" style="width: 100%;">
				<el-option label="现金" value="cash"></el-option>
				<el-option label="银行卡" value="bank_card"></el-option>
				<el-option label="信用卡" value="credit_card"></el-option>
				<el-option label="支付宝" value="alipay"></el-option>
				<el-option label="微信" value="wechat"></el-option>
				<el-option label="其他" value="other"></el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="所属家庭" prop="family_id">
			<el-select v-model="form.family_id" placeholder="请选择所属家庭" style="width: 100%;">
				<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="initial_balance">
			<el-input-number v-model="form.initial_balance" :precision="2" :step="0.01" :min="0" style="width: 100%;" />
		</el-form-item>

		<el-form-item label="备注" prop="remark">
			<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="200" show-word-limit />
		</el-form-item>

		<el-form-item label="创建者" 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>
export default {
	name: 'account.accounts.save',
	data(){
		return {
			visible: false,
			mode: 'add',
			form: {
				id: 0,
				name: '',
				type: 'cash',
				family_id: null,
				initial_balance: 0,
				remark: '',
				creator_name: '',
				created_at: '',
				updated_at: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入账户名称', trigger: 'blur' },
					{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请选择账户类型', trigger: 'change' }
				],
				family_id: [
					{ 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,
				name: data.name || '',
				type: data.type || 'cash',
				family_id: data.family_id || null,
				initial_balance: data.initial_balance || 0,
				remark: data.remark || '',
				creator_name: data.creator_name || '',
				created_at: data.created_at || '',
				updated_at: data.updated_at || ''
			}
			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.accounts.add : this.$API.account.accounts.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>
