<template>
  <ContentWrap>
    <!--    顶部标题-->
    <div class="topTitle">
      <img src="../../../../assets/images/my_todo.png" class="todoimg" />
      <span class="tab-title"> 我的代办</span>
      <div class="set-btn" @click="goBack">
        <img src="../../../../assets/images/返回.png" alt="" />
        返回
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <!--    <div class="container">-->
    <el-tabs type="border-card" class="demo-tabs" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
          <span class="custom-tabs-label">
            等待中<span v-if="waitAgentList.length > 0">({{waitAgentList.length}})</span>
          </span>
        </template>
        <!--       中间内容-->
        <p v-show="waitAgentList.length==0" style="text-align: center">暂无数据</p>
        <div class="middleContent" v-for="(item,index) in waitAgentList" :key="index" v-show="waitAgentList.length>0">
          <div class="itemCon">
            <section class="title">等待： <span>{{item.todoTitle}} <span v-if="item.groupName">({{item.groupName}})</span></span></section>
            <section class="itemDetail" @click="goJobMonitor(item.ticketId,item.todoType)">
              <p>相关作业：<span>{{item.ticketName || '-'}}</span></p>
              <p>当前步骤：<span>{{item.currentStepName || '-'}}</span></p>
              <p>当前操作：<span style="color: red">{{item.currentOperateName || '-'}}</span></p>
            </section>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span class="custom-tabs-label">
              处理中<span v-if="handleAgentLsit.length > 0">({{handleAgentLsit.length}})</span>
          </span>
        </template>
        <!--       中间内容-->
        <p v-show="handleAgentLsit.length==0" style="text-align: center">暂无数据</p>
        <div class="middleContent">
          <div class="itemCon" v-for="(item,index) in handleAgentLsit" :key="index" v-show="handleAgentLsit.length>0">
            <section class="title"><span style="color: red">{{item.todoTitle || '-'}} <span v-if="item.groupName">({{item.groupName}})</span></span></section>
            <section class="itemDetail" @click="goJobMonitor(item.ticketId,item.todoType)">
              <p>相关作业：<span>{{item.ticketName || '-'}}</span></p>
              <p>当前步骤：<span>{{item.currentStepName || '-'}}</span></p>
            </section>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <template #label>
          <span class="custom-tabs-label">
            已处理<span v-if="finishedAgentLsit.length > 0">({{finishedAgentLsit.length}})</span>
          </span>
        </template>
        <!--       中间内容-->
        <div class="middleContent">
          <div class="selectCon">
            <span>处理日期：</span>
            <el-select
              v-model="queryParams.queryType"
              placeholder=""
              style="width: 215px; margin-right: 15px"
              @change="handleQueryTypeChange"
            >
              <el-option label="全部" value="0" />
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.TODO_FINISHED_QUERY_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <!-- 仅当 queryType === 3 时显示 -->
            <el-date-picker
              v-if="queryParams.queryType == 3"
              v-model="customDateRange"
              type="daterange"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              size="default"
              @change="handleCustomDateChange"
            />
          </div>
          <p v-show="finishedAgentLsit.length==0" style="text-align: center">暂无数据</p>
          <div class="itemCon" v-for="(item,index) in finishedAgentLsit" :key="index" v-show="finishedAgentLsit.length>0">
            <section class="title"><span>{{item.todoTitle || '-'}} <span v-if="item.groupName">({{item.groupName}})</span></span></section>
            <section class="itemDetail" @click="goJobMonitor(item.ticketId,item.todoType)">
              <p>相关作业：<span>{{item.ticketName || '-'}}</span></p>
              <p>完成时间：<span>{{item.stepUpdateTime || '-'}}</span></p>
            </section>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--    </div>-->
  </ContentWrap>
</template>

<script setup lang="ts">
import dayjs from "dayjs"
import type { TabsPaneContext } from 'element-plus'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import * as Agent from '@/api/system/notify/agent/index'
import * as JobApi from '@/api/job/index'


const router = useRouter()
// const route = useRoute()
const activeName = ref('second')
// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: -1,
  queryType: '0', // 默认全部
  startTime: '',
  endTime: ''
})

const waitAgentList = ref([]) //等待中
const handleAgentLsit = ref([]) //处理中
const finishedAgentLsit = ref([]) //已处理
const customDateRange = ref([]) // 自定义日期范围


onMounted(() => {
  getAgentData()
})
// 返回
const goBack = () => {
  router.go(-1)
}

// 处理下拉切换
const handleQueryTypeChange = () => {
  if (queryParams.queryType == 1) {
    // 近 7 天
    queryParams.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss')
    queryParams.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  } else if (queryParams.queryType == 2) {
    // 近 30 天
    queryParams.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss')
    queryParams.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  } else if (queryParams.queryType == 3) {
    // 自定义，等用户选择
    queryParams.startTime = ''
    queryParams.endTime = ''
  } else {
    // 全部
    queryParams.startTime = ''
    queryParams.endTime = ''
  }

  getAgentData()
}

// 处理自定义日期选择
const handleCustomDateChange = (val) => {
  if (val && val.length == 2) {
    queryParams.startTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
    queryParams.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    getAgentData()
  }
}

// 获取我的代办数据
const getAgentData = async () => {
  const agentData = await Agent.getMyAgent(queryParams)
  waitAgentList.value = agentData.waitAgent
  handleAgentLsit.value = agentData.handleAgent
  finishedAgentLsit.value = agentData.finishAgent
  console.log(agentData, 'agentData')
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


// 跳转作业执行监控页面
const goJobMonitor=async (ticketId:number,todoType:string)=>{
  try{
    const JobData = await JobApi.selectJobTicketById(ticketId)
    if(JobData.data!==null){
      router.push({
        name:'JobMonitor',
        query:{
          id:ticketId,
          todoType:todoType
        }
      })
    }
  }catch(error){
    console.log(error)
  }
}
</script>

<style scoped lang="scss">
.topTitle {
  width: 100%;
  line-height: 30px;
}

.todoimg {
  width: 20px;
  height: 20px;
  margin: 10px 0 0;
}

.set-btn {
  width: 60px;
  height: 30px;
  border: 1px solid black;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  float: right;
  cursor: pointer;
  margin: 10px 0;

  img {
    width: 14px;
    height: 14px;
  }
}

.container {
  width: 100%;
  max-height: 800px;
  overflow: auto;
  //background: #000;
}

.middleContent {
  width: 100%;
  max-height: 700px;
  overflow: auto;
  //background: pink;
  .itemCon {
    width: 45%;
    min-height: 150px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
    transition: all 0.3s ease;
    box-sizing:border-box;
    //border: 1px solid black;
    section {
      width: 100%;
      padding: 0 15px;
    }

    .title {
      height: 50px;
      line-height: 50px;
      margin-bottom: 5px;
      border-bottom: 1px solid black;
    }

    .itemDetail {
      p {
        line-height: 35px;
      }
    }
  }
  .selectCon {
    width: 100%;
    height: 60px;
    padding: 10px 6px;
  }
}
</style>
