<!--
 * @Date: 2025-10-16 15:15:47
 * @LastEditors: shirlwang
 * @LastEditTime: 2025-10-22 14:17:46
-->
<template>
  <!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
  <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <view style="padding: 40rpx 28rpx;">
      <view class="kinggang">
        <view>
          <view class="num-title" style="color: #1A62CE">重点毕业生数</view>
          <view>1120</view>
        </view>
        <text style="color: #B5C1D1;">｜</text>
        <view>
          <view class="num-title" style="color: #16ACB7">累计需求数</view>
          <view>1120</view>
        </view>
        <text style="color: #B5C1D1;">｜</text>
        <view>
          <view class="num-title" style="color: #6A57D1">累计服务数</view>
          <view>1120</view>
        </view>
      </view>
      <view class="trace-line">
        <view class="trace">
          <view class="title">
            <image src="../../../packageRc/static/trace.png"/>
            毕业生追踪
          </view>
          <view style="display: flex;justify-content: space-between;">
            <view>点击查看</view>
            <uni-icons color="#639AEB" type="arrow-right" size="16"></uni-icons>
          </view>
        </view>
        <view class="sendManager">
          <view class="title">
            <image src="../../../packageRc/static/sendManager.png"/>
            任务下发管理员
          </view>
          <view style="display: flex;justify-content: space-between;">
            <view>点击查看</view>
            <uni-icons color="#DBAA4E" type="arrow-right" size="16"></uni-icons>
          </view>
        </view>
      </view>
      <view class="titles">
        <view class="title-item active"><view>待办需求预警列表</view></view>
        <view>共 {{jobList1count}}条信息</view>
      </view>
      <view v-for="(item, index) in jobList1" :key="index" class="job-list">
        <view class="title">销售顾问</view>
        <view class="info">
          待办内容文字示例待办内容文字示例待办内容文字示例待办内容文字示例
        </view>
        <view class="bottom-line">
          <view>发起时间：2025-09-24  15:02</view>
          <view style="color: #EF7325;">青岛xx公司</view>
        </view>
      </view>
      <view class="titles">
        <view class="title-item active"><view>待服务毕业生列表</view></view>
        <view>共 {{jobListcount}} 条信息</view>
      </view>
      <view v-for="(item, index) in jobList" :key="index" class="person-list">
        <view class="top-info">
          <image v-if="index%2==0" src="../../../packageRc/static/personIcon.png"/>
          <image v-else src="../../../packageRc/static/personIconFe.png"/>
          <view class="top-right">
            <view class="name-line">
              <view class="name">姓名<view   class="tag">{{item.name}}</view></view>
              <view class="service-status">·未服务</view>
            </view>
            <view class="info-line" style="display: flex;">
              <view style="margin-right: 24rpx;"><text>年龄：</text>27岁</view>
              <view><text>服务次数：</text>1次</view>
            </view>
          </view>
        </view>
        <view class="info-line">
          <view><text>联系电话：</text>152****5488</view>
          <view><text>详细地址：</text>{{item.xxdz}}</view>
        </view>
        <view class="services">
          <view @click="showReturnReasonPopup">退回</view>
          <view @click="tiao(item.id)">服务</view>
        </view>
      </view>
    </view>
  </scroll-view>
    
    <!-- 退回原因弹窗 -->
    <uni-popup ref="returnReasonPopup" position="center"  round>
      <view class="popup-content" style="background:rgb(248, 248, 248);">
        
        <textarea 
          v-model="returnReason"
          class="reason-textarea" 
          placeholder="请输入退回原因"
          placeholder-class="placeholder-style"
          rows="5"
          maxlength="200"
        ></textarea>
        <view class="popup-footer">
          <button class="cancel-btn" @click="cancelReturn">取消</button>
          <button class="confirm-btn" @click="confirmReturn">确认退回</button>
        </view>
      </view>
    </uni-popup>
</template>

<script setup>
import { personInfoList,personAlertList } from '../../api/personinfo/index'
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
let activeTab = ref(1)
let activeTitle = ref(1)
let jobList = ref([{},{},{},{},{}])
let jobListcount = ref()
let jobList1 = ref([{},{}])
let jobList1count = ref()
// 退回原因弹窗相关
let returnReasonPopup = ref(null)
let returnReason = ref('')
let currentItemIndex = ref(-1)
function back() {
  uni.navigateBack({
    delta: 1
  });
 
};
onMounted(() => {
  getlist();
  getlistyujing();
});

