<template>
  <div id="BottomBox2">
    <div class="PaiBanHeader">
      <span class="PaiBanHeaderList_span1">泵站名称</span>
      <span class="PaiBanHeaderList_span2">日期</span>
      <span class="PaiBanHeaderList_span3">早班</span>
      <span class="PaiBanHeaderList_span4">晚班</span>
      <span class="PaiBanHeaderList_span5">下一排班</span>
    </div>
    <div class="PaiBanBody">
      <div
        class="PaiBanBodyList"
        v-for="(item, index) in PaiBanData"
        :key="index"
      >
        <span class="PaiBanBodyList_span1">
          <n-ellipsis style="max-width: 130px">
            {{ item.pumpName }}
          </n-ellipsis></span
        >
        <span class="PaiBanBodyList_span2">
          <n-ellipsis style="max-width: 115px">
            {{ item.date }}
          </n-ellipsis></span
        >
        <span class="PaiBanBodyList_span3">
          <n-ellipsis style="max-width: 60px">
            {{ item.am }}
          </n-ellipsis></span
        >
        <span class="PaiBanBodyList_span4">
          <n-ellipsis style="max-width: 60px">
            {{ item.pm }}
          </n-ellipsis></span
        >
        <span class="PaiBanBodyList_span5">
          <n-ellipsis style="max-width: 80px">
            {{ item.nexts }}
          </n-ellipsis></span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  name: "BottomBox2",
  setup() {
    const AllData = reactive({
      //   排班情况
      PaiBanData: [
        {
          pumpName: "后湖二期泵站",
          date: "2021-11-17",
          am: "张三",
          pm: "李四",
          nexts: "王五",
        },
        {
          pumpName: "铁路桥泵站",
          date: "2021-12-20",
          am: "张三",
          pm: "李四",
          nexts: "王五",
        },
        {
          pumpName: "机场河补水泵站",
          date: "2021-11-19",
          am: "张三",
          pm: "李四",
          nexts: "王五",
        },
      ],
    });

    onMounted(() => {});
    return {
      ...toRefs(AllData),
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#BottomBox2 {
  width: 100%;
  height: 100%;
  .PaiBanHeader {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border-bottom: 1px solid #47678cad;
    color: #305784;

    .PaiBanHeaderList_span1 {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      height: 36px;
      line-height: 36px;
      width: 130px;
      float: left;
      text-align: center;
    }
    .PaiBanHeaderList_span2 {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      height: 36px;
      line-height: 36px;
      float: left;
      text-align: center;
      width: 115px;
    }
    .PaiBanHeaderList_span3 {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      height: 36px;
      line-height: 36px;
      float: left;
      text-align: center;
      width: 60px;
    }
    .PaiBanHeaderList_span4 {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      height: 36px;
      line-height: 36px;
      float: left;
      text-align: center;
      width: 60px;
    }
    .PaiBanHeaderList_span5 {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      height: 36px;
      line-height: 36px;
      float: left;
      text-align: center;
      width: 80px;
    }
  }

  .PaiBanBody {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    .PaiBanBodyList {
      width: 100%;
      height: 36px;
      line-height: 36px;
      cursor: pointer;

      &:nth-child(odd) {
        background: var(--OneMap-tables-odd);
      }
      &:hover .PaiBanBodyList_span1,
      &:hover .PaiBanBodyList_span2,
      &:hover .PaiBanBodyList_span3,
      &:hover .PaiBanBodyList_span4,
      &:hover .PaiBanBodyList_span5 {
        color: #1f78f7;
      }

      .PaiBanBodyList_span1 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        height: 36px;
        line-height: 36px;
        width: 130px;
        text-align: center;
        float: left;
      }
      .PaiBanBodyList_span2 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        height: 36px;
        line-height: 36px;
        width: 115px;
        text-align: center;
        float: left;
      }
      .PaiBanBodyList_span3 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        height: 36px;
        line-height: 36px;
        width: 60px;
        text-align: center;
        float: left;
      }
      .PaiBanBodyList_span4 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        height: 36px;
        line-height: 36px;
        width: 60px;
        text-align: center;
        float: left;
      }
      .PaiBanBodyList_span5 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        height: 36px;
        line-height: 36px;
        width: 80px;
        text-align: center;
        float: left;
      }
    }
  }
}
</style>