<template>
  <el-tabs type="border-card" class="demo-tabs" v-model="activeName"  @tab-click="handleClick" >
    <el-tab-pane label="事项归集统计情况" name="first">
      <matter-imputation-statics-situation v-if="activeName=='first'" />
    </el-tab-pane>
    <el-tab-pane label="部门数据归集情况" name="second">
      <department-data-imputation-situation v-if="activeName=='second'" />
    </el-tab-pane>
    <el-tab-pane label="数据推送情况(月)" name="third">
      <data-push-situation-monthly v-if="activeName=='third'"  />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue'
import MatterImputationStaticsSituation
  from "@/views/main/c-views/credit-data/data-imputation-push/MatterImputationStaticsSituation.vue";
import DepartmentDataImputationSituation
  from "@/views/main/c-views/credit-data/data-imputation-push/DepartmentDataImputationSituation.vue";
import DataPushSituationMonthly
  from "@/views/main/c-views/credit-data/data-imputation-push/DataPushSituationMonthly.vue";
export default {
  name: "DataImputationPush",
  components: {DataPushSituationMonthly, DepartmentDataImputationSituation, MatterImputationStaticsSituation},
  setup(){
    const activeName = ref('first')
    function handleClick(tab,event){

    }
    return{
      activeName,
      handleClick
    }
  }
}
</script>

<style scoped lang="scss">
.imputation-home{
  padding: 30px 20px 20px 20px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>