<template>
    <div class="page-header">
        <div class="headerTitle">本月任务</div>
        <div class="monthCard">
          <div class="cardText1">本月任务统计量</div>
          <div class="cardText2">{{ monthData.total ?? 0 }}</div>
        </div>
        <div class="monthContent">
          <div class="monthItem">
            <div style="width: 90%; text-align: left;">本月人工随访任务量</div>
            <div style="width: 10%; text-align: right;">{{ monthData.artificial ?? 0 }}</div>
          </div>
          <div class="monthItem">
            <div style="width: 90%; text-align: left;">本月人工随访任务量增加</div>
            <div style="width: 10%; text-align: right;">{{ monthData.YOYArtificial ?? 0 }}</div>
          </div>
          <div class="monthItem">
            <div style="width: 90%; text-align: left;">本月智能随访任务量</div>
            <div style="width: 10%; text-align: right;">{{ monthData.Automatic ?? 0 }}</div>
          </div>
          <div class="monthItem">
            <div style="width: 90%; text-align: left;">本月智能随访任务量增加</div>
            <div style="width: 10%; text-align: right;">{{ monthData.YOYAutomatic ?? 0 }}</div>
          </div>
        </div>
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { getPageListData } from '@/api/main/system/system';

    const monthData = ref({})
    const getMonthTask = () => {
      getPageListData('/SfPlanReport/getMonthTask').then((res) => {
        if (res.data) {
          monthData.value = res.data
        }
      })
    }
    onMounted(() => { 
      getMonthTask()
    })
  </script>
  
  <style scoped lang="scss">
    .page-header{
      width: 100%;
      .headerTitle{
          font-size: 22px;
          line-height: 30px;
          margin-bottom: 15px;
      }
      .monthCard{
        background-color: #3E97F6;
        border-radius: 10px;
        color: #fff;
        padding: 15px;
        .cardText1{
          font-size: 18px;
          line-height: 30px;
        }
        .cardText2{
          font-size: 32px;
          line-height: 50px;
        }
      }
      .monthContent{
        margin-top: 15px;
        .monthItem{
          display: flex;
          width: 96%;
          margin: 0 auto;
          line-height: 30px;
          font-size: 18px;
        }
      }
    }
  </style>