<template>
    <AppLayout :title="title" :show-bg-image="false" >
		<view class="page-container" >
			<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
				<view class="info-box">
					<view class="info-item info-line">
						<view class="">
							<uni-icons type="contact" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							帮扶记录总数
						</view>
						<view class="info-value">
							{{ stats.totalRecords }}
						</view>
					</view>
					<view class="info-item info-line">
						<view class="">
							<uni-icons type="checkbox" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							进行中记录
						</view>
						<view class="info-value">
							{{ stats.pendingRecords }}
						</view>
					</view>
					<view class="info-item info-line">
						<view class="">
							<uni-icons type="info" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							未帮扶记录
						</view>
						<view class="info-value">
							{{ stats.totalRecords - stats.pendingRecords }}
						</view>
					</view>
					<view class="info-item">
						<view class="">
							<uni-icons type="refresh" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							帮扶率
						</view>
						<view class="info-value">
							{{ stats.assistRate }}%
						</view>
					</view>
				</view>
				<view class="main-list" :style="getBackgroundStyle('k.png')">
					<view class="list-top">
						<view class="list-title">
							<text>筛选条件</text>
							<view class="title-line"></view>
						</view>
						<view class="title-right button-sp-area">
							<button class="mini-btn search-box-btn" type="primary" size="mini" @click="handleSearch">查询</button>
							<button class="mini-btn reset-box-btn" type="default" size="mini" @click="handleReset">重置</button>
						</view>
					</view>
					<view class="search-container">
						<view class="search-item">
						  <text class="label">人员姓名：</text>
						  <uni-easyinput v-model="formData.name" placeholder="请输入人员姓名"></uni-easyinput>
						</view>
						<view class="search-item">
						  <text class="label">身份证号：</text>
						  <uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号"></uni-easyinput>
						</view>
						<view class="search-item">
						  <text class="label">帮扶类型：</text>
						  <uni-data-select :key="1" v-model="formData.taskType" :localdata="taskTypeOptions" placeholder="请选择帮扶类型" @change="onTaskTypeChange"></uni-data-select>
						</view>
						<view class="search-item">
						  <text class="label">帮扶人员：</text>
						  <uni-easyinput v-model="formData.createByName" placeholder="请输入帮扶人员"></uni-easyinput>
						</view>
						<view class="search-item">
						  <text class="label">所属区域：</text>
						  <uni-data-picker ref="picker" class="picker" placeholder="请选择所属区域" popup-title="请选择所属区域" :localdata="regions" v-model="formData.deptTags"
						  					  @change="onchange" >
						  </uni-data-picker>
						  <!-- <uni-data-select v-model="formData.filterSelectDeptIds" :localdata="executeDeptOptions" placeholder="请选择所属区域" @change="onExecuteDeptChange"></uni-data-select> -->
						</view>
						<view class="search-item">
						  <text class="label">帮扶时间：</text>
						  <uni-datetime-picker v-model="filterTimeRange" type="datetimerange" rangeSeparator="至" @change="filterTimeRangeChange" />
						</view>	
					</view>
				</view>
				<view class="main-list" :style="getBackgroundStyle('k.png')">
					<view class="list-top">
						<view class="list-title">
							<text>帮扶记录列表</text>
							<view class="title-line" style="left: 70rpx;"></view>
						</view>
						<view class="title-total">
							共<text class="total-num">{{totalNum}}</text>条记录
						</view>
					</view>
					<view class="list-box" v-if="dataList.length>0">
						<view class="con-box" v-for="(item,index) in dataList" :key="index">
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
									<view class="item-label">
										人员姓名：
									</view>
								</view>
								<view class="item-right">
									{{item.name}}
								</view>
							</view>
							<view class="form-item">
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/num.png'" mode=""></image>
									<view class="item-label">
										身份证号：
									</view>
								</view>
								<view class="item-right">
									{{item.id_card}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/date.png'" mode=""></image>
									<view class="item-label">
										联系电话：
									</view>
								</view>
								<view class="item-right">
									{{item.phone}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
									<view class="item-label">
										居住地址：
									</view>
								</view>
								<view class="item-right">
									{{item.address}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
									<view class="item-label">
										帮扶类型：
									</view>
								</view>
								<view class="item-right">
									{{item.task_type}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
									<view class="item-label">
										帮扶人员：
									</view>
								</view>
								<view class="item-right">
									{{item.create_by_name}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
									<view class="item-label">
										帮扶单位：
									</view>
								</view>
								<view class="item-right">
									{{item.create_by_dept_name}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
									<view class="item-label">
										帮扶日期：
									</view>
								</view>
								<view class="item-right">
									{{item.follow_date}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
									<view class="item-label">
										下次联系：
									</view>
								</view>
								<view class="item-right">
									{{item.next_contact_date}}
								</view>
							</view>
							<view class="form-btns">
							    <button class="action-btn btn-primary" size="mini" @click="goDetail(item)">详情</button>
							    <button class="action-btn btn-success" size="mini" @click="goFollow(item)">跟进</button>
							    <button class="action-btn btn-gradient" size="mini" @click="goRecommend(item)">智能推荐</button>
							    <button class="action-btn btn-info" size="mini" @click="goJobWill(item)">求职意愿</button>
							    <button class="action-btn btn-info" size="mini" @click="goTrainingWill(item)">培训意愿</button>
							    <button class="action-btn btn-warning" size="mini" v-if="!item.create_by_name" @click="returnItem(item)">退回</button>
							</view>
						</view>
					</view>
				    <empty v-else pdTop="200"></empty>
				</view>
			</scroll-view>
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="系统提示" content="是否确认退回？" @confirm="dialogConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad,onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

const title = ref('');
const stats=ref({})
const formData = reactive({
    name: '',
	idCard: '',
	taskType: '',
	createByName: '',
	deptTags: '',
	followDateStart: null,
	followDateEnd: null,
	pageNum: 1,
	pageSize: 10
})
const filterTimeRange=ref([])
const totalNum=ref(0)
const dataList=ref([])
const taskTypeOptions=ref([])
const priorityOptions=ref([])
const allocationStatusOptions=ref([])
const executeDeptOptions=ref([])
const alertDialog = ref(null);
const currentItem = ref({})
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
// 所属区域选项（可根据实际替换为动态数据）
const regions = ref([])
const picker = ref(null)
function listNotParam(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={}
	$api.myRequest('/dispatch/dept/listNotParam',params,'get',9100,header).then((resData) => {
		if(resData && resData.code == 200){
			loadLevelData(resData.data[0].parentId);
			// resData.data.forEach(item=>{
			// 	const obj = {
			// 	    value: item.deptId,
			// 	    text: item.deptName,
			// 		ancestors:item.ancestors
			// 	}
			// 	executeDeptOptions.value.push(obj)
			// })
		}
	});
}
function statisticTask(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={}
	$api.myRequest('/dispatch/assist/records/statisticRecords',params,'get',9100,header).then((resData) => {
		stats.value=resData.data
		if (stats.value.totalRecords > 0 && stats.value.pendingRecords > 0) {
		    stats.value.assistRate = ((stats.value.pendingRecords / stats.value.totalRecords) * 100).toFixed(2);
		} else {
		    stats.value.assistRate = 0;
		}
	});
}
function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/assist_task_type').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				taskTypeOptions.value.push(obj)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_priority').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				priorityOptions.value.push(obj)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_allocation_status').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				allocationStatusOptions.value.push(obj)
			})
		}
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr.value)) {
	    return ''
	}
	const item = arr.value.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
function onTaskTypeChange(e){
	formData.taskType=e
}
function onPriorityChange(e){
	formData.priority=e
}
function onAllocationStatusChange(e){
	formData.allocationStatus=e
}
function filterTimeRangeChange(e){
	formData.createTimeStart=e[0]
	formData.createTimeEnd=e[1]
}
function onExecuteDeptChange(e){
	formData.executeDeptId=e
}
function handleSearch(){
	formData.pageNum=1
	console.log("formData",formData)
	dataList.value=[]
	getDataList()
}
function getDataList(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	$api.myRequest('/dispatch/assist/records/pageRecords',formData,'get',9100,header).then((resData) => {
		console.log("resData",resData)
		resData.rows.forEach(item=>{
			item.task_type=getabelByValue(item.task_type,taskTypeOptions)
		})
		totalNum.value=resData.total
		dataList.value=dataList.value.concat(resData.rows)
		
	});
}
const handleReset = () => {
	dataList.value=[]
	formData.name=''
	formData.idCard=''
	formData.taskType=''
	formData.createByName=''
	formData.deptTags=null
	formData.followDateStart=null
	formData.followDateEnd=''
	formData.pageNum=1
	formData.pageSize=10
	filterTimeRange.value=[]
	getDataList()
}
function goDetail(item){
	navTo('/packageB/priority/recordDetail?id='+item.goal_person_id);
}
function goFollow(item){
	navTo('/packageB/priority/recordFollow?name='+item.name+'&taskType='+item.task_type+'&taskId='+item.task_id+'&personId='+item.person_id+'&goalPersonId='+item.goal_person_id);
}
function goRecommend(item){
	navTo('/packageB/priority/smartRecommend?goalPersonId='+item.goal_person_id);
}
function goJobWill(item){
	navTo('/packageB/priority/jobWill?id='+item.person_id+'&goalPersonId='+item.goal_person_id);
}
function goTrainingWill(item){
	navTo('/packageB/priority/trainingWill?id='+item.person_id+'&goalPersonId='+item.goal_person_id);
}
function returnItem(item){
	if (alertDialog.value) {
	    alertDialog.value.open();
		currentItem.value=item
	}
}
function dialogConfirm(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token')
	}
	let params={
		goalPersonId:currentItem.value.goal_person_id
	}
	$api.myRequest('/dispatch/assist/records/returnRecords',params,'post',9100,header).then((resData) => {
		if(resData.code==200){
			dataList.value=[]
			formData.pageNum=1
			getDataList()
		}
		
	});
}
function scrollBottom(){
	if(formData.pageNum<totalNum.value/formData.pageSize){
		formData.pageNum++
		getDataList()
	}
}
 // 加载某一级的数据（parentId 为空表示根）
