<template>
  <div id="menuScreen" style="position: relative">
    <div class="title">德荣食堂</div>
    <div class="title2">
      <span>时段</span>
      <span>菜名</span>
      <span>价格</span>
      <span>日期</span>
    </div>
    <div>
      <!-- 去除滚动 2024.02.26 class="tables" -->
      <div>
        <!--  class="gun" -->
        <el-table
          :cell-style="{ color: '#fff' }"
          :header-cell-style="{ color: '#fff' }"
          :data="tableData"
          :show-header="true"
          style="
            width: 100%;
            height: calc(100vh - 32vh);
            font-size: 4.5vh;
            font-weight: 200;
            overflow-y: auto;
            overflow-x: hidden;
          "
          ref="tableBox"
        >
          <el-table-column prop="timeFrame" align="center" label="时段">
            <template slot-scope="scope">
              <span>{{
                scope.row.timeFrame == "1"
                  ? "早餐"
                  : scope.row.timeFrame == "2"
                  ? "午餐"
                  : "晚餐"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="菜名" align="center">
          </el-table-column>

          <el-table-column prop="price" align="center" label="价格">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="billDate" label="日期" align="center">
            <template slot-scope="scope">
              <span>{{
                new Date(scope.row.billDate).Format("yyyy-MM-dd")
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <p class="people">
      园区打卡人数:{{ dakaNum }}人（{{ new Date().Format("yyyy-MM-dd") }}）
    </p>
  </div>
</template>

<script>
import axios from "axios";
import { menuList, dakaPeople } from "@/api/canteen/basic.js";
export default {
  data() {
    return {
      tableData: [],
      intervalId: null,
      dakaNum: "",
      defaultData: [
        {
          billDate: new Date().Format("yyyy-MM-dd"),
          name: "辣椒炒肉",
          price: 0,
          timeFrame: "2",
        },
        {
          billDate: new Date().Format("yyyy-MM-dd"),
          name: "辣椒炒蛋",
          price: 0,
          timeFrame: "2",
        },
        {
          billDate: new Date().Format("yyyy-MM-dd"),
          name: "芹菜香干",
          price: 0,
          timeFrame: "2",
        },
        {
          billDate: new Date().Format("yyyy-MM-dd"),
          name: "麻婆豆腐",
          price: 0,
          timeFrame: "2",
        },
      ],
    };
  },
  created() {
    this.getList();
    this.dataRefreh();
    this.getPeoples();
  },
  destroyed() {
    // 在页面销毁后，清除计时器
    this.clear();
  },
  methods: {
    async getList() {
      try {
        let { code, rows } = await menuList({
          pageSize: 100,
          billDate: new Date().Format("yyyy-MM-dd"),
        });
        if (code == 200) {
          this.tableData = rows.length ? rows : [...this.defaultData];
        }
      } catch (error) {}
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        console.log("刷新" + new Date());
        this.getList(); //加载数据函数
        this.getPeoples(); // 加载园区打卡人数
      }, 1000 * 60 * 5);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    // 获取园区打卡数据
    getPeoples() {
      axios.defaults.baseURL = "";
      axios.get("/data-service-center/accessControl/getPeople ").then((res) => {
        console.log(res.data);
        if (res.data.code === 200) {
          this.dakaNum = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#menuScreen {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  // overflow: hidden;
}

.title {
  text-align: center;
  font-size: 8.5vh;
  color: #fff;
  font-weight: 600;
  // text-shadow: 0 0 5px #fff,
  // 0 0 10px #fff,
  // 0 0 15px #fff,
  // 0 0 20px #00a67c,
  // 0 0 35px #00a67c,
  // 0 0 40px #00a67c,
  // 0 0 50px #00a67c,
  // 0 0 75px #00a67c;
}

.title2 {
  text-align: center;
  font-size: 6vh;
  font-weight: 600;
  color: #fff;
  width: 100%;
  color: #fff;
  margin: 2% auto;
  display: flex;
  justify-content: space-around;
  // text-shadow: 0 0 5px #fff,
  // 0 0 10px #fff,
  // 0 0 15px #fff,
  // 0 0 20px #00a67c,
  // 0 0 35px #00a67c,
  // 0 0 40px #00a67c,
  // 0 0 50px #00a67c,
  // 0 0 75px #00a67c;
}

.gun {
  animation: tables 12s linear infinite;
}

.tables {
  width: 80%;
  height: 680px;
  margin: 0 auto;
  overflow: hidden;
}

@keyframes tables {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(calc(-100% + 680px));
  }
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  // border-top-color: #808DA6;
  // border-bottom-color: #808DA6;
  border-top: 1px solid #808da6;
  border-bottom: none;
}

::v-deep .el-table .el-table__header-wrapper {
  display: none;
}
::v-deep .el-table .cell {
  line-height: normal;
}
.people {
  position: absolute;
  top: 0;
  right: 1%;
  font-size: 4vh;
  font-weight: 600;
  color: #fff;
}

.el-table::before {
  height: 0;
}
</style>
