<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="待审核信息" name="first">
              <examine-data></examine-data>
            </el-tab-pane>
            <el-tab-pane label="保安企业综合统计" name="second">
              <company-data></company-data>
            </el-tab-pane>
            <el-tab-pane label="保安员综合统计" name="third">
              <baoanyuan-data></baoanyuan-data>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import examineData from './parts/examine-data.vue';
import companyData from './parts/company-data.vue';
import baoanyuanData from './parts/baoanyuan-data.vue';
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('system_account');
export default {
  name: 'index',
  props: {},
  components: { examineData, companyData, baoanyuanData },
  data: function () {
    return {
      active: 'first',
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(['fetch']),
    async init() {
      if (!_.get(this.tokenInfo, 'id')) return;
      const res = await this.fetch({ id: this.tokenInfo.id });
      if (this.$checkRes(res)) {
        let data = _.cloneDeep(res.data);
        console.log(data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['tokenInfo']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__header {
  margin: 0;
}
</style>
