<!-- 评星题 批量填答 -->

<template>
    <div class="batch_question">
        <!-- 题目行 -->
        <QuestionTitleComponent :titleMsg="titleMsg"  :titleIndex="titleIndex"/>
        
        <Table :hidePagination="true" 
            :showHeader="false"
            :tableColumns="tableColumns" 
            :tableData="tableData">
            <template #score="{row}">
                <QuestionTypeShow :isHorizontal="true" 
                    :questionType="5" :evaluationType="1" 
                    :questionScore="row?.fullScore || 0" 
                    :allowEdit="allowEdit" 
                    :defaultQuestionVal="row.score"
                    @formChange="(val)=>HandleCheck(row,'score',val)"/>
            </template>
        </Table>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import QuestionTitleComponent from '../QuestionTitleComponent.vue';
import Table from '@/baseComponents/Table.vue';

import QuestionTypeShow from '../QuestionTypeShow.vue';

import { tableColumns } from './table.js';

import {isTitleRequired} from '../titleRequiredJudge.js'


interface TitleMsg {
    questionTitleName:string,
    questionType:number,
    extraConfig:string[]
}

const props = defineProps({
    titleMsg:{
        type:Object as () => TitleMsg,
        required:true
    },
    titleIndex:{
        type:Number,
        required:true,
    },
    allowEdit:{
        type:Boolean,
        default:true
    },
    defaultTableData:{
        type:Array,
        default:()=>[]
    }
})

const emit = defineEmits(['questionAnswerChange'])

const isFinishEdit = defineModel('isFinishEdit')  //是否已经编辑完成，


// 模拟数据
const tableData =  ref<any[]>([
    // {
    //     teacher:'语文',
    //     score:0,
    //     fullScore:10
    // },
])

// 处选项的选中
const HandleCheck = (row,key,val)=>{
    row[key] = val
    emit('questionAnswerChange',tableData.value)
}


watch(()=>tableData.value,(newVal)=>{
    console.log('当前表格数据变化了')
    let isFinish = true
    if(isTitleRequired(props.titleMsg)){
        newVal.map(row=>{
            // 分数没有被选择
            if(Number(row.score) ===0){
                isFinish = false
            }
        })
    }
    isFinishEdit.value = isFinish
},{deep:true,immediate:true})


watch(()=>props.defaultTableData,(newVal)=>{
    console.log('传递的表数据变化了---',newVal)
    tableData.value = newVal
    emit('questionAnswerChange',tableData.value)
},{immediate:true,deep:true})


</script>


<style lang="scss" scoped>
.batch_question{
     padding: 10px 20px;
    
}



</style>