<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"
                      	v-if="$auth.hasPermi('customer-dev-manage:customer-dev-plan:batchReview')"
                        :src="batchMode ? '/static/images/dev_manage/close_icon.png' : '/static/images/dev_manage/batch_icon.png'"
                        @click="toggleBatch" />
                    <image v-if="$auth.hasPermi('customer-dev-manage:customer-dev-plan:add')" class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
                    <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
                </view>
			</view>

			<!-- 页内 tabs -->
			<view class="tabs">
				<view v-for="(t, i) in tabs" :key="i" :class="['tab', { active: todoType === t.value }]"
					@click="switchTab(t)">
					{{ t.label }}
				</view>
			</view>
			<view :class="['sub-tabs', `bg${currentWorkshopTypeIndex + 1}`]">
				<view v-for="(f, i) in workshopTypeList" :key="i" :class="['tab', { active: workshopType === f.value }]"
					@click="switchWorkshopType(f, i)">
					{{ f.label }}
				</view>
			</view>
		</view>


		<!-- 列表卡片组件 -->
		<view :class="['list-box', { 'pad-batch': batchMode }]">
			<card-list ref="cardRef" :fetch-fn="fetchList" :query="query" :extra="extraParams" :selectable="batchMode"
				row-key="id" :selectedKeys.sync="selectedKeys" :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.customer ? item.customer.name : '' }}</text>
							<text :class="['status', `status_${item.status}`]">{{ filterStatus(item.status) }}</text>
						</view>
						<view class="info-row">
							<text>生产厂</text><text>{{ item.workshop ? item.workshop.name : '' }}</text>
						</view>
						<view class="info-row">
							<text>科办</text><text>{{ item.office ? item.office.name : '' }}</text>
						</view>
						<view class="info-row">
							<text>产品品种</text><text>{{ item.productVariety ? item.productVariety.name : '' }}</text>
						</view>
						<view class="info-row">
							<text>创建时间</text><text>{{ item.createTime }}</text>
						</view>
					</view>
				</template>
			</card-list>
		</view>

		<!-- 批量操作条 待办时才显示驳回和通过-->
		<view v-if="batchMode && todoType === 'WAIT'" class="batch-bar">
			<button class="bbtn reject" @click="batchReject">驳回</button>
			<button class="bbtn" type="primary" @click="batchPass">通过</button>
		</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="statusOptions" />
					</view>
					<view class="form-item">
						<view class="label">科办</view>
						<view class="fake-select" @click="openOfficeSelect">
							<text v-if="!model.officeId" class="placeholder">请选择</text>
							<text v-else class="value">{{ model.officeName }}</text>
						</view>
					</view>
					<view class="form-item">
						<view class="label">创建时间</view>
						<uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
					</view>
				</view>
			</template>
		</filter-modal>
		<!-- 科办单选底部弹层（通用组件） -->
		<single-select-sheet :visible.sync="officeSelectVisible" :options="officeList" :value.sync="filterForm.officeId"
			title="科办" @confirm="onOfficeConfirm" />
		<!-- 批量：统一弹框（通过/驳回） -->
		<uni-popup ref="approvePopup" type="center" :mask-click="false">
			<view class="action-modal">
				<view class="header">{{ approveType === 'PASS' ? '通过' : '驳回' }}</view>
				<view class="body">
					<text class="tip">
						{{ approveType === 'PASS' ? '您将通过该信息的审核' : '您将驳回该信息的审核' }}
					</text>
					<uni-easyinput v-model="approveComment"
						:placeholder="approveType === 'PASS' ? '请输入通过原因' : '请输入驳回原因'" />
				</view>
				<view class="footer">
					<button class="btn cancel" @click="cancelApprove">取消</button>
					<button class="btn confirm" type="primary"
						@click="confirmApprove">{{ approveType === 'PASS' ? '通过' : '驳回' }}</button>
				</view>
			</view>
		</uni-popup>
	</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,
		officeQueryApi,
		statusOptions,
		getTodoTypeStatisticsApi,
		batchApproveApi
	} from '@/api/devManage.js'

	export default {
		components: {
			CardList,
			FilterModal,
			SingleSelectSheet
		},
		data() {
			return {
				searchKeyword: '',
				searchKeywordDebounced: '',
				officeList: [], // 科办列表下拉选
				tabs: [],
				todoType: '',
				workshopTypeList: [{
						label: '全部',
						value: ''
					},
					{
						label: '一分厂',
						value: 'TYPE_1'
					},
					{
						label: '二分厂',
						value: 'TYPE_2'
					},
					{
						label: '三分厂',
						value: 'TYPE_3'
					},
					{
						label: '四分厂',
						value: 'TYPE_4'
					}
				],
				workshopType: '',
				currentWorkshopTypeIndex: 0,
				// 给到 card 的筛选值
				query: {
					status: '',
					officeId: '',
					officeName: '',
					dateRange: []
				},
				extraParams: {},

				// 批量选择
				batchMode: false,
				selectedKeys: [],
				rowKey: 'id',
				selectedRows: [],
				currentItems: [],

				// 筛选弹框
				filterVisible: false,
				filterForm: {
					status: '',
					officeId: '',
					officeName: '',
					dateRange: []
				},
				officeSelectVisible: false,
				// 审核状态枚举（来自 api/devManage.js）
				statusOptions,
				// 批量操作弹框数据
				approveType: 'PASS', // PASS:通过；REFUSE:驳回
				approveComment: ''
			}
		},
		computed: {
			extraCombined() {
				return {
					customerName: this.searchKeywordDebounced || undefined,
					todoType: this.todoType || undefined,
					workshopType: this.workshopType || undefined
				}
			}
		},
		watch: {
			extraCombined: {
				deep: true,
				handler(v) {
					this.extraParams = v
				},
				immediate: true
			},
			// 勾选变化时同步 selectedRows
			selectedKeys: {
				deep: true,
				handler() {
					this.updateSelectedRows()
				}
			}
		},
		created() {
			this.getOffice();
			// 获取待办类型数量统计
			this.getTodoTypeStatisticsFun()
		},
		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
				this.updateSelectedRows()
			},
			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
			},
			switchTab(item) {
				this.todoType = item.value;
			},
			switchWorkshopType(item, i) {
				this.workshopType = item.value;
				this.currentWorkshopTypeIndex = i;
			},
			openFilter() {
				this.filterVisible = true
			},
			onFilterReset(payload) {
				// 保持弹框不关闭，仅同步表单
				this.filterForm = payload
			},
			onFilterConfirm(payload) {
				// 兜底：部分端上 uni-data-checkbox(mode=tag) 不触发 v-model
				if ((payload.status === '' || payload.status == null) && this.filterForm.status !== '') {
					payload.status = this.filterForm.status
				}
				console.log('onFilterConfirm', payload)
				// 关闭弹框，父组件给到 card 的条件
				this.query = {
					...payload
				}
			},
			onStatusChange(e) {
				const raw = e && e.detail && e.detail.value !== undefined ?
					e.detail.value :
					(e && e.value !== undefined ? e.value : '')
				// 直接同步到外层 filterForm，驱动 FilterModal 的 innerModel 更新
				this.filterForm.status = raw
			},
			openOfficeSelect() {
				this.officeSelectVisible = true
			},
			onOfficeConfirm(payload) {
				const val = payload && payload.value != null ? payload.value : ''
				const label = payload && payload.label != null ? payload.label : ''
				this.filterForm.officeId = val
				this.filterForm.officeName = label
			},
			toggleBatch() {
				this.batchMode = !this.batchMode
				if (!this.batchMode) this.selectedKeys = []
			},
			// 根据 selectedKeys 与当前页 items 计算选中行对象
			updateSelectedRows() {
				const key = this.rowKey || 'id'
				const keys = Array.isArray(this.selectedKeys) ? this.selectedKeys : []
				const items = Array.isArray(this.currentItems) ? this.currentItems : []
				this.selectedRows = items.filter(it => keys.includes(it && it[key]))
			},
			batchReject() {
				if (this.selectedKeys.length === 0) return uni.showToast({
					title: '请选择记录',
					icon: 'none'
				})
				this.approveType = 'REFUSE'
				this.approveComment = ''
				this.$refs.approvePopup && this.$refs.approvePopup.open()
			},
			batchPass() {
				if (this.selectedKeys.length === 0) return uni.showToast({
					title: '请选择记录',
					icon: 'none'
				})
				this.approveType = 'PASS'
				this.approveComment = ''
				this.$refs.approvePopup && this.$refs.approvePopup.open()
			},
			cancelApprove() {
				this.$refs.approvePopup && this.$refs.approvePopup.close()
				this.approveComment = ''
			},
			async confirmApprove() {
				this.flowTaskIds = this.selectedRows.map((item) => item.flowTaskId || '' + "");
				batchApproveApi({
					taskIds: this.flowTaskIds,
					approveType: this.approveType,
					message: this.approveComment
				}).then((res) => {
					console.log('batchApproveApi_res', res)
					uni.showToast({
						title: this.approveType === 'PASS' ? '已通过' : '已驳回',
						icon: 'none'
					})
					this.$refs.approvePopup && this.$refs.approvePopup.close()
					this.approveComment = '';
					this.selectedKeys = [];
					this.selectedRows = [];
					this.batchMode = false;
					this.$refs.cardRef && this.$refs.cardRef.reload && this.$refs.cardRef.reload();
					this.getTodoTypeStatisticsFun()
				}).catch(() => {
					console.error('confirmApprove error', e)
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
            onAdd() {
                uni.navigateTo({
                    url: '/pages/dev_manage/add'
                })
            },
			// 列表接口（真实请求）
			fetchList({
				pageIndex,
				pageSize,
				query,
				extra
			}) {
				const params = {
					pageIndex,
					pageSize,
					...extra,
					...query
				}
				// 处理日期范围
				if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
					params.createStartTime = params.dateRange[0] + ' 00:00:00'
					params.createEndTime = params.dateRange[1] + ' 23:59:59'
					delete params.dateRange
				}
				// 关键字（使用去抖后的值避免频繁触发）
				if (this.searchKeywordDebounced) {
					params.customerName = this.searchKeywordDebounced
				}
				return queryApi(params)
					.then(res => {
						console.log('fetchList', 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
						}
					})
			},
			getOffice() {
				officeQueryApi({
					pageIndex: 1,
					pageSize: 9999,
				}).then((res) => {
					const _data = res.data.datas.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					}) || []
					console.log('officeList_data', _data)
					this.officeList = _data;
				});
			},
			getTodoTypeStatisticsFun() {
				getTodoTypeStatisticsApi().then((res) => {
					this.tabs = [{
							label: `全部（${res.data.allCount > 999 ? '999+' : res.data.allCount || 0}）`,
							value: ''
						},
						{
							label: `待办（${res.data.todoCount > 999 ? '999+' : res.data.todoCount || 0}）`,
							value: 'WAIT'
						},
						{
							label: `已办（${res.data.completedCount > 999 ? '999+' : res.data.completedCount || 0}）`,
							value: 'COMPLETED'
						}
					]
				});
			},
            filterStatus(status) {
                return this.statusOptions.filter(item => item.value === status)[0].text || '';
            },
            onCardClick(item) {
                const id = (item && (item.id || item.code)) || ''
                if (!id) return
                const query = '?id=' + encodeURIComponent(id) + '&todoType=' + encodeURIComponent(this.todoType || '')
                uni.navigateTo({ url: '/pages/dev_manage/detail' + query })
            },

        }
    }
