<template>
	<view class="page">
		<view class="tabs">
			<view class="tab" :class="{active: tab==='all'}" @click="switchTab('all')">全部</view>
			<view class="tab" :class="{active: tab==='search'}" @click="switchTab('search')">查询</view>
			<view class="tab extra" @click="goMySubmissions">我的提交</view>
		</view>

		<view class="search" :class="{ 'template-mode': query.mode==='template' }" v-if="tab==='search'">
			<view class="mode">
				<picker mode="selector" :range="['直接查询','名称模糊查询','按模板参数查询']" @change="e => (query.mode = ['direct','nameLike','template'][Number(e.detail.value)] || 'direct')">
					<view class="picker">{{ modeLabel }}</view>
				</picker>
			</view>
			<block v-if="query.mode==='direct' || query.mode==='nameLike'">
				<input v-model.trim="query.kw" placeholder="输入名称/条码/规格查询" @confirm="reload" />
			</block>
			<block v-if="query.mode==='template'">
				<view class="picker-row">
					<picker mode="selector" :range="categoryNames" @change="onPickCategory">
						<view class="picker">{{ categoryLabel }}</view>
					</picker>
					<picker mode="selector" :range="templateNames" @change="onPickTemplate">
						<view class="picker">{{ templateLabel }}</view>
					</picker>
				</view>
				<view class="params-wrap">
					<view class="param-row" v-for="(p,idx) in selectedTemplateParams" :key="p.fieldKey">
						<input v-if="p.type==='string'" v-model.trim="paramValues[p.fieldKey]" :placeholder="'输入' + p.fieldLabel" />
						<input v-else-if="p.type==='number'" type="number" v-model.number="paramValues[p.fieldKey]" :placeholder="'输入' + p.fieldLabel" />
						<switch v-else-if="p.type==='boolean'" :checked="!!paramValues[p.fieldKey]" @change="onParamBoolChange(p, $event)" />
						<picker v-else-if="p.type==='enum'" mode="selector" :range="p.enumOptions||[]" @change="onPickParamEnumWrapper(p, $event)">
							<view class="picker">{{ displayParamEnum(p) }}</view>
						</picker>
						<picker v-else-if="p.type==='date'" mode="date" @change="onParamDateChange(p, $event)">
							<view class="picker">{{ paramValues[p.fieldKey] || ('选择' + p.fieldLabel) }}</view>
						</picker>
						<input v-else v-model.trim="paramValues[p.fieldKey]" :placeholder="'输入' + p.fieldLabel" />
					</view>
				</view>
			</block>
			<button size="mini" @click="reload">查询</button>
		</view>

		<scroll-view scroll-y class="list" @scrolltolower="loadMore">
			<block v-if="items.length">
                <view class="item" v-for="it in items" :key="it.id" @click="openDetail(it.id)">
					<image v-if="it.cover" :src="it.cover" class="thumb" mode="aspectFill" />
					<view class="content">
                        <view class="name">
                            <text>{{ it.name }}</text>
                            <text v-if="it.deleted" class="tag-deleted">已删除</text>
							<text v-if="it.platformStatus==='platform'" class="tag-platform">平台推荐</text>
							<text v-else-if="it.sourceSubmissionId" class="tag-custom">我的提交</text>
						</view>
						<view class="meta">{{ it.brand || '-' }} {{ it.model || '' }} {{ it.spec || '' }}</view>
                        <view class="card-params" v-if="it.cardParams && Object.keys(it.cardParams).length">
                            <view class="param" v-for="(v,k) in it.cardParams" :key="k">{{ k }}：{{ v }}</view>
                        </view>
					</view>
				</view>
			</block>
			<view v-else class="empty">
				<text>暂无数据，点击右上角“＋”新增</text>
			</view>
		</scroll-view>

		<!-- 保留“我的提交”页的＋，此处不显示 -->
	</view>
</template>

<script>
import { get } from '../../common/http.js'

export default {
	data() {
		return {
			items: [],
			query: { kw: '', page: 1, size: 20, categoryId: '', mode: 'direct', templateId: '', params: {} },
			finished: false,
			loading: false,
			tab: 'all',
			categories: [],
			templates: [],
			paramValues: {}
		}
	},
	onLoad() {
		const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
		if (!hasToken) {
			this.items = []
			this.categories = []
			uni.showToast({ title: '请登录使用该功能', icon: 'none' })
			return
		}
		this.fetchCategories()
		this.reload()
	},
	onShow() {
		const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
		if (!hasToken) return
		// 从创建/编辑页返回时，确保刷新最新列表
		this.reload()
	},
	computed: {
		categoryNames() { return this.categories.map(c => c.name) },
		categoryLabel() {
			const c = this.categories.find(x => String(x.id) === String(this.query.categoryId))
			return c ? '类别：' + c.name : '选择类别'
		},
		modeLabel() {
			const map = { direct: '直接查询', nameLike: '名称模糊查询', template: '按模板参数查询' }
			return map[this.query.mode] || '直接查询'
		},
		templateNames() { return this.templates.map(t => t.name) },
		templateLabel() {
			const t = this.templates.find(x => String(x.id) === String(this.query.templateId))
			return t ? '模板：' + t.name : '选择模板'
		},
		selectedTemplate() { return this.templates.find(t => String(t.id) === String(this.query.templateId)) || null },
		selectedTemplateParams() { return (this.selectedTemplate && Array.isArray(this.selectedTemplate.params)) ? this.selectedTemplate.params : [] }
	},
	methods: {
		switchTab(t) {
			this.tab = t
			this.query.categoryId = ''
			this.query.templateId = ''
			this.paramValues = {}
			this.reload()
		},
		onPickCategory(e) {
			const idx = Number(e.detail.value)
			const c = this.categories[idx]
			this.query.categoryId = c ? c.id : ''
			this.fetchTemplates()
		},
		onPickTemplate(e) {
			const idx = Number(e.detail.value)
			const t = this.templates[idx]
			this.query.templateId = t ? t.id : ''
			this.paramValues = {}
		},
		onPickParamEnumWrapper(p, e) {
			const idx = Number(e.detail.value)
			const arr = p.enumOptions || []
			this.paramValues[p.fieldKey] = arr[idx]
		},
		onParamBoolChange(p, e) { this.paramValues[p.fieldKey] = e?.detail?.value ? true : false },
		onParamDateChange(p, e) { this.paramValues[p.fieldKey] = e?.detail?.value || '' },
		async fetchCategories() {
			try {
				const res = await get('/api/product-categories', {})
				this.categories = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : [])
			} catch (_) {}
		},
		async fetchTemplates() {
			try {
				const res = await get('/api/product-templates', this.query.categoryId ? { categoryId: this.query.categoryId } : {})
				const list = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : [])
				this.templates = list
			} catch (_) { this.templates = [] }
		},
		reload() {
			this.items = []
			this.query.page = 1
			this.finished = false
			this.loadMore()
		},
		async loadMore() {
			if (this.loading || this.finished) return
			this.loading = true
			try {
				const params = { kw: this.query.kw, page: this.query.page, size: this.query.size }
				if (this.tab === 'search') {
					if (this.query.categoryId) params.categoryId = this.query.categoryId
					if (this.query.templateId) params.templateId = this.query.templateId
					if (this.paramValues && Object.keys(this.paramValues).length) {
						for (const k of Object.keys(this.paramValues)) {
							const v = this.paramValues[k]
							if (v !== undefined && v !== null && v !== '') params['param_' + k] = v
						}
					}
				}
				const res = await get('/api/products', params)
				const list = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : [])
				this.items = this.items.concat(list)
				if (list.length < this.query.size) this.finished = true
				this.query.page += 1
			} catch (e) {
				uni.showToast({ title: '加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
        openDetail(id) {
            uni.navigateTo({ url: '/pages/product/product-detail?id=' + id })
        },
        goMySubmissions() {
			uni.navigateTo({ url: '/pages/product/submissions' })
        },
        async remove(it) {
            try {
                const r = await new Promise(resolve => {
                    uni.showModal({ content: '确认删除该货品？删除后可在后台恢复', success: resolve })
                })
                if (!r || !r.confirm) return
                const { del } = require('../../common/http.js')
                await del('/api/products/' + it.id)
                uni.showToast({ title: '已删除', icon: 'success' })
                this.reload()
            } catch (e) {
                uni.showToast({ title: '删除失败', icon: 'none' })
            }
        }
	}
}
</script>

<style lang="scss">
.page { display:flex; flex-direction: column; height: 100vh; }
.tabs { display:flex; background:$uni-bg-color-grey; }
.tab { flex:1; text-align:center; padding: 20rpx 0; color:$uni-text-color-grey; }
.tab.active { color:$uni-color-primary; font-weight: 600; }
.tab.extra { flex: 0 0 180rpx; color:$uni-color-primary; font-weight: 600; }
.search { display:flex; gap: 12rpx; padding: 16rpx; background:$uni-bg-color-grey; align-items: center; }
.search input { flex:1; background:$uni-bg-color-hover; border-radius: 12rpx; padding: 12rpx; color: $uni-text-color; }
.picker { padding: 8rpx 12rpx; background:$uni-bg-color-hover; border-radius: 10rpx; color:$uni-text-color-grey; }
.template-mode { flex-direction: column; align-items: stretch; gap: 8rpx; }
.picker-row { display:flex; gap: 12rpx; }
.params-wrap { margin-top: 6rpx; background:$uni-bg-color-grey; border-radius: 12rpx; padding: 8rpx 8rpx; }
.list { flex:1; }
.item { display:flex; padding: 20rpx; background:$uni-bg-color-grey; border-bottom: 1rpx solid $uni-border-color; }
.thumb { width: 120rpx; height: 120rpx; border-radius: 12rpx; margin-right: 16rpx; background:$uni-bg-color-hover; }
.content { flex:1; }
.name { color:$uni-text-color; margin-bottom: 6rpx; font-weight: 600; display:flex; align-items:center; gap: 12rpx; }
.tag-platform { font-size: 22rpx; color:#fff; background:#2d8cf0; padding: 4rpx 10rpx; border-radius: 8rpx; }
.tag-custom { font-size: 22rpx; color:#fff; background:#67c23a; padding: 4rpx 10rpx; border-radius: 8rpx; }
.tag-deleted { font-size: 22rpx; color:#fff; background:#909399; padding: 4rpx 10rpx; border-radius: 8rpx; }
.meta { color:$uni-text-color-grey; font-size: 24rpx; }
.card-params { display:flex; flex-wrap:wrap; gap: 8rpx 16rpx; margin-top: 8rpx; }
.card-params .param { color:$uni-text-color-grey; font-size: 22rpx; background:$uni-bg-color-grey; padding: 2rpx 6rpx; border-radius: 8rpx; }
.price { margin-left: 20rpx; color:$uni-color-primary; }
.empty { height: 60vh; display:flex; align-items:center; justify-content:center; color:$uni-text-color-grey; }
.fab { position: fixed; right: 30rpx; bottom: 120rpx; width: 100rpx; height: 100rpx; background:$uni-color-primary; color:#fff; border-radius: 50rpx; text-align:center; line-height: 100rpx; font-size: 48rpx; box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.15); }
</style>







