<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="type">
			<el-radio-group v-model="form.type">
				<el-radio label="income">收入</el-radio>
				<el-radio label="expense">支出</el-radio>
			</el-radio-group>
		</el-form-item>

		<el-form-item label="所属家庭" prop="family_id">
			<el-select v-model="form.family_id" placeholder="请选择所属家庭" style="width: 100%;" @change="handleFamilyChange">
				<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="account_id">
			<el-select v-model="form.account_id" placeholder="请选择账户" style="width: 100%;">
				<el-option
					v-for="account in accounts"
					:key="account.id"
					:label="account.name"
					:value="account.id">
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="分类" prop="category_id">
			<el-select v-model="form.category_id" placeholder="请选择分类" style="width: 100%;">
				<el-option
					v-for="category in filteredCategories"
					:key="category.id"
					:label="category.name"
					:value="category.id">
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="金额" prop="amount">
			<el-input-number v-model="form.amount" :precision="2" :step="0.01" :min="0.01" style="width: 100%;" />
		</el-form-item>

		<el-form-item label="日期" prop="date">
			<el-date-picker
				v-model="form.date"
				type="date"
				placeholder="选择日期"
				style="width: 100%;">
			</el-date-picker>
		</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.records.save',
	data(){
		return {
			visible: false,
			mode: 'add',
			form: {
				id: 0,
				type: 'expense',
				family_id: null,
				account_id: null,
				category_id: null,
				amount: 0,
				date: '',
				remark: '',
				creator_name: '',
				created_at: '',
				updated_at: ''
			},
			rules: {
				type: [
					{ required: true, message: '请选择记录类型', trigger: 'change' }
				],
				family_id: [
					{ required: true, message: '请选择所属家庭', trigger: 'change' }
				],
				account_id: [
					{ required: true, message: '请选择账户', trigger: 'change' }
				],
				category_id: [
					{ required: true, message: '请选择分类', trigger: 'change' }
				],
				amount: [
					{ required: true, message: '请输入金额', trigger: 'blur' },
					{ type: 'number', min: 0.01, message: '金额必须大于0', trigger: 'blur' }
				],
				date: [
					{ required: true, message: '请选择日期', trigger: 'change' }
				]
			},
			families: [],
			accounts: [],
			categories: []
		}
	},
	computed: {
		filteredCategories(){
			return this.categories.filter(cat => cat.type === this.form.type)
		}
	},
	methods:{
		open(mode){
			this.mode = mode
			this.visible = true
			if(mode !== 'show'){
				this.loadFamilies()
				this.loadCategories()
			}
			return this
		},
		setData(data){
			this.form = {
				id: data.id || 0,
				type: data.type || 'expense',
				family_id: data.family_id || null,
				account_id: data.account_id || null,
				category_id: data.category_id || null,
				amount: data.amount || 0,
				date: data.date || '',
				remark: data.remark || '',
				creator_name: data.creator_name || '',
				created_at: data.created_at || '',
				updated_at: data.updated_at || ''
			}
			if(data.family_id){
				this.loadAccounts(data.family_id)
			}
			return this
		},
		async loadFamilies(){
			const res = await this.$API.account.family.list.get({})
			if(res.code === 1){
				this.families = res.data.list || []
			}
		},
		async loadAccounts(familyId){
			const res = await this.$API.account.accounts.list.get({family_id: familyId})
			if(res.code === 1){
				this.accounts = res.data.list || []
			}
		},
		async loadCategories(){
			// 这里需要根据实际的分类接口进行调整
			// 暂时使用模拟数据
			this.categories = [
				{id: 1, name: '餐饮', type: 'expense'},
				{id: 2, name: '购物', type: 'expense'},
				{id: 3, name: '交通', type: 'expense'},
				{id: 4, name: '娱乐', type: 'expense'},
				{id: 5, name: '工资', type: 'income'},
				{id: 6, name: '奖金', type: 'income'},
				{id: 7, name: '投资', type: 'income'}
			]
		},
		handleFamilyChange(){
			this.form.account_id = null
			if(this.form.family_id){
				this.loadAccounts(this.form.family_id)
			}else{
				this.accounts = []
			}
		},
		async submit(){
			await this.$refs.formRef.validate(async (valid) => {
				if(valid){
					const api = this.mode === 'add' ? this.$API.account.records.add : this.$API.account.records.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>
