<template>
  <div class="MenuDiet1" :style="'font-size:' + fontSize + 'px'">
    <br v-if="load" />
    <br v-if="load" />
    <van-skeleton title v-if="load" :row="10" />
    <van-empty v-if="!list.length && !load" description="今日休息" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(v, index) in list"
        :key="index"
        style="width: 100vw;max-width: 1920px;margin: 0 auto; height: 100vh"
      >
            <h4 style="text-align: center;margin-top: 15px;">{{v.text}}</h4>
        <template
          v-if="
            list.length &&
            list[index] &&
            list[index].child &&
            list[index].child.length
          "
        >
          <div v-for="(item, i) in list[index].child" :key="i">
            <br />
            <van-cell-group inset :border="false">
              <van-cell
                :style="
                  'padding: 5px 16px; color: #fff;background-color: ' +
                  (i % 2 === 1 ? '#FFB07B' : '#74BBFF') +
                  ';'
                "
                :title="item.meal"
              ></van-cell>
              <div v-if="item.varietyOfDishes && item.varietyOfDishes.length">
                <van-cell v-for="(v, p) in item.varietyOfDishes" :key="p">
                  <template #title>
                    <div
                      class="p"
                      :style="
                        'background-color:' +
                        (i % 2 === 1 ? '#FFB07B' : '#74BBFF')
                      "
                    ></div>
                    <span
                      v-text="v.title"
                      class="title"
                      style="vertical-align: middle"
                    ></span>
                  </template>
                  <template #label>
                    <span>{{ v.value.join("、") }}</span>
                  </template>
                </van-cell>
              </div>
            </van-cell-group>
          </div>
        </template>
        <van-cell-group v-if="list.length" :border="false">
          <template #title>
            <div class="t">
              <span>【温馨提示】</span>
              <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
            </div>
          </template>
        </van-cell-group>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Skeleton as vanSkeleton,
  Empty as vanEmpty,
  Swipe as vanSwipe,
  SwipeItem as vanSwipeItem,
} from "vant";
import "vant/lib/swipe/style/index";
import "vant/lib/swipe-item/style/index";
import "vant/lib/skeleton/style/index";
import "vant/lib/empty/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";

import { menuWeekList } from "../api/index";

export default {
  name: "MenuDiet1",
  data() {
    return {
      load: false,
      list: [],
      fontSize: 22,
    };
  },
  mounted() {
    this.load = true;
    this.fontSize = (document.body.offsetWidth / 20).toFixed(2) - 0;
    if (document.body.offsetWidth > 1920 || this.fontSize > 30)
      this.fontSize = 30;
    console.log(this.fontSize);
    document.documentElement.style.fontSize = this.fontSize + "px";
    menuWeekList()
      .then(r => {
        this.list = (r || []).map((v, i) => {
          v.value = i;
          return v;
        });
        this.load = false;
      })
      .catch(() => {
        this.load = false;
      });
    document.title = "菜单";
  },
  computed: {},
  methods: {},
  beforeUnmount: function () {
    localStorage.token = "";
  },
  components: {
    vanCell,
    vanSkeleton,
    vanCellGroup,
    vanEmpty,
    vanSwipeItem,
    vanSwipe,
  },
};
</script>

<style>
.MenuDiet1 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100%;
  font-weight: 400;
  box-sizing: border-box;
  background-color: #fff;
}
.MenuDiet1 .van-sidebar {
  width: 100px;
}
.MenuDiet1 .van-cell {
  min-height: 3rem;
  font-size: 1rem;
  line-height: 1.5rem
}
.MenuDiet1 .van-cell-group {
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
}
.MenuDiet1 .main {
  width: calc(100% - 100px);
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  box-sizing: border-box;
  padding: 5px;
  float: right;
}
.MenuDiet1 .van-sidebar-item--select::before {
  background-color: #e42417;
}
.MenuDiet1 .meal {
  font-weight: 600;
  font-size: 0.95rem;
}
.MenuDiet1 .p {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #ffb07b;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 9px;
}
.MenuDiet1 .title {
  font-weight: bold;
  font-size: 0.9rem;
}
.MenuDiet1 .t {
  text-align: center;
  line-height: 20px;
  font-size: 0.7rem;
}
.MenuDiet1 .t span {
  color: #fa6400;
}
.MenuDiet1 .van-tabs__line {
  border-radius: 2px;
}
.MenuDiet1 .van-cell__label {
  color: #555555;
  padding-left: 14px;
  font-size: 0.85rem;
  line-height: 1.5em;
}
.MenuDiet1 .van-tab {
  font-size: 1rem;
}
.MenuDiet1 .van-tab--active .van-tab__text {
  font-weight: bold;
}
</style>
