<template>
    <div class="page_item end_item">
        <div class="page_search">
            <div class="search_content">
                <div class="content_left">
                    <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
                        :tabList="tabList" @tabChange="HandleTabChange">
                    </TabSearch>
                </div>
                <div class="content_right">
                    <div class="open_switch"> 
                        <span style="font-size: 14px;"> 评价状态：</span>
                        <el-switch  v-model="isOpenReviewTask"  style="--el-switch-on-color: #2E64FA"/>
                    </div>
                    <el-button  class="button_background" @click="FinishQuestionnaireTemplateConfig">评价完成</el-button>
                </div>
            </div>
        </div>
        <div class="page_jg_20"></div>
        <div class="diagram_container">
            <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'"></ReviewProcessBarData>
            <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'"></ReviewProcessTableData>
            <reviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'"></reviewAccountTableData>
        </div>
    </div>
</template>



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

import ReviewProcessBarData from './ReviewProcessBarData.vue';
import ReviewProcessTableData from './ReviewProcessTableData.vue';
import reviewAccountTableData from './reviewAccountTableData.vue';
import  {tabList} from './tabSearch'


const isOpenReviewTask = ref(true)  //评价状态

const defautTabKey = ref('reviewAccountTableData')
const HandleTabChange = (val)=>{
    defautTabKey.value = val
}

onMounted(async ()=>{
   
})
</script>



<style lang="scss" scoped>

.end_item{
    overflow-y: auto;
    .diagram_container{
        overflow: auto;
    }
}

.content_right{
    align-items: center;
    gap:20px  !important;
    .open_switch{
        display: flex;
        align-items: center;
        gap:4px;
    }
}

</style>