async function loadLevelData(parentId,node) {
    let header = {
		'Authorization': uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	};
	let params = { parentId };

	try {
		const resData = await $api.myRequest('/dispatch/dept/list', params, 'get', 9100, header);
		if(resData.data.length==0){
			picker.value.hide()
			return
		}
		const formatted = (resData.data || []).map(item => ({
			text: item.deptName, 
			value: item.tags,
			deptId: item.deptId,
			children: [] 
		}));
		if(node){
			injectChildren(parentId, formatted);
		}else{
			regions.value=formatted
		}
	} catch (error) {
		console.error("加载部门数据失败:", error);
		// uni.showToast({ title: '加载失败', icon: 'none' });
	}
}
// 将子级数据注入到对应的父节点
function injectChildren(parentValue, childrenData) {
    const findAndInject = (nodes) => {
		for (let node of nodes) {
			if (node.deptId === parentValue) {
				// 如果 children 已存在且非空，避免重复加载
				if (!node.children || node.children.length === 0) {
					node.children = childrenData;
				}
				return true;
			}
			if (node.children && node.children.length > 0) {
				if (findAndInject(node.children)) return true;
			}
		}
		return false;
	}

	findAndInject(regions.value);
  // 强制更新
}
// 当用户选择时触发（注意：change 在每级选择后都会触发）
function onchange(e) {
	const selectedValues = e.detail.value;
	// formData.deptId=selectedValues.map(item => item.value).join(',');
	if (selectedValues.length === 0) return;
	// 获取最后一级选中的 value
	const lastSelectedValue = selectedValues[selectedValues.length - 1];
	// 查找该节点是否有 children，如果没有则尝试加载
	const node = findNodeByValue(regions.value, lastSelectedValue);
	if (node && (!node.children || node.children.length === 0)) {
		// 检查接口是否还有下一级（可通过接口返回判断，或先尝试加载）
		// 这里我们直接尝试加载下一级
		loadLevelData(node.deptId , node);
		picker.value.show()
	}
}
// 工具函数：根据 value 查找节点
function findNodeByValue(nodes, value) {
	for (let node of nodes) {
		if (node.value === value.value) {
			return node;
		}
		if (node.children && node.children.length > 0) {
			const found = findNodeByValue(node.children, value);
			if (found) return found;
		}
	}
	return null;
}
onShow(()=>{
})
onLoad((options) => {
	listNotParam()
	statisticTask()
	runAsyncTasks(options)
});
const runAsyncTasks = async (options) => {
	
	await getDictionary()
	await getDataList()
}

