<template>
	<view class="page">
		<view class="field"><text class="label">供应商名称</text><input class="value" v-model="form.name" placeholder="必填" /></view>
		<view class="field"><text class="label">联系人</text><input class="value" v-model="form.contactName" placeholder="可选" /></view>
		<view class="field"><text class="label">手机</text><input class="value" v-model="form.mobile" placeholder="可选" /></view>
		<view class="field"><text class="label">电话</text><input class="value" v-model="form.phone" placeholder="可选（座机）" /></view>
		<view class="field"><text class="label">经营地址</text><input class="value" v-model="form.address" placeholder="可选" /></view>
		<view class="field"><text class="label">初始应付款</text><input class="value" type="digit" v-model.number="form.apOpening" placeholder="默认 0.00" /></view>
		<view class="field"><text class="label">应付款</text><input class="value" type="digit" v-model.number="form.apPayable" placeholder="默认 0.00" /></view>
		<view class="textarea"><textarea v-model="form.remark" maxlength="200" placeholder="备注（最多200字）"></textarea></view>

		<view class="bottom"><button class="primary" @click="save">保存</button></view>
	</view>
</template>

<script>
import { post, put } from '../../common/http.js'
export default {
	data() {
		return {
			id: null,
			form: { name:'', contactName:'', mobile:'', phone:'', address:'', apOpening:0, apPayable:0, remark:'' }
		}
	},
	onLoad(query) { if (query && query.id) { this.id = Number(query.id) } },
	methods: {
		async save() {
			if (!this.form.name) return uni.showToast({ title:'请填写供应商名称', icon:'none' })
			try {
				if (this.id) await put(`/api/suppliers/${this.id}`, this.form)
				else await post('/api/suppliers', this.form)
				uni.showToast({ title:'保存成功', icon:'success' })
				setTimeout(() => uni.navigateBack(), 500)
			} catch(e) { uni.showToast({ title: e?.message || '保存失败', icon:'none' }) }
		}
	}
}
</script>

<style lang="scss">
.page { padding-bottom: 140rpx; }
.field { display:flex; justify-content: space-between; padding: 22rpx 24rpx; background:$uni-bg-color-grey; border-bottom:1rpx solid $uni-border-color; }
.label { color:$uni-text-color-grey; }
.value { color:$uni-text-color; text-align: right; flex: 1; }
.textarea { padding: 16rpx 24rpx; background:$uni-bg-color-grey; margin-top: 12rpx; }
.bottom { position: fixed; left:0; right:0; bottom:0; background:$uni-bg-color-grey; padding: 16rpx 24rpx calc(env(safe-area-inset-bottom) + 16rpx); box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.10); }
.primary { width: 100%; background: $uni-color-primary; color:#fff; border-radius: 999rpx; padding: 20rpx 0; }
</style>


