<template>
	<view class="page-wrap">
		<view class="search-bar">
			<uni-icons type="settings-filled" color="#2979ff" size="28" @click="show = true" />
			<u-popup :show="show" mode="top" :round="10" @close="close" @open="open">
				<view class="filter-form">


					<view class="filter-row" @click.stop="handleShowPicker({title: '生产单元', name: 'SKProductionUnit'})">
						<text class="filter-field-title">生产单元</text>
						<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.MineType" suffixIconStyle="color: #909399"></u--input>
					</view>
					<view class="filter-row" @click.stop="handleShowPicker({title: '检查层级', name: 'SKDepartmentTypeEnum'})">
						<text class="filter-field-title">检查层级</text>
						<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckLevel" suffixIconStyle="color: #909399"></u--input>
					</view>
					<view class="filter-row" @click.stop="handleShowPicker({title: '检查类型', name: 'CheckType'})">
						<text class="filter-field-title">检查类型</text>
						<u--input placeholder="选择任务类型" suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckType" suffixIconStyle="color: #909399"></u--input>
					</view>
					<view class="filter-row" @click.stop="handleShowPicker({title: '检查周期', name: 'SKPLANCHECKFREQUENCYEnum'})">
						<text class="filter-field-title">检查周期</text>
						<u--input suffixIcon="arrow-down" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckCycle" suffixIconStyle="color: #909399"></u--input>
					</view>
					<view class="filter-row">
						<text class="filter-field-title">检查部门</text>
						<u--input placeholder="检查部门" customStyle="height: 20px" fontSize="13px" v-model="filterModel.CheckDepart"></u--input>
					</view>
					<view class="filter-row">
						<text class="filter-field-title">检查对象</text>
						<u--input placeholder="请输入检查对象" v-model="filterModel.CheckPost" customStyle="height: 20px" fontSize="13px"></u--input>
					</view>
					<view class="btn-groups">
						<button @click="handleReset" size='mini' type="default">重置</button>
						<button @click="handleSearch" size='mini' type="primary">查询</button>
					</view>
				</view>
			</u-popup>
			<u-picker :show="comPickerInfo.showPicker" :columns="comPickerInfo.columns" @confirm="onConfirmPicker" @close="closePicker" @cancel="closePicker" keyName="NAME"></u-picker>
		</view>
		<view class="list-wrap">
			<common-card v-if="lists.length" :titleIcon="true" :dataSource="item" v-for="item in lists" @click="viewDetail(item)">
				<view class="content">
					<view class="field">
						<text class="left">生产单元：</text>
						<text class="value">{{item.MineType}}</text>
					</view>
					<view class="field">
						<text class="left">检查层级：</text>
						<text class="value">{{item.CheckLevel}}</text>
					</view>
					<view class="field">
						<text class="left">检查类型：</text>
						<text class="value">{{item.CheckType}}</text>
					</view>
					<view class="field">
						<text class="left">检查周期：</text>
						<text class="value">{{item.CheckCycle}}</text>
					</view>
					<view class="field">
						<text class="left">检查部门：</text>
						<text class="value">{{item.CheckDepart}}</text>
					</view>
					<view class="field">
						<text class="left">检查对象：</text>
						<text class="value">{{item.CheckPost}}</text>
					</view>

				</view>
			</common-card>
			<view v-if="loading" class="loading-tip">加载中...</view>
			<view v-else class="loading-tip">已加载全部数据</view>

			<u-empty v-else text="暂无数据" icon="/static/empty@2x.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		initFilter,
		extendRule,
		extendInclude,
		extendIgnoreDataRule,
		transformData
	} from '../../../../../utils/common'
	import {
		getEnum,
		GetEnumAnyOrder
	} from '../../../../../services/common';
	import {
		GetSKCheckType,
		SKEnterpriseLibraryNew
	} from '../../../../../services/apply/subPages/SK/SKServices.js'

	export default {
		data() {
			return {
				lists: [],
				show: false,
				pageIndex: 20,
				loading: true,
				pageSize: 20,
				total: 0,
				filterModel: {
					MineType: '',
					CheckLevel: '',
					CheckCycle: '',
					CheckType: '',
					CheckDepart: '',
					CheckPost: '',
				},
				comPickerInfo: {
					showPicker: false,
					columns: [],
					title: '',
					name: ''
				},
				totalData: {},
				allData: {},
				filterData: {},
				enumsData: {}, // 存储所有枚举数据（键：枚举名称，值：处理后的枚举列表）
				enumsText: {} // 存储枚举文本列表（用于下拉选择等场景）
			}
		},
		onLoad(option) {
			this.fetchEnums(['SKProductionUnit', 'SKDepartmentTypeEnum', 'SKPLANCHECKFREQUENCYEnum']);
			// this.loadData()
		},
		methods: {
			fetchEnums(enumNames) {
				var dataParm = {
					'name': enumNames.join('|')
				}
				GetEnumAnyOrder(dataParm).then(res => {
					let newd = transformData(res, enumNames)
					this.enumsData = newd[0];
					// 生成文本列表（如需要）
					this.enumsText = newd[1]
					this.loadData();
				})
			},
			handleSearch() {
				this.initData()
				this.reserch()
				this.show = false
				this.comPickerInfo.showPicker = false
			},
			reserch() {
				let filteredData = this.allData.filter(item => {
					// 生产单元筛选（非空时才过滤）
					if (this.filterModel.MineType && item.MineType !== this.filterModel.MineType) {
						return false;
					}
					// 检查层级筛选
					if (this.filterModel.CheckLevel && item.CheckLevel !== this.filterModel.CheckLevel) {
						return false;
					}
					// 检查层级筛选
					if (this.filterModel.CheckCycle && item.CheckCycle !== this.filterModel.CheckCycle) {
						return false;
					}
					// 检查类型筛选
					if (this.filterModel.CheckType && item.CheckType !== this.filterModel.CheckType) {
						return false;
					}
					// 检查部门筛选（支持模糊匹配）
					if (this.filterModel.CheckDepart &&
						!item.CheckDepart.includes(this.filterModel.CheckDepart)) {
						return false;
					}
					// 检查对象筛选（支持模糊匹配）
					if (this.filterModel.CheckPost &&
						!item.CheckPost.includes(this.filterModel.CheckPost)) {
						return false;
					}
					// 所有条件都满足
					return true;
				});
				// 将筛选后的数据赋值给totalData，用于后续分页加载
				this.totalData = filteredData;
				this.filData()
				// 重新加载数据（会根据分页规则显示第一页）
				// this.reload();
			},
			handleReset() {
				this.filterModel = {
					MineType: '',
					CheckLevel: '',
					CheckCycle: '',
					CheckType: '',
					CheckDepart: '',
					CheckPost: '',
				}
				this.initData()
				this.filData()
				this.show = false
				this.comPickerInfo.showPicker = false
			},
			close() {
				this.show = false
			},
			open() {

			},
			viewDetail(checkShowData) {
				uni.setStorageSync('checkShowData', checkShowData);
				uni.navigateTo({
					url: 'checkShow'
				})
			},
			onConfirmPicker(e) {
				if (this.comPickerInfo.name == 'CheckType') {
					this.filterModel.CheckType = e.value[0].NAME
				} else if (this.comPickerInfo.name == 'SKDepartmentTypeEnum') {
					this.filterModel.CheckLevel = e.value[0].NAME
				} else if (this.comPickerInfo.name == 'SKPLANCHECKFREQUENCYEnum') {
					this.filterModel.CheckCycle = e.value[0].NAME
				} else if (this.comPickerInfo.name == 'SKProductionUnit') {
					this.filterModel.MineType = e.value[0].NAME
				}

				this.comPickerInfo.showPicker = false
			},
			handleShowPicker(val) {
				if (val.name == 'CheckType') {
					const orgId = uni.getStorageSync('orgId')
					const json = initFilter(orgId)
					GetSKCheckType(json).then(res => {
						this.comPickerInfo = {
							showPicker: true,
							title: val.title,
							name: val.name,
							formIndex: val.formIndex,
							columns: [res.Data]
						}
					})
				} else {
					this.comPickerInfo = {
						showPicker: true,
						title: val.title,
						name: val.name,
						formIndex: val.formIndex,
						columns: [this.enumsData[val.name]]
					}
				}
			},
			handleTab(t) {
				this.currentTab = t
			},
			initData() {
				this.lists = []
				this.totalData = this.allData
				this.pageIndex = 20


			},
			async loadData() {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId);
				extendIgnoreDataRule(json)
				SKEnterpriseLibraryNew(json).then(res => {

					this.totalData = (res || []).map(i => {
						return {
							...i,
							title: i.CheckDepart,
						}
					})
					this.allData = this.totalData



					this.filData()
				})
			},
			filData() {
				if (this.totalData.length > 20) {
					this.loading = true
					this.lists = this.totalData.slice(0, 20);
				} else {
					this.lists = this.totalData
					this.loading = false
				}
			},
			reload() {
				if (this.lists.length < this.totalData.length) {
					this.loading = true
					const endIndex = this.pageIndex + this.pageSize;
					this.lists = this.totalData.slice(0, endIndex);
					this.pageIndex = endIndex;

				} else {
					this.loading = false
				}


			},
			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},
		},
		onReachBottom() {
			this.reload()
		},
	}
</script>


<style scoped>
	@import url("../../../../../style/css/editTemplate.css");

	.loading-tip {
		text-align: center;
		padding: 15px 0;
		color: #999;
		font-size: 14px;
	}

	.filter-form {
		padding: 16px;
	}

	.filter-row {
		margin-bottom: 8px;
	}

	.filter-field-title {
		font-size: 14px;
		color: #8f9ca2;
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
	}

	.search-bar {
		margin-bottom: 10px;
		text-align: right;
	}

	.btn-groups {
		display: flex;
		justify-content: space-between;
	}

	.btn-groups button {
		width: 48%;
	}

	.content-list {
		padding: 10px 0;
	}

	.content .field {
		font-size: 14px;
		line-height: 18px;
		margin-bottom: 4px;
	}

	.content .field .label {
		color: #666;
	}

	.content .field .value {
		color: #333333;
	}

	.card-title {
		margin-bottom: 6px;
		display: flex;
		font-weight: bold;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 16px;
	}

	.card-title .left {
		display: flex;
		align-items: center;
	}

	.card-title .title-icon {
		margin-right: 4px;
	}
</style>