<template>
	<view class="page">
		<view class="dev-list-fixed">
			<view class="search-row">
				<uni-search-bar v-model="searchKeyword" radius="6" placeholder="请输入所属办" clearButton="auto"
					cancelButton="none" bgColor="#F3F3F3" textColor="rgba(0,0,0,0.4)" @confirm="search"
					@input="onSearchInput" />
				<view class="tool-icons">
					<image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
				</view>
			</view>
		</view>


		<!-- 列表卡片组件 -->
		<view class="list-box">
			<card-list ref="cardRef" :fetch-fn="fetchList" :query="query" :extra="extraParams" row-key="id"
				:enable-refresh="true" :enable-load-more="true" @loaded="onCardLoaded" @error="onCardError">
				<template v-slot="{ item, selected }">
					<view class="card" @click.stop="onCardClick(item)">
						<view class="card-header">
							<text class="title omit2">{{ item.deptName }}</text>
							<text :class="['status', `status_${item.status}`]">{{ filterStatus(item.status) }}</text>
						</view>
						<view class="info-row">
							<text>申请日期</text><text>{{ item.applyDate || '-' }}</text>
						</view>
					</view>
				</template>
			</card-list>
		</view>



		<!-- 筛选弹框 -->
		<filter-modal :visible.sync="filterVisible" :value.sync="filterForm" title="筛选" @reset="onFilterReset"
			@confirm="onFilterConfirm">
			<template v-slot="{ model }">
				<view class="filter-form">
					<view class="form-item">
						<view class="label">状态</view>
						<uni-data-checkbox mode="tag" :multiple="false" :value-field="'value'" :text-field="'text'"
							v-model="model.status" @change="onStatusChange" :localdata="statusLocal" />
					</view>
					<view class="form-item">
						<view class="label">申请日期</view>
						<uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01"
							@change="onDateChange($event, model)" />
					</view>
				</view>
			</template>
		</filter-modal>
	</view>
</template>

<script>
import CardList from '@/components/card/index.vue'
import FilterModal from '@/components/filter/index.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import {
	queryApi
} from '@/api/delay_invoice.js'
import {
	getDicByCodes
} from '@/utils/dic'

export default {
	components: {
		CardList,
		FilterModal,
		SingleSelectSheet
	},
	data() {
		return {
			searchKeyword: '',
			searchKeywordDebounced: '',
			tabs: [],
			// 给到 card 的筛选值
			query: {
				status: '',
				dateRange: []
			},
			extraParams: {},

			// 批量选择
			rowKey: 'id',
			currentItems: [],

			// 筛选弹框
			filterVisible: false,
			filterForm: {
				status: '',
				dateRange: []
			},
			dicOptions: {
				AUDIT_STATUS: [],
			},
			statusLocal: [],
		}
	},
	computed: {
		extraCombined() {
			return {
				deptName: this.searchKeywordDebounced || undefined
			}
		}
	},
	watch: {
		extraCombined: {
			deep: true,
			handler(v) {
				this.extraParams = v
			},
			immediate: true
		},

	},
	created() {
		this.loadAllDicData()
	},
	onLoad() { },
	// 页面触底兜底：当页面自身滚动到底部时，转调卡片组件加载更多
	onReachBottom() {
		if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
			this.$refs.cardRef.onLoadMore()
		}
	},
	beforeDestroy() {
		if (this.searchDebounceTimer) {
			clearTimeout(this.searchDebounceTimer)
			this.searchDebounceTimer = null
		}
	},
	methods: {
		onCardLoaded({
			items
		}) {
			this.currentItems = items
		},
		onCardError() {
			uni.showToast({
				title: '列表加载失败',
				icon: 'none'
			})
		},
		// 输入实时搜索：1200ms 防抖，仅在停止输入超过阈值后刷新
		onSearchInput(val) {
			if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
			this.searchDebounceTimer = setTimeout(() => {
				this.searchKeywordDebounced = this.searchKeyword
				this.searchDebounceTimer = null
			}, 1200)
		},
		// uni-search-bar 确认搜索：更新关键字并触发 CardList 刷新
		search(e) {
			const val = e && e.value != null ? e.value : this.searchKeyword
			this.searchKeyword = val
			this.searchKeywordDebounced = val
		},
		onAdd() {
			uni.navigateTo({
				url: '/pages/replenishment_order/add'
			})
		},
		openFilter() {
			this.filterVisible = true
		},
		onFilterReset(payload) {
			this.filterForm = payload
		},
		onFilterConfirm(payload) {
			if ((payload.status === '' || payload.status == null) && this.filterForm.status !== '') {
				payload.status = this.filterForm.status
			}
			this.query = {
				...payload
			}
		},
		onStatusChange(e) {
			const raw = e && e.detail && e.detail.value !== undefined ?
				e.detail.value :
				(e && e.value !== undefined ? e.value : '')
			this.filterForm.status = raw
		},

		onDateChange(e, model) {
			// 确保同步更新 filterForm，避免数据不同步
			this.filterForm.dateRange = e
		},

		// 列表接口（真实请求）
		fetchList({
			pageIndex,
			pageSize,
			query,
			extra
		}) {
			const params = {
				pageIndex,
				pageSize,
				...extra,
				...query
			}
			if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
				params.applyDateStart = params.dateRange[0]
				params.applyDateEnd = params.dateRange[1]
				delete params.dateRange
			}
			if (this.searchKeywordDebounced) {
				params.deptName = this.searchKeywordDebounced
			}
			return queryApi(params)
				.then(res => {
					const _data = res.data || {};
					const records = _data.datas || [];
					const totalCount = _data.totalCount || 0;
					const hasNext = _data.hasNext || false
					return {
						records,
						totalCount,
						hasNext
					}
				})
				.catch(err => {
					console.error('fetchList error', err)
					this.onCardError()
					return {
						records: [],
						totalCount: 0,
						hasNext: false
					}
				})
		},
		loadAllDicData() {
			const dicCodes = ['AUDIT_STATUS']
			return getDicByCodes(dicCodes).then(results => {
				this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
				this.statusLocal = (this.dicOptions.AUDIT_STATUS || []).map(it => ({
					value: it.code,
					text: it.name
				}))
			}).catch(() => {
				this.dicOptions = {
					AUDIT_STATUS: [],
				}
				this.statusLocal = []
			})
		},
		onCardClick(item) {
			const id = (item && (item.id || item.code)) || ''
			if (!id) return
			const query = '?id=' + encodeURIComponent(id)
			uni.navigateTo({
				url: '/pages/delay_invoice/detail' + query
			})
		},
		filterStatus(status) {
			return this.statusLocal.filter(item => item.value === status)[0].text || '';
		},
	}
}
</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.dev-list-fixed {
	position: fixed;
	top: 96rpx;
	left: 0;
	right: 0;
	z-index: 2;
	background: #fff;

	.search-row {
		display: flex;
		align-items: center;
		padding: 16rpx 32rpx;

		.uni-searchbar {
			padding: 0;
			flex: 1;
		}

		.tool-icons {
			display: flex;

			.tool-icon {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin-left: 32rpx;
			}
		}
	}

}

