<script setup lang="ts">
import * as Agent from '@/api/system/notify/agent'
import { Message} from '@element-plus/icons-vue'

const router=useRouter()
const { t } = useI18n()
const queryParams = reactive({
  pageNum: 1,
  pageSize: -1,
  queryType: '0', // 默认全部
  startTime: '',
  endTime: ''
})
const documentTodos = ref(0)


onMounted(() => {
  getAgentNum()
})
// 获取待办数量
const getAgentNum = async () => {
  const agentData = await Agent.getMyAgent(queryParams)
  documentTodos.value = agentData.handleAgent.length
  console.log(agentData, 'agentData')
}

// 代办：处理跳转逻辑
const handleNewPageJump = () => {
  router.push({ name: 'Agent' })
}

</script>

<template>
  <div class="container" @click="handleNewPageJump">
    <section class="lefticon">
      <el-icon class="iconmessage">
        <Message />
      </el-icon>
    </section>
    <section class="righticon">
      <p>{{ t('workplace.unreadMessage') }}</p>
      <span>{{documentTodos}}</span>
    </section>
  </div>
</template>


<style scoped lang="scss">
.container{
  width: 320px;
  height: 150px;
  border: 2px solid #0b0b0b;
  border-radius: 15px;
  background: #ffffff;
  display: flex;
  .lefticon{
    width: 50%;
    height: 90%;
    margin:5px 20px;
    //background: #000;
    .iconmessage{
      font-size: 130px;
    }
  }
  .righticon{
    width:70%;
    height: 164px;
    margin:30px 15px;
    padding: 10px 0;
    //background: #ede4e4;
    text-align:right;
    p{
      font-size: 20px;
      font-weight: bold;
    }
    span{
      font-size: 30px;
      font-weight: bold;
      color: #cc0b0b;
    }
  }
}
</style>