</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;
				}
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 26rpx 34rpx;
			border-bottom: solid 1px #E7E7E7;

			.tab {
				width: 180rpx;
				text-align: center;
				color: #666;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
				position: relative;
			}

			.tab.active {
				color: $theme-primary;
				font-weight: 600;
			}

			.tab.active::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -13px;
				width: 32rpx;
				height: 6rpx;
				border-radius: 4rpx;
				background: $theme-primary;
			}
		}

		.sub-tabs {
			display: flex;
			align-items: center;
			height: 96rpx;

			&.bg1 {
				background-image: url('~@/static/images/dev_manage/tab_1.png');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: cover;
			}

			&.bg2 {
				background-image: url('~@/static/images/dev_manage/tab_2.png');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: cover;
			}

			&.bg3 {
				background-image: url('~@/static/images/dev_manage/tab_3.png');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: cover;
			}
			&.bg4 {
				background-image: url('~@/static/images/dev_manage/tab_4.png');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: cover;
			}
			&.bg5 {
				background-image: url('~@/static/images/dev_manage/tab_5.png');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: cover;
			}

			.tab {
				width: 50%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.9);

				&.active {
					color: $theme-primary;
				}
			}
		}
	}

	/* 仅当前页覆盖 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: 314rpx;

		&.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_1 {
                    background: $theme-primary;
                }

				&.status_2 {
					background: #2BA471;
				}

				&.status_3 {
					background: #D54941;
				}

				&.status_4 {
					background: #E7E7E7;
					color: rgba(0,0,0,0.9);
				}
			}
		}

		.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%;
				}
			}
		}
	}

	.batch-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		gap: 36rpx;
		padding: 32rpx 30rpx;
		background: #fff;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);

		.bbtn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.reject {
			background: #fff;
			border: 1rpx solid $uni-color-error;
			color: $uni-color-error;
		}
	}

	.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;
		}

		.fake-select {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			background: #f3f3f3;
			border-radius: 12rpx;

			.placeholder {
				color: #999;
			}

			.value {
				color: #333;
			}
		}
	}

	/* 深度覆盖 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;
				}
			}
		}

	}

	.action-modal {
		width: 560rpx;
		padding: 32rpx 28rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.header {
			text-align: center;
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 12rpx;
			color: rgba(0, 0, 0, 0.9);
		}

		.body {
			padding: 12rpx 4rpx 24rpx;

			.tip {
				display: block;
				text-align: center;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.6);
				margin-bottom: 32rpx;
			}

			::v-deep .uni-easyinput {
				width: 100%;
			}
		}

		.footer {
			display: flex;
			justify-content: space-between;
			gap: 16rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
				font-size: 30rpx;
				font-size: 32rpx;

				&::after {
					border: none;
				}
			}

			.cancel {
				background: #fff;
				color: rgba(0, 0, 0, 0.9);
			}

			.confirm {
				background: #fff !important;
				color: $theme-primary !important;
			}
		}
	}
</style>