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

<script>
import stationCardList from "@/views/rollCallManage/polling/components/stationCardList.vue";
import planList from "@/views/rollCallManage/polling/components/planList.vue";
import stationRollCallList from "@/views/rollCallManage/polling/components/stationRollCallList.vue";
import personCardList from "@/views/rollCallManage/polling/components/personCardList.vue";
export default {
  name: "polling",
  components: {
    stationCardList,
    planList,
    stationRollCallList,
    personCardList,
  },
  data() {
    return {
      componentName: "stationCardList",
      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">
.polling {
  width: 100%;
  height: 100%;
  padding: 32px 32px 0 32px;
  background: linear-gradient(180deg, #dbecff 0%, #eaf1ff 15%);
}
</style>
