<template>
  <div class="app-container">
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="巡查记录" name="Xiaosha" >
        <XiaoshaRecord v-if="tabRefresh.Xiaosha"/>
      </el-tab-pane>
      <el-tab-pane label="区域设置" name="areaSetting" >
        <areaSetting v-if="tabRefresh.areaSetting"/>
      </el-tab-pane>
      <el-tab-pane label="人员设置" name="userSetting" >
        <userSetting v-if="tabRefresh.userSetting"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import XiaoshaRecord from "./components/Xiaosha_record.vue";
import areaSetting from "./components/area_setting.vue";
import userSetting from "./components/user_setting.vue";
export default {
  components: { XiaoshaRecord, areaSetting, userSetting },
  filters: {},
  data() {
    return {
      activeName: "Xiaosha",
      tabRefresh: {
        Xiaosha: true,
        areaSetting: false,
        userSetting: false,
      },
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      switch (this.activeName) {
        case "Xiaosha":
          this.switchTab("Xiaosha");
          break;
        case "areaSetting":
          this.switchTab("areaSetting");
          break;
        case "userSetting":
          this.switchTab("userSetting");
          break;
      }
    },
    switchTab (tab) {
      for (let key in this.tabRefresh) {
        if (key === tab) {
          this.tabRefresh[key] = true
        } else {
          this.tabRefresh[key] = false
        }
      }
    },
  },
};
</script>
<style scoped>
</style>