</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.page-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top)); /* 如果 AppLayout 有 header，需减去 */
  /* 或者简单用：height: 100vh; */
}
.nearby-scroll
    // 使用flex布局让scroll-view自适应高度，占据剩余空间
  flex: 1
  // overflow: hidden;
.info-box
  margin: 30rpx 30rpx
  background: linear-gradient(0deg, #D9ECFF 0%, #F0F7FF 100%)
  border-radius: 20rpx
  padding: 40rpx 0
  display: flex
  align-items: center
.info-line
  border-right: 2rpx solid #B7D6FF
.info-item
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  width: 50%
.info-label
  font-size: 26rpx
  color: #6E7E9B
  margin-bottom: 20rpx
.info-value
  font-weight: bold
  font-size: 28rpx
  color: #3D61AC
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx

.list-box
  margin-top: 40rpx

:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;
  
.search-container
  padding: 20rpx 0rpx 0rpx 0rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.search-item
  display: flex
  align-items: center
  margin-bottom: 30rpx

.label
  width: 160rpx
  font-size: 28rpx
  color: #404040
  flex-shrink: 0

.input,
.picker
  background: #FFFFFF
  flex: 1
  min-width: 0
.search-box-btn
  border-radius: 32rpx !important
  background: #3088FF !important
  margin-right: 16rpx
.reset-box-btn
  border-radius: 32rpx !important
  background: #02B44D
  color: #fff
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-title
  display: flex
  align-items: center

.form-name
  font-weight: bold
  font-size: 32rpx
  color: #595959
  margin-right:16rpx
.form-type
  border-radius: 8rpx;
  border: 2rpx solid #FF7D26;
  font-size: 24rpx
  color: #F1690E
  padding: 4rpx 10rpx
.form-item
  display: flex
  align-items: center
  justify-content: space-between
  margin-top: 30rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label
  font-size: 26rpx
  color: #B3B3B3
  width: 130rpx
.item-right
  font-size: 26rpx
  color: #737373
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
.form-btns
  margin-top: 30rpx
  display: flex
  flex-wrap: wrap // 允许换行
  justify-content: space-between // 两端对齐，中间留空
  // 如果希望最后一行也撑开，可以使用 space-evenly，但 space-between 配合固定宽度更整齐
  
.action-btn
  border-radius: 12rpx !important // 稍微方一点的圆角，显得更稳重
  font-size: 24rpx !important
  font-weight: 500
  padding: 16rpx 0 !important // 上下内边距
  margin-bottom: 20rpx // 行间距
  display: flex
  align-items: center
  justify-content: center
  // 计算宽度：3个一行，减去间隙。假设总宽100%，gap由justify-content处理
  // 这里设定一个固定比例宽度，确保一行能放下3个
  width: 32% 
  height: 72rpx // 固定高度保证整齐
  line-height: 1.2
  border-width: 1rpx
  border-style: solid

/* --- 样式变体 --- */

// 1. 详情 (主操作 - 蓝色实心)
.btn-primary
  background-color: #3088FF !important
  color: #FFFFFF !important
  border-color: #3088FF !important
  box-shadow: 0 4rpx 12rpx rgba(48, 136, 255, 0.3)

// 2. 跟进 (次主操作 - 绿色实心)
.btn-success
  background-color: #00933E !important
  color: #FFFFFF !important
  border-color: #00933E !important
  box-shadow: 0 4rpx 12rpx rgba(0, 147, 62, 0.3)

// 3. 智能推荐 (特色操作 - 渐变)
.btn-gradient
  background: linear-gradient(92deg, #0DCCFF 0%, #4760FF 100%) !important
  color: #FFFFFF !important
  border: none !important
  box-shadow: 0 4rpx 12rpx rgba(71, 96, 255, 0.4)

// 4. 求职/培训意愿 (辅助操作 - 浅蓝底深蓝字)
.btn-info
  background-color: #EDF5FF !important
  color: #3088FF !important
  border-color: #CBDFFF !important

// 5. 退回 (特殊操作 - 橙色/警告色)
.btn-warning
  background-color: #FFF7E6 !important
  color: #FA8C16 !important
  border-color: #FFD591 !important
</style>
