<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-nav-bar v-if="!load" title="广电中心食堂本周菜单" />
    <van-tabs
      line-height="4"
      line-width="16"
      title-active-color="#FA6400"
      color="#FA6400"
      v-if="list.length"
      :active="value1"
      :before-change="change"
    >
      <van-tab :title="item.text" v-for="(item, index) in list" :key="index">
        <div v-for="(item, i) in list[index].child" :key="i">
          <br />
          <van-cell-group inset :border="false">
            <van-cell
              :style="
                '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>
      </van-tab>
    </van-tabs>

    <div class="t">
      <span>【温馨提示】</span>
      <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Skeleton as vanSkeleton,
  Tab as vanTab,
  Tabs as vanTabs,
  NavBar as vanNavBar,
} from "vant";
import "vant/lib/nav-bar/style/index";
import "vant/lib/tab/style/index";
import "vant/lib/tabs/style/index";
import "vant/lib/skeleton/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";

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

export default {
  name: "MenuDiet1",
  data() {
    return {
      load: false,
      list: [],
      fontSize: 22,
      value1: 0
    };
  },
  mounted() {
    this.load = true;
    this.fontSize = (document.body.offsetWidth / 18).toFixed(2) - 0;
    if (document.body.offsetWidth > 1920 || this.fontSize > 36)
      this.fontSize = 36;
    document.documentElement.style.fontSize = this.fontSize + "px";
    menulist()
      .then(r => {
        this.list = r || [];
        localStorage.menuWeekList = JSON.stringify(this.list);
        this.load = false;
      })
      .catch(() => {
        this.load = false;
        if (localStorage.menuWeekList)
          this.list = JSON.parse(localStorage.menuWeekList);
      });
    document.title = "菜单";
  },
  computed: {},
  methods: {
    
    change(v) {
      this.value1 = v;
    },
  },
  beforeUnmount: function () {
    localStorage.token = "";
  },
  components: {
    vanCell,
    vanSkeleton,
    vanCellGroup,
    vanTab,
    vanTabs,
    vanNavBar,
  },
};
</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: 2.5rem;
  font-size: 1.5rem;
  line-height: 2.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: 1.2rem;
}
.MenuDiet1 .t {
  text-align: center;
  line-height: 1.5em;
  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: 1rem;
  line-height: 1.5em;
}
.MenuDiet1 .van-tab {
  font-size: 1rem;
}
.MenuDiet1 .van-tabs--line .van-tabs__wrap,
.MenuDiet1 .van-tab__text{
    height: 1.5em;
    line-height: 1.5em;
}
.MenuDiet1 .van-tab--active .van-tab__text {
  font-weight: bold;
}
.MenuDiet1 .van-nav-bar__title {
  font-size: 36px;
  font-weight: bold;
}
.MenuDiet1 .van-nav-bar__content {
  height: 50px;
  line-height: 50px;
}
</style>