async function getlist(){
  
  try {
    const res = await personInfoList();
    console.log("res", res);
    jobList.value = res.rows || [];
    jobListcount.value=res.total || 0
  } catch (error) {
    console.error("获取数据失败:", error);
    jobList.value = [];
  }
};
async function getlistyujing(){
  
  try {
    const res = await personAlertList();
    console.log("res", res);
    jobList1.value = res.rows || [];
    jobList1count.value=res.total || 0
  } catch (error) {
    console.error("获取数据失败:", error);
    jobList1.value = [];
  }
};
 
// 显示退回原因弹窗
function showReturnReasonPopup() {
    console.log("退回")
  returnReason.value = '' 
  // 使用 ref 控制弹窗显示
  if (returnReasonPopup.value) {
    returnReasonPopup.value.open()
  }
}

function tiao(id){
  console.log('尝试导航到待办详情页面，ID:', id);
  // 尝试直接使用uni.navigateTo，使用正确的格式并传递id参数
  uni.navigateTo({
    url: `/packageRc/pages/daiban/daibandetail?id=${id}`,
    success: function() {
      console.log('导航成功');
    },
    fail: function(err) {
      console.error('导航失败:', err);
    }
  });
}

// 确认退回
function confirmReturn() {
  if (!returnReason.value.trim()) {
    uni.showToast({
      title: '请填写退回原因',
      icon: 'none'
    })
    return
  }
  
  // 这里可以添加提交退回原因的API调用
  console.log('退回原因:', returnReason.value, '项目索引:', currentItemIndex.value)
  
  // 模拟提交成功
  uni.showToast({
    title: '退回成功'
  })
  
  // 使用 ref 控制弹窗关闭
  if (returnReasonPopup.value) {
    returnReasonPopup.value.close()
  }
}

// 取消退回
function cancelReturn() {
  // 使用 ref 控制弹窗关闭
  if (returnReasonPopup.value) {
    returnReasonPopup.value.close()
  }
}
function viewMore() {
  // uni.navigateTo({
  //   url: '/pages/jobList/jobList'
  // })
}
</script>

