<template>
	<view class="page">
		<view class="form">
			<view class="field"><text class="label">账户名称</text><input class="input" v-model="form.name" placeholder="必填"/></view>
			<view class="field" @click="showType=true">
				<text class="label">账户类型</text>
				<text class="value">{{ typeLabel(form.type) }}</text>
			</view>
			<view v-if="form.type==='bank'" class="field"><text class="label">银行名称</text><input class="input" v-model="form.bankName" placeholder="选填"/></view>
			<view v-if="form.type==='bank'" class="field"><text class="label">银行账号</text><input class="input" v-model="form.bankAccount" placeholder="选填"/></view>
			<view class="field"><text class="label">当前余额</text><input class="input" type="number" v-model="form.openingBalance" placeholder="0.00"/></view>
		</view>
		<view class="actions">
			<button class="primary" @click="save">保存</button>
		</view>
		<uni-popup ref="popup" type="bottom" v-model="showType">
			<view class="sheet">
				<view class="sheet-item" v-for="t in types" :key="t.key" @click="form.type=t.key;showType=false">{{ t.name }}</view>
				<view class="sheet-cancel" @click="showType=false">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { post, put, get } from '../../common/http.js'
export default {
	data(){
		return {
			id: null,
			form: { name: '', type: 'cash', bankName: '', bankAccount: '', openingBalance: '' },
			showType: false,
			types: [
				{ key: 'cash', name: '现金' },
				{ key: 'bank', name: '银行存款' },
				{ key: 'wechat', name: '微信' },
				{ key: 'alipay', name: '支付宝' },
				{ key: 'other', name: '其他' }
			]
		}
	},
	onLoad(q){ this.id = q && q.id ? Number(q.id) : null; if (this.id) this.load(); },
	methods: {
		typeLabel(t){ const m = {cash:'现金', bank:'银行存款', wechat:'微信', alipay:'支付宝', other:'其他'}; return m[t]||t },
		async load(){ try { const list = await get('/api/accounts'); const a = (Array.isArray(list)?list:(list?.list||[])).find(x=>x.id==this.id); if (a) { this.form={ name:a.name, type:a.type, bankName:a.bank_name||a.bankName||'', bankAccount:a.bank_account||a.bankAccount||'', openingBalance:'' } } } catch(e){} },
		async save(){
			if (!this.form.name) { uni.showToast({ title: '请输入名称', icon: 'none' }); return }
			try {
				const body = { ...this.form, openingBalance: Number(this.form.openingBalance||0) }
				if (this.id) await put(`/api/accounts/${this.id}`, body)
				else await post('/api/accounts', { ...body, status: 1 })
				uni.showToast({ title: '已保存', icon: 'success' })
				setTimeout(()=>uni.navigateBack(), 300)
			} catch(e) { uni.showToast({ title: '保存失败', icon: 'none' }) }
		}
	}
}
</script>

<style lang="scss">
.page { display:flex; flex-direction: column; height: 100vh; }
.form { background:$uni-bg-color-grey; }
.field { display:flex; align-items:center; justify-content: space-between; padding: 18rpx 20rpx; border-bottom:1rpx solid $uni-border-color; }
.label { color:$uni-text-color-grey; }
.input { flex:1; text-align: right; color:$uni-text-color; }
.value { color:$uni-text-color; }
.actions { margin-top: 20rpx; padding: 0 20rpx; }
.primary { width: 100%; background: $uni-color-primary; color:#fff; border-radius: 8rpx; padding: 22rpx 0; }
.sheet { background:$uni-bg-color-grey; }
.sheet-item { padding: 26rpx; text-align:center; border-bottom:1rpx solid $uni-border-color; }
.sheet-cancel { padding: 26rpx; text-align:center; color:$uni-text-color-grey; }
</style>


