<template>
  <view class="container">
    <view class="tabs">
      <u-tabs
        :list="tabsList"
        font-size="30"
        :current="current"
        active-color="#2a56f7"
        @change="fnTabsChange"
      />
    </view>
    <risk-identification v-show="current === 0" :department="department" />
    <hazard-investigation v-show="current === 1" :department="department" />
    <safety-education v-show="current === 2" :department="department" />
  </view>
</template>

<script>
import RiskIdentification from "./risk_identification.vue";
import HazardInvestigation from "./hazard_investigation.vue";
import SafetyEducation from "./safety_education.vue";
import { getDepartment } from "@/api";
export default {
  components: {
    RiskIdentification,
    HazardInvestigation,
    SafetyEducation,
  },

  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);
    },
    async fnTabsChange(event) {
      this.current = event.index;
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  background: #fafafa;

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