<template>
    <div class="page-header">
        <div class="headerTitle">今日任务</div>
        <el-row :gutter="30">
            <el-col :span="6">
                <el-card style="background-color: #D8EAFF;">
                    <div class="cardBox">
                      <div class="header-text1">
                        <el-image class="headImage" :src="pendingIcon" fit="fill" />
                      </div>
                      <div class="header-text2">
                          <div class="text2Span1">待随访</div>
                          <div class="text2Span2">{{ today.ToBeCompleted }}</div>
                          <div class="text2Span3">
                            较昨日
                            <span
                                :style="'margin: 0 3px; color: '+ getFontColor(today.YOYToBeCompleted ?? 0)">
                                <el-icon v-if="getIcon(today.YOYToBeCompleted ?? 0)">
                                    <CaretTop />
                                </el-icon>
                                <el-icon v-else>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                            1
                          </div>
                      </div>
                    </div>
                </el-card>
            </el-col>
            
            <el-col :span="6">
              <el-card style=" background-color: #FFE5EA;">
                <div class="cardBox">
                  <div class="header-text1">
                    <el-image class="headImage" :src="unfinishIcon" fit="fill" />
                  </div>
                  <div class="header-text2">
                      <div class="text2Span1">未完成</div>
                      <div class="text2Span2">{{ today.SoonOverdue ?? 0 }}</div>
                      <div class="text2Span3">
                        较昨日
                        <span
                            :style="'margin: 0 3px; color: '+ getFontColor(today.YOYSoonOverdue ?? 0)">
                            <el-icon v-if="getIcon(today.SoonOverdue ?? 0)">
                                <CaretTop />
                            </el-icon>
                            <el-icon v-else>
                                <CaretBottom />
                            </el-icon>
                        </span>
                        1
                      </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            
            <el-col :span="6">
              <el-card style=" background-color: #D8EAFF;">
                <div class="cardBox">
                  <div class="header-text1">
                    <el-image class="headImage" :src="finishIcon" fit="fill" />
                  </div>
                  <div class="header-text2">
                      <div class="text2Span1">已完成</div>
                      <div class="text2Span2">{{ today.Completed ?? 0 }}</div>
                      <div class="text2Span3">
                        较昨日
                        <span
                            :style="'margin: 0 3px; color: '+ getFontColor(today.YOYCompleted ?? 0)">
                            <el-icon v-if="getIcon(today.YOYCompleted ?? 0)">
                                <CaretTop />
                            </el-icon>
                            <el-icon v-else>
                                <CaretBottom />
                            </el-icon>
                            
                        </span>
                        1
                      </div>
                  </div>
                </div>
              </el-card>
            </el-col>
           
            <el-col :span="6">
              <el-card style=" background-color: #FFEFD1;">
                <div class="cardBox">
                  <div class="header-text1">
                    <el-image class="headImage" :src="overDueIcon" fit="fill" />
                  </div>
                  <div class="header-text2">
                      <div class="text2Span1">即将超期</div>
                      <div class="text2Span2">{{ today.SoonOverdue ?? 0 }}</div>
                      <div class="text2Span3">
                        较昨日
                        <span
                            :style="'margin: 0 3px; color: '+ getFontColor(today.YOYSoonOverdue ?? 0)">
                            <el-icon v-if="getIcon(today.YOYSoonOverdue ?? 0)">
                                <CaretTop />
                            </el-icon>
                            <el-icon v-else>
                                <CaretBottom />
                            </el-icon>
                        </span>
                        1
                      </div>
                  </div>
                </div>
                
                
              </el-card>
            </el-col>
        </el-row>
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    
    import pendingIcon from '@/assets/images/pendingIcon.png'
    import unfinishIcon from '@/assets/images/unfinishIcon.png'
    import finishIcon from '@/assets/images/finishIcon.png'
    import overDueIcon  from '@/assets/images/overDueIcon .png'
  
    import {
        CaretBottom,
        CaretTop,
    } from '@element-plus/icons-vue'
    import { getPageListData } from '@/api/main/system/system';
    onMounted(() => {
        getTodayDatas()
    })

  
    function getFontColor(value) {
        let resultColor = ''
        if (!value) {
            return ''
        }
        value = Number(value)
        if (value < 0) {
            resultColor = '#F56C6C'
        } else if (value >= 0) {
            resultColor = '#67C23A'
        }
        return resultColor
    }
    
    function getIcon(value) {
        let resultFlag = ''
        if (!value) {
            return false
        }
        value = Number(value)
        if (value < 0) {
            resultFlag = false
        } else if (value >= 0) {
            resultFlag = true
        }
        return resultFlag
    }

    const today = ref({});

    const getTodayDatas = () => {
        getPageListData("/SfPlanReport/getTodayTask").then((res) => {
            if (res.data) {
                today.value = res.data
            }
        })
    }
  
  </script>
  
  <style scoped lang="scss">
    .wrap {
        background-color: #EFEFEF;
        height: 100%;
        .page-header {
          background-color: #ffffff;
          margin: 15px;
          padding: 15px;
          border-radius: 10px;
          margin-right: 0px;
         
          .headerTitle{
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
          }
          .cardBox{
            
            display: flex;
             .header-text1 {
                width: 30%;
                height: 30%;
                background-color: #ffffff;
                border-radius: 10px;
                .headImage{
                  width: 80%;
                  height: 80%;
                  margin: 10%;
                }
            }
  
            .header-text2 {
                margin-left: 15px;
                .text2Span1{
                  font-size: 14px;
                  line-height: 30px;
                }
                .text2Span2{
                  line-height: 50px;
                  font-weight: bold;
                  font-size: 32px;
                }
                
            }
  
            .header-text3 {
                margin-top: 50px;
                font-size: 12px;
                display: flex;
                span {
                    margin-right: 30px;
                }
            }
          }
        }

    }
  </style>