<template>
  <div class="supervision">
    <!-- 驻勤点点名数据 -->
    <station-roll-call-list
      v-if="componentName === 'stationRollCallList'"
      :data="stationData"
      @toPersonCardList="toPersonCardList"
    ></station-roll-call-list>
    <!-- 人员卡片列表 -->
    <person-card-list
      v-if="componentName === 'personCardList'"
      :data="personListData"
      @back="componentName = 'stationRollCallList'"
    ></person-card-list>
  </div>
</template>

<script>
import stationRollCallList from "@/views/rollCallManage/supervision/components/stationRollCallList.vue";
import personCardList from "@/views/rollCallManage/supervision/components/personCardList.vue";
export default {
  name: "supervision",
  components: {
    stationRollCallList,
    personCardList,
  },
  data() {
    return {
      componentName: "stationRollCallList",
      stationData: null,
      personListData: null,
    };
  },
  methods: {
    toStationRollCallList(data) {
      this.stationData = data;
      this.componentName = "stationRollCallList";
    },
    toPersonCardList(data) {
      this.personListData = data;
      this.componentName = "personCardList";
    },
  },
};
</script>

<style scoped lang="scss">
.supervision {
  width: 100%;
  height: 100%;
  padding: 32px 32px 0 32px;
  background: linear-gradient(180deg, #dbecff 0%, #eaf1ff 15%);
}
</style>