<style lang="less" scoped>
view{box-sizing: border-box;display: block;}
.container{
  background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
  height: 100vh;
  min-width: 100vw;
  padding-bottom: 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.kinggang{ 
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 36rpx 32rpx 33rpx 32rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  border: 3rpx solid #FFFFFF;
  margin-bottom: 24rpx;background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 52%);
  >view{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-weight: bold;
    >view{font-size: 50rpx;}
    .num-title{
      font-size: 28rpx;
      margin-top: 16rpx;
      font-weight: normal;
    }

    // text{
    //   font-size: 28rpx;
    // }
  }
  image{
    width: 78rpx;
    // margin-bottom: 15rpx;
    height: 78rpx;
  }
  
  /* 退回原因弹窗样式 */
  .popup-content {
    background: #FFFF;
    border-radius: 24rpx;
    padding: 48rpx;
    width: 88%;
    box-sizing: border-box;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  }
  
  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #282828;
    margin-bottom: 36rpx;
    text-align: center;
  }
  
  .reason-textarea {
    width: 100%;
    border: 2rpx solid #D8D8D8;
    border-radius: 12rpx;
    padding: 24rpx;
    min-height: 220rpx;
    font-size: 30rpx;
    color: #333333;
    box-sizing: border-box;
    background: #FAFAFA;
  }
  
  .placeholder-style {
    color: #999999;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
  }
  
  .cancel-btn,
  .confirm-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 16rpx;
    font-size: 32rpx;
    text-align: center;
    margin: 0 15rpx;
    font-weight: 500;
  }
  
  .cancel-btn {
    background: #F8F8F8;
    color: #666666;
    border: none;
  }
  
  .confirm-btn {
    background: #1A62CE;
    color: #FFFFFF;
    border: none;
  }
  
  /* 弹窗背景遮罩层样式 */
  ::v-deep(.uni-popup__wrapper) {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.trace-line{
  width: 100%;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  >view{
    padding: 37.5rpx 32rpx;
    width: calc(50% - 12rpx);
    .title{
      font-size: 28rpx;
      font-weight: bold;
      color: #1D6AD7;
      margin-bottom: 16rpx;
      display: flex;
      image{
        width: 46rpx;
        height: 46rpx;
        margin-right: 11rpx;
      }
    }
    .more{
      display: flex;
      justify-content: space-between;
    }
  }
  .trace{
    color: #2E77DF;
    border: 2rpx solid #78ADFF;
    background: linear-gradient(0deg, #FFFFFF 1%, #D0E1FF 100%);
    box-shadow: inset 0px 4rpx 10rpx 0px rgba(255, 255, 255, 0.302);
    .title{
      color: #1D6AD7;
    }
  }
  .sendManager{
    border: 2rpx solid #FFC34B;
    color: #C68412;
    box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.302);
    background: linear-gradient(0deg, #FFFFFF 0%, #FBF4D1 100%);
    .title{color: #CE9523;}

  }
}
.tabs{
  margin-bottom: 29rpx;

	border-radius: 16rpx;
	display: flex;
	background: #fff;
	color: #878787;
	text-align: center;
	width: 100%;
	.tab{
		width: 50%;
		border: 4rpx solid transparent;
		border-radius: 16rpx;
		line-height: 64rpx;
		position: relative;
		&.active{
      border: 4rpx solid #fff;
			color: #fff;
			background: linear-gradient(180deg, #79AFFF 1%, #A2B3FE 100%);
      box-shadow: 0px 4rpx 10rpx 0px rgba(40, 102, 194, 0.4);
		}
	}
}
.titles{
  display: flex;
  margin-bottom: 44rpx;
    display: flex;
    justify-content: space-between;
  .title-item{
    font-size: 32rpx;
    font-weight: bold;
    color: #282828;
    margin-right: 32rpx;
    position: relative;
    >view{
      position: relative;
      z-index: 2;
      padding: 0 16rpx;
    }
    &.active::after{
      content: '';
      position: absolute;
      z-index: 1;
      bottom: -12rpx;
      left: 0;
      width: 120%;
      height: 24rpx;
      border-radius: 50px 0px 0px 50px;
      background: linear-gradient(90deg, #78AEFF 0%, rgba(120, 174, 255, 0.31) 52%, rgba(24, 116, 255, 0) 100%);
    }
  }
}
.job-list{
  width: 100%;
  margin: 0 auto;
  color: #333333;
  border-radius: 24rpx;
  background: #FFFFFF;
  padding: 32rpx;
  margin-bottom: 24rpx;
  position: relative;
  .sign{
    position: absolute;
    font-size: 24rpx;
    right: 0;
    top: 0;
    padding: 4rpx 14rpx;
    border: 1rpx solid #EC4827;
    background: rgba(227, 79, 49, 0.09);
    border-top-right-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
    color: #EC4827;
  }
  .top-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-bottom: 16rpx;
    .salary{
      font-size: 32rpx;
      color: #4C6EFB;
      font-weight: bold;
    }
  }
  .title{
    font-size: 32rpx;
    font-weight: bold;
    color: #282828;
    margin-bottom: 16rpx;
    display: flex;
    image{
      width: 46rpx;
      height: 46rpx;
      margin-right: 11rpx;
    }
  }
  .info{
    font-size: 24rpx;
    margin-bottom: 16rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .bottom-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-top: 12rpx;
  }
}
.view-more-btn{ 
  padding: 10rpx 56rpx;
  background: #FFFFFF;
  color: #4C6EFB;
  border: 1rpx solid #4C6EFB;
  text-align: center;
  border-radius: 40rpx;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.person-list{
  padding-top: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  .top-info{
    padding: 0 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    image{
      width: 86rpx;
      height: 86rpx;
      margin-right: 19rpx;
      display: block;
    }
    .top-right{
      flex-grow: 1;
      flex-shrink: 1;
      .name-line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size: 32rpx;
          display: flex;
          margin-right: 15rpx;
          margin-bottom: 3rpx;
          align-items: center;
          .tag{
            font-size: 24rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            margin-left: 15rpx;
            border-radius: 4rpx;
            background: #4D89E3;
            color: #fff;
          }
        }
        .service-status{
          color: #E0A61F;
          font-weight: bold;
          font-size: 26rpx;
        }
      }
      .info-line{
        padding: 0;
        border: 0;
      }
    }
  }
  .info-line{
    padding: 0 32rpx 32rpx;
    color: #3D3D3D;
    border-bottom: 1px solid #E8E8E8;
    >view{
      text{
        color: #8E8E8E;
      }
      font-size: 26rpx;
    }
  }
  .services{
    line-height: 40rpx;
    padding: 28rpx 32rpx;
    display: flex;
    >view{
      flex-grow: 1;
      font-size: 26rpx;
      color: #1A62CE;
      text-align: center;
      &:first-child{
        color: #E04020;
        border-right: 1px solid #D8D8D8;
      }
    }
  }
}
</style>