<template>
  <view class="container">
    <view class="tabs">
      <u-tabs
        :list="tabsList"
        font-size="30"
        :current="current"
        active-color="#2a56f7"
        @change="fnTabsChange"
      />
    </view>

    <regulatory-division v-show="current === 0" :department="department" />
    <information-review v-show="current === 1" :department="department" />
    <certified-personnel v-show="current === 2" :department="department" />
  </view>
</template>

<script>
import RegulatoryDivision from "./regulatory_division.vue";
import InformationReview from "./information_review.vue";
import CertifiedPersonnel from "./certified_personnel.vue";
import { getDepartment } from "@/api";
export default {
  components: {
    RegulatoryDivision,
    InformationReview,
    CertifiedPersonnel,
  },
  data() {
    return {
      tabsList: [
        { name: "监管划分" },
        { name: "信息审核" },
        { name: "持证人员" },
      ],
      current: 0,
      department: [],
    };
  },
  onLoad() {
    this.fnGetDepartment();
  },
  methods: {
    async fnGetDepartment() {
      const resData = await getDepartment();
      this.department = JSON.parse(resData.zTreeNodes);
    },
    fnTabsChange(event) {
      this.current = event.index;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: calc(100vh - 45px);
  background: #fafafa;

  .tabs {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
}
</style>
