<template>
  <div id="index">
    <detail-layout>
      <template v-slot:mainSide>
        <el-calendar v-model="value" :first-day-of-week="7">
          <template v-slot:dateCell="{ date, data }">
            <span :class="data.isSelected ? 'is-selected' : ''" @click="toSearch(date)">
              {{ date | getDay }}
            </span>
          </template>
        </el-calendar>
        <menus :menuList="menuList"></menus>
      </template>
      <template v-slot:mainMain>
        <router-view />
      </template>
    </detail-layout>
  </div>
</template>

<script>
import menus from '@/layout/layout-part/menus.vue';
import detailLayout from '@/layout/detail-layout.vue';
import { coreMenu } from '@/util/menus';
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'index',
  props: {},
  components: {
    detailLayout,
    menus,
  },
  data: () => ({
    value: new Date(),
    menuList: coreMenu,
    list: [],
  }),
  created() {},
  computed: {},
  methods: {
    toSearch(date) {
      let newDates = date.toLocaleDateString().split('/');
      `${newDates[1]}` * 1 < 10 ? (newDates[1] = `0${newDates[1]}`) : '';
      `${newDates[2]}` * 1 < 10 ? (newDates[2] = `0${newDates[2]}`) : '';
      let newDate = `${newDates[0]}-${newDates[1]}-${newDates[2]}`;
      this.$router.push({ path: this.$router.path, query: { date: newDate } });
    },
  },
  filters: {
    getDay(date) {
      let day = date.getDate();
      return day;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-calendar-day {
  height: 35px;
}
/deep/ .el-calendar__header {
  padding: 12px 10px;
}
/deep/ .el-calendar-table thead th {
  padding: 5px 0;
}
/deep/ .el-calendar__body {
  padding: 1px 12px 2px;
}
/deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 6px 7px;
}
/deep/ .el-calendar__title {
  color: #850000;
}
/deep/ .el-backtop,
.el-calendar-table td.is-today {
  color: #850000;
}
</style>
