<template>
    <div>
        <div  class="questionnaire_list">
            <div v-for="questionnaire in questionnaireList" 
                :key="questionnaire.id"  class="card_item">
                <!-- 顶部区域：图标 + 标题 -->
                <div class="card_header">
                    <!-- 模拟图片中的文档图标 -->
                    <span class="card_img">
                        <img :src="questionnaireCardIcon" alt=""/>
                    </span>
                    <span class="card_title two_line_ellipsis" :title="questionnaire.title">{{ questionnaire.title }}</span>

                    <el-switch
                        :model-value="Boolean(questionnaire.openStatus)"
                        v-if=" questionnaire.evaluationType === 0 ? true : false"
                        @change="(newVal)=>HandleOnOffChange(newVal,questionnaire.openStatus,questionnaire)"
                        style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                    />
                </div>

                <!-- 中间区域：元数据 (分数、创建人、状态、时间) -->
                <div class="card_meta">
                    <div class="meta_row">
                        <!-- 问卷总分 -->
                        <span  v-if="cardType == 'questionnareManage'" class="score_text icon_text">
                            <img :src="scoreIcon" alt="">
                            {{ questionnaire.assessmentScore }}分</span>
                        
                        <!-- 创建者 -->
                        <span class="creator_text icon_text">
                            <img :src="peopleIcon" alt="">
                            {{questionnaire.teacherName}}</span>
                        <!-- 评价类型 -->
                        <span class="icon_text" v-if="cardType == 'reviewManage'">
                            <img :src="questionnaire.evaluationType === 0 ? onlineDektopIcon : writeLineIcon" alt="">
                            {{ typeNumToName(questionnaire.evaluationType).title }}
                        </span>
                        <!-- 状态文本：根据 cardStatus 动态变色 -->
                        <span :class="['status_text','icon_text', statusNumToName(questionnaire.cardStatus)?.themeClass ,'']"
                            :style="{color:statusNumToName(questionnaire.cardStatus)?.iconColor}">
                            <RightCircle :style="{'--icon-color':statusNumToName(questionnaire.cardStatus)?.iconColor }" />
                            {{ statusNumToName(questionnaire.cardStatus)?.title  }}
                        </span>
                    </div>
                    <div class="time_row icon_text">
                        <!-- 评价管理的 线下答卷 不显示 时间 -->
                        <template v-if="cardType == 'questionnareManage' || 
                            cardType == 'reviewManage' && questionnaire.evaluationType === 0">
                            <img :src="timeIcon" alt="">
                            {{ questionnaire.time }}
                        </template>
                    </div>
                </div>

                <div class="page_solid_line"></div>

                <!-- 底部区域：操作按钮 -->
                <div class="card_footer">
                    <slot name="default" :row="questionnaire"></slot>
                </div>
            </div>
        </div>
        <div class="load_more" @click=" Number(pageSize || 0) >= Number(totalNum || 0)? '' : emit('loadMorePage')">
            {{ Number(pageSize || 0) >= Number(totalNum || 0) ? '没有更多了' : '加载更多' }}
        </div>
    </div>
</template>


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

import peopleIcon from '@/assets/evaluateTeaching/people_icon.png'
import timeIcon from '@/assets/evaluateTeaching/time_icon.png'
import writeLineIcon from '@/assets/evaluateTeaching/write_line_icon.png'
import onlineDektopIcon from '@/assets/evaluateTeaching/online_desktop.png'
import questionnaireCardIcon from '@/assets/evaluateTeaching/questionnaire_card_icon.png'
import scoreIcon from '@/assets/evaluateTeaching/score_icon.png'
import RightCircle from '@/assets/evaluateTeaching/RightCircle.vue'


interface QuestionnaireItm {
    id:Number,
    title:String,  //标题
    assessmentScore?:Number|String,  //总分
    teacherName:String,  //创建人
    time:String,  //卡片展示的时间
    cardStatus:Number,   //1 已使用   0 未使用
    openStatus?:Boolean,
    evaluationType?:Number|String,  //卡片类型
    status?:Boolean,
}
interface StatusItm {
  statusFlag:Number | String,
  title:String,
  themeClass?:'used' | 'unused' | 'ongoing' | 'end' | String,
  iconColor?:string,
}
interface TypeItm {
  type:Number | String,
  title:String,
}
 // questionnareManage （问卷管理） | reviewManage (评价管理) |  
