<template>
  <header>
    <van-row class="header" type="flex" justify="space-between">
      <van-col span="8">
        <div class="header-title"><span>一体机管理系统</span></div>
      </van-col>
      <van-col span="8" class='r-header'>
        <!-- <svg-icon icon-class="network" /> -->
        <span class="date-time">{{dayjs().hour()}}:{{ dayjs().minute()}}</span>
        <div class="header-infos">
          <div class="header-infos-item">{{dayjs().format('YYYY-MM-DD')}}</div>
          <div class="header-infos-item">
            <span class="item-text">{{weekday}}</span>
            <span class="item-text" v-if="dayjs().format('A') =='AM'">上午 </span>
            <span class="item-text" v-else>下午 </span>
          </div>
        </div>
      </van-col>
    </van-row>
    <!--  <div class="m-header" >
      <span>xxxx管理系统</span>
      <div class='r-header'>
        <svg-icon icon-class="network" />
        <span class="date-time">08:30</span>
        <div class="header-infos">
            <div>2023-02-06</div>
            <div>
              <span>星期一</span>
              <span>下午</span>
            </div>
        </div>
      </div>
    </div> -->
  </header>
</template>

<script>



export default {
  name: 'Header',
  data () {
    return {
      weekday: ''
    }
  },
  mounted () {
    this.weekDay()
  },
  created () {
    // dayjs.extend(isoWeek)
    console.log(this.dayjs().hour(24), 'asdqwe')
    console.log(this.dayjs().format('A'), 'qqq')
  },
  methods: {
    weekDay () {
      const weekday = this.dayjs().day();
      switch (weekday) {
        case 0:
          this.weekday = '星期日'
          break;
        case 1:
          this.weekday = '星期一'
          break;
        case 2:
          this.weekday = '星期二'
          break;
        case 3:
          this.weekday = '星期三'
          break;
        case 4:
          this.weekday = '星期四'
          break;
        case 5:
          this.weekday = '星期五'
          break;
        case 6:
          this.weekday = '星期六'
          break;

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 70px;
  line-height: 70px;
  color: #fff;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  text-rendering: optimizeLegibility;
  background-color: #5283e7;
  .header-title {
    font-size: 30px;
    -webkit-font-feature-settings: "kern";
    font-kerning: normal;
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
      sans-serif;
    font-weight: 650;
    font-style: normal;
    letter-spacing: 4.5px;
  }
}
.r-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .date-time {
    font-size: 28px;
    margin-left: 15px;
    font-kerning: normal;
    font-family: "UnidreamLED";
    font-weight: 650;
    font-style: normal;
    letter-spacing: 4.5px;
  }
}
.header-infos {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-kerning: normal;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
    sans-serif;
  font-style: normal;
  // justify-content: space-around;
  .header-infos-item {
    height: 19px;
    display: flex;
    align-items: center;
    align-content: flex-start;
    .item-text:last-child {
      margin-left: 8px;
    }
  }
}
</style>

