<template>
  <div class="">
    <el-tabs v-model="activeName">
      <el-tab-pane label="审核" name="1">
        <province-approval ref="approvalRef" @view-exam="handleView" @do-approval="handleApproval" @view-transcript="handleViewTranscript" @do-back="handleBack" />
      </el-tab-pane>
      <el-tab-pane label="合并" name="2">
        <province-merge ref="mergeRef" @view-merge="handleViewMerge" @do-back="handleBack" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import ProvinceApproval from './provinceApproval'
import { getCurrentInstance } from '@vue/runtime-core'
import ProvinceMerge from '@/views/exam/level/approval/components/provinceMerge'

const emit = defineEmits(['viewExam', 'viewTranscript', 'doApproval', 'viewMerge', 'doBack'])
const { proxy } = getCurrentInstance()

const activeName = ref('1')

onMounted(() => {
  watch(activeName, (val) => {
    getList()
  }, { immediate: true })
})


function handleView(row, params) {
  emit('viewExam', row, params)
}

function handleViewMerge(row) {
  emit('viewMerge', row)
}

function handleApproval(row, params) {
  emit('doApproval', row, params)
}

function handleViewTranscript(row) {
  emit('viewTranscript', row)
}

function handleBack(row) {
  emit('doBack', row)
}

function getList() {
  switch (activeName.value) {
    case '1':
      proxy.$refs['approvalRef'].getList()
      break
    case '2':
      proxy.$refs['mergeRef'].getList()
      break
  }
}

defineExpose({
  getList
})

</script>
<style lang="scss" scoped>
.tabs{
  display: flex;
  font-size: 16px;
  .tab{
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    margin: 0px 0 10px 10px;
    cursor:pointer;
  }
  .tabBtn{
    border-bottom: 2px solid #014A9F;
    color: #014A9F;
  }
}

</style>