<template>
	<view class="page">
		<view class="search">
			<input v-model="kw" placeholder="搜索供应商名称/电话" @confirm="search" />
			<button size="mini" @click="search">搜索</button>
			<button size="mini" :type="debtOnly ? 'primary' : 'default'" @click="toggleDebtOnly">只看欠款</button>
		</view>
		<scroll-view scroll-y class="list">
			<view class="item" v-for="s in suppliers" :key="s.id" @click="select(s)">
				<view class="name">{{ s.name }}</view>
				<view class="meta">
					{{ s.mobile || '—' }}
					<text v-if="typeof s.apPayable === 'number'">｜应付：¥ {{ Number(s.apPayable).toFixed(2) }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<button class="primary" @click="createSupplier">新增供应商</button>
		</view>
	</view>
</template>

<script>
	import { get } from '../../common/http.js'
	export default {
    data() { return { kw: '', debtOnly: false, suppliers: [] } },
		onLoad() { this.search() },
		methods: {
			toggleDebtOnly() { this.debtOnly = !this.debtOnly; this.search() },
			async search() {
				try {
					const res = await get('/api/suppliers', { kw: this.kw, debtOnly: this.debtOnly, page: 1, size: 50 })
					this.suppliers = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : [])
				} catch(e) { uni.showToast({ title: '加载失败', icon: 'none' }) }
			},
			createSupplier() { uni.navigateTo({ url: '/pages/supplier/form' }) },
			select(s) {
				try {
					const pages = getCurrentPages()
					const opener = pages && pages.length >= 2 ? pages[pages.length - 2] : null
					const vm = opener && opener.$vm ? opener.$vm : null
					const canPick = !!(vm && vm.order)
					if (canPick) {
						vm.order.supplierId = s.id
						if (Object.prototype.hasOwnProperty.call(vm, 'supplierName')) vm.supplierName = s.name
						uni.navigateBack()
					} else {
						uni.navigateTo({ url: `/pages/supplier/form?id=${s.id}` })
					}
				} catch (_) {
					uni.navigateTo({ url: `/pages/supplier/form?id=${s.id}` })
				}
			}
		}
	}
</script>

<style>
	.page { display:flex; flex-direction: column; height: 100vh; }
	.search { display:flex; gap: 12rpx; padding: 16rpx; background:#fff; }
	.search input { flex:1; background:#f6f6f6; border-radius: 12rpx; padding: 12rpx; }
	.list { flex:1; }
	.item { padding: 20rpx 24rpx; background:#fff; border-bottom: 1rpx solid #f1f1f1; }
	.name { color:#333; margin-bottom: 6rpx; }
	.meta { color:#888; font-size: 24rpx; }
</style>



