<template>
  <ul class="box-rank">
    <li class="item">
      <div class="text title">日期</div>
      <div class="text title">执勤时间</div>
      <div class="text title">执勤状态</div>
    </li>
    <li class="item" v-for="(item, index) in data" :key="index" @click="routePush(item)">
      <div class="text title">{{ item.time }}</div>
      <div class="text title">{{ item.zqsj }}</div>
      <div class="text title" :class="item.zqzt == '请假' ? 'red' : item.zqzt == '未执勤' ? '' : 'green'
        ">
        {{ item.zqzt }}
      </div>
    </li>
    <van-empty description="暂无信息" image="default" v-if="data.length <= 0 && !loading" />
  </ul>
</template>

<script setup>
import { ref, defineExpose, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  listData: { type: Array },
});
watch(
  () => props.listData,
  () => {
    data.value = props.listData;
  },
  { deep: true }
);
function routePush(row) {
  const timeDay = new Date()
  let y = timeDay.getFullYear()
  let m = timeDay.getMonth() + 1 < 10 ? '0' + (timeDay.getMonth() + 1) : timeDay.getMonth() + 1
  let d = timeDay.getDate() < 10 ? '0' + timeDay.getDate() : timeDay.getDate()
  const dtime = y + '-' + m + '-' + d
  if (row.zt === "04") {
    return false;
  } else {
    router.push({
      path: "/xfbbInfo",
      query: {
        zt: row.zt,
        pbid: row.zt === '01' ? row.id : null,
        bbid: row.zt === '01' ? null : row.id,
        isDay: dtime === row.time ? 1 : 0
      },
    });
  }
}
const loading = ref(false);
const data = ref([]);
onMounted(() => {
  data.value = props.listData;
})
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.box-rank {
  width: 100%;
  height: 100%;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vw;
    @include font_size($font_medium_s);
    @include font_color($font-color-theme);

    .text {
      flex: 1;
      text-align: center;
    }

    .mc {
      color: #3e6ee8;
    }
  }

  .item:nth-child(2n + 1) {
    @include table_item_color($table-item-theme);
  }

  .item:nth-child(1) {
    background: #3e6ee8 !important;
    color: #fff;
  }

  .red {
    color: red !important;
  }

  .green {
    color: #88e9af;
  }

  .blue {
    color: #3e6ee8;
  }
}
</style>