<template>
    <div :class="{'user_item':true,[iconTheme?.class]:true }">
      <div class="comp_left">
        <div :class="['title',{'left_border':!props.smallIcon}]">
          {{ props.title }}
        </div>
        <div :class="['desc',{'subIcon':props.smallIcon}]" >
          <img  v-if="props.smallIcon" :src="iconTheme?.subIcon" alt=""/>
          <span >{{ props.num }}</span>
        </div>
      </div>
      <img class="comp_right" :src="iconTheme?.img" alt="">
    </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'

import all_icon from '@/assets/school/all_icon.png';
import overtime_icon from '@/assets/school/overtime_icon.png';
import waiting_icon from '@/assets/school/waiting_icon.png';
import average_icon from '@/assets/school/average_icon.png';
import finished_icon from '@/assets/school/finished_icon.png';
import watching_icon from '@/assets/school/watching_icon.png';
import unfinished_icon from '@/assets/school/unfinished_icon.png';

import total_audit_subicon from '@/assets/school/total_audit_subicon.png'
import has_audit_subicon from '@/assets/school/has_audit_subicon.png'
import  wait_audit_subicon from '@/assets/school/wait_audit_subicon.png'
import reject_audit_subicon from '@/assets/school/reject_audit_subicon.png'
import average_subicon from '@/assets/school/average_subicon.png'


import reject_audit_img from '@/assets/school/reject_audit_icon.png'
import has_audit_img from '@/assets/school/has_audit_icon.png'
import wait_audit_img from '@/assets/school/wait_audit_icon.png'
import total_audit_img from '@/assets/school/total_audit_icon.png'
import learning_total_img from '@/assets/school/learning_total_icon.png'
import unwatch_img from '@/assets/school/unwatch_icon.png'
import has_learned_img from '@/assets/school/has_learned_icon.png'



const props = defineProps({
    type:{
      type:String,
      required:true,
      default:'all'
    },
     title:{
        type:String,
        required:true
    },
    num:{
        type:[Number,String],
        default:0
    },
    cards:{
      type:Array,
    },
    smallIcon:{
      type:Boolean,
      required:false
    }
})

const iconTheme = computed(()=>{
    switch(props.type){
        case 'all':
            return {
              class:'all',
              img:all_icon,
            };
        case 'waiting':
            return {
              class: 'waiting',
              img:waiting_icon,
            };
        case 'watching':
          return{
             class:'waiting',
              img:watching_icon,
          }
        case 'finished':
        case 'ongoing':
          return{
              class:'finished',
              img:finished_icon,
          }
       
        case 'average':
          return {
            class: 'average',
            img:average_icon,
            subIcon:average_subicon
          }
        case 'overtime':
            return {
              class:'overtime',
              img:overtime_icon,
            }
        case 'unfinished':
            return {
              class:'overtime',
              img:unfinished_icon,
            }


        case 'totalAudit':
            return {
              class:'all',
              img:total_audit_img,
              subIcon:total_audit_subicon
            }

        case 'learningTotal':
          return {
              class:'all',
              img:learning_total_img,
              subIcon:total_audit_subicon

          }
        case 'hasAudit':
            return {
              class:'finished',
              img:has_audit_img,
              subIcon:has_audit_subicon
            }
        case 'hasLearned':
            return {
              class:'finished',
              img:has_learned_img,
              subIcon:has_audit_subicon
            }
        
        case 'waitAudit':
            return {
              class:'waiting_audit',
              img:wait_audit_img,
              subIcon:wait_audit_subicon
            }
        case 'rejectAudit':
            return {
              class:'overtime',
              img:reject_audit_img,
              subIcon:reject_audit_subicon
            }
        case 'unwatch':
            return {
              class:'overtime',
              img:unwatch_img,
              subIcon:reject_audit_subicon
            }
    }
})
</script>

<style lang="scss" scoped>

.user_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    height: 94px;

    padding:15px;
    border-radius: 10px;
    font-weight: 500;
    color:#333;
    background-size:100% 100% ;
    background-repeat: no-repeat;

    .comp_left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      line-height: 1;

      .title{
        font-size: 14px;
        color:#666;
        &.left_border{
          padding-left: 10px;
          border-left-style: solid;
          border-left-width: 2px;
        }
      }
      .desc {
        display: flex;
        align-items: center;
        font-size: 32px;

        &.subIcon{
          display: flex;
          align-items: center;
          gap: 10px;
          img{
            width: 28px;
            height: 28px;
          }
          font-size: 24px;
        }
      }
    }

    .comp_right{
      align-self: center;
      height: 80px;
    }



    &.all {
      background-image:url('../assets/school/all_bg.png');
      .desc{
        color:#2E64FA;
      }
      .left_border{
        border-left-color: #2E64FA ;
      }
    }
    &.waiting {
      background-color: #fef1e1;
      .desc{
        color:#FB9F34;
      }
      .left_border{
        border-left-color:#FB9F34 ;
      }
    }
    &.waiting_audit {
      background-image:url('../assets/school/wait_audit_bg.webp');
      .desc{
        color:#FAC858;
      }
      .left_border{
        border-left-color:#FAC858 ;
      }
    }

    &.finished {
      background-image:url('../assets/school/finished_bg.png');
      .desc{
        color:#3BA272;
      }
      .left_border{
        border-left-color: #3BA272 ;
      }
    }
    
    &.average {
      background-image:url('../assets/school/average_bg.png');
      .desc{
        color:#995FB3;
      }
      .left_border{
        border-left-color: #995FB3 ;
      }
    }
    &.overtime {
      background-image:url('../assets/school/overtime_bg.png');
      .desc{
        color:#EE6666;
      }
      .left_border{
        border-left-color: #EE6666 ;
      }
    }
  }
</style>