<template>
  <div class="login_info">
    <div class="user_info">
      <div class="user_icon">
        <img src="../img/user.png" alt="icon" />
      </div>
      <div class="user_name">
        <p>欢迎您，</p>
        <p>{{ userAccount }}</p>
      </div>
    </div>
    <div class="time_info">
      <div class="clock_icon">
        <img src="../img/clock.png" alt="icon" />
      </div>
      <div class="login_time">
        <p>登录时间</p>
        <p>{{ time }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userAccount: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      time: "",
    };
  },
  methods: {
    getTime: function () {
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      let week = d.getDay();
      switch (week) {
        case 1:
          week = "星期一";
          break;
        case 2:
          week = "星期二";
          break;
        case 3:
          week = "星期三";
          break;
        case 4:
          week = "星期四";
          break;
        case 5:
          week = "星期五";
          break;
        case 6:
          week = "星期六";
          break;
        default:
          week = "星期天";
      }
      this.time = year + "-" + month + "-" + day + "(" + week + ")";
    },
  },
  mounted() {
    this.getTime();
  },
};
</script>

<style scoped lang="less">
.login_info {
  // background: rgb(212, 212, 212);
  width: 100%;
  .user_info {
    height: 48px;
    border-bottom: 1px solid #eee;
    display: flex;
    .user_icon {
      margin: 8px 0 0 10px;
      width: 30px;
      height: 30px;
      img {
        // width: 30px;
        // height: 30px;
        width: 24px;
        height: 24px;
      }
    }
    .user_name {
      width: 100px;
      height: 40px;
      margin: 4px 0 0 5px;
      p {
        line-height: 20px;
        height: 20px;
      }
    }
  }
  .time_info {
    height: 50px;
    display: flex;
    .clock_icon {
      margin: 8px 0 0 10px;
      width: 24px;
      height: 24px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .login_time {
      margin: 4px 0 0 5px;
      p {
        line-height: 20px;
        height: 20px;
      }
    }
  }
}
</style>