type CardType = 'questionnareManage' | 'reviewManage'



const props = defineProps({
    questionnaireList:{
        type:Array as ()=>QuestionnaireItm[],
        requried:true,
    },
    cardStatusMsg:{  //卡片状态信息
        required:true,
        type:Array<StatusItm>
    },
    cardTypeMsg:{
        type:Array<TypeItm>,
    },
    cardType:{
        type:String as ()=>CardType,  
        required:true
    },
    scrollAimDom:{  // 监听的目标滚动元素
        type:Object
    },
    pageSize:{
        type:Number,
        default:0
    },
    totalNum:{
        type:Number,
        default:0
    },
})

const emit = defineEmits(['switchOnOff','loadMorePage'])
// 处理卡片的开关状态
const HandleOnOffChange = (newVal,oldVal,row)=>{
    emit('switchOnOff',{id:row.id,onOffVal:newVal })
}
const statusNumToName=(status:String|Number|null|undefined)=>{
  let result =  props?.cardStatusMsg?.find(item=>item.statusFlag === status)
  if(result){
    return result
  }else{
    return {
      title:'',
      themeClass:'',
      iconColor:'',
    }
  }
}

const typeNumToName=(type:String|Number|null|undefined)=>{
  let result =  props?.cardTypeMsg?.find(item=>item.type === type)
  if(result){
    return result
  }else{
    return {
      title:'',
    }
  }
}
const HandleCourseScroll = (e)=>{
    let totalHeight = e.target.scrollHeight  //总高度
    let scrollTop = e.target.scrollTop   //滚动高度
    let pageHeight = e.target.clientHeight // 客户端高度
    console.log('totalHeight',totalHeight)
    console.log('当前高度',scrollTop + pageHeight)

    // 滚动到底部 且 页面还有数据
    if(scrollTop + pageHeight >= (totalHeight - 5) && props?.totalNum > props?.pageSize){
        emit('loadMorePage')
    }
}

watch(()=>props.scrollAimDom,(newDom)=>{
    console.log('新dom',newDom)
    if(newDom){
        newDom?.addEventListener('scroll',(e)=>HandleCourseScroll(e))
    }
},{immediate:true,flush:'post'})

</script>


<style lang="scss" scoped>

.questionnaire_list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(325px,1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}


/* 单个卡片样式 */
.card_item {
    background: #F8FAFE;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:12px;
    
    /* 头部：图标和标题 */
    .card_header {
        display: flex;
        align-items: center;
        gap:8px;
        padding:0 16px;

        .card_img{
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background-color: rgba(46, 100, 250,0.1);  /* 浅蓝背景 */
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        
        .card_title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            line-height: 1;
        }
    }


    /* 中部：元数据信息 */
    .card_meta {
        font-size: 12px;
        line-height: 16px;
        color: #666;
        display: flex;
        flex-direction: column;
        gap:12px;
        padding:0 16px;

        .icon_text{
            display: flex;
            align-items: center;
            gap:4px;
            img{
                width: 16px;
                height: 16px;
            }

        }

        .meta_row {
            display: flex;
            align-items: center;
            gap: 12px;

            .score_text {
                color: #333;
            }
                
            /* 状态颜色控制 */
            .status_text {
                display: flex;
                align-items: center;

            }
        }
        .time_row {
            height: 18px;
            color: #999;
        }
    }

    /* 底部：按钮组 */
    .card_footer {
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        padding:0 16px;
        // margin-top: auto; /* 将按钮推到底部 */
        :deep(.el-button){
            height: 32px;
            padding: 6px 12px;
            font-size: 14px;
            margin-left: 0px;
        }
    }
}

.load_more{
    text-align: center;
    color: #999;
    margin-top: 20px;
    font-size: 14px;
    &:hover{
        cursor: pointer;
    }
}

</style>