/* 仅当前页覆盖 uni-search-bar 盒子高度 */
::v-deep .uni-searchbar__box {
	height: 80rpx !important;
	justify-content: start;

	.uni-searchbar__box-search-input {
		font-size: 32rpx !important;
	}
}

.list-box {
	flex: 1;
	padding-top: 140rpx;

	&.pad-batch {
		padding-bottom: 144rpx;
	}

	.card {
		position: relative;
	}

	.card-header {
		margin-bottom: 28rpx;
		position: relative;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50rpx;
			color: rgba(0, 0, 0, 0.9);
			width: 578rpx;
		}

		.status {
			font-weight: 600;
			position: absolute;
			top: -32rpx;
			right: -12rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 14rpx;
			border-radius: 6rpx;

			// 审核中
			&.status_AUDIT {
				background: $theme-primary;
			}

			// 审核通过
			&.status_PASS {
				background: #2BA471;
			}

			// 已驳回
			&.status_REFUSE {
				background: #d54941;
			}

			// 已取消
			&.status_CANCEL {
				background: #e7e7e7;
				color: rgba(0, 0, 0, 0.6);
			}

		}

	}

	.info-row {
		display: flex;
		align-items: center;
		color: rgba(0, 0, 0, 0.6);
		font-size: 28rpx;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		text {
			width: 60%;
			line-height: 32rpx;

			&:last-child {
				color: rgba(0, 0, 0, 0.9);
				width: 40%;
			}

			&.category {
				display: inline-block;
				padding: 4rpx 12rpx;
				border-radius: 6rpx;
				font-size: 24rpx;
				width: auto;

				&.category_A {
					background: #FFF0ED;
					color: #D54941;
				}

				&.category_B {
					background: #FFF1E9;
					color: #E37318;
				}

				&.category_C {
					background: #F2F3FF;
					color: $theme-primary;
				}

				&.category_D {
					background: #E3F9E9;
					color: #2BA471;
				}
			}
		}

	}
}

.filter-form {
	.form-item {
		margin-bottom: 24rpx;
	}

	.label {
		margin-bottom: 20rpx;
		color: rgba(0, 0, 0, 0.9);
		height: 44rpx;
		line-height: 44rpx;
		font-size: 30rpx;
	}

	.uni-easyinput {
		border: 1rpx solid #f3f3f3;
	}

}

/* 深度覆盖 uni-data-checkbox（mode=tag）内部的 tag 展示与间距 */
::v-deep .filter-form .uni-data-checklist .checklist-group {
	.checklist-box {
		&.is--tag {
			width: 212rpx;
			margin-top: 0;
			margin-bottom: 24rpx;
			margin-right: 24rpx;
			height: 80rpx;
			padding: 0;
			border-radius: 12rpx;
			background-color: #f3f3f3;
			border-color: #f3f3f3;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.checklist-content {
				display: flex;
				justify-content: center;
			}

			.checklist-text {
				color: rgba(0, 0, 0, 0.9);
				font-size: 28rpx;
			}
		}

		&.is-checked {
			background-color: $theme-primary-plain-bg !important;
			border-color: $theme-primary-plain-bg !important;

			.checklist-text {
				color: $theme-primary !important;
			}
		}
	}

}
</style>