<template>
    <div class="header" v-if="theme === 'blue' ">
        <div class="header__left">
            <!--                武隆区救助智慧终端-->
            <router-link to="/"><img src="../assets/images/headerIcon.png" alt=""></router-link>
            <router-link to="/">
                <router-link to="/">
                    <span class="back">首页</span>
                </router-link>
            </router-link>

        </div>
        <div class="header__right">
            <span>{{ dayOfWeek }} <br>{{ formattedDate }}</span>
            <span>{{ formattedTime }}</span>
        </div>
    </div>
    <div class="header2" v-if="theme === 'white' ">
        <div class="header__left">
            <!--                武隆区救助智慧终端-->
            <router-link to="/"><img  src="../assets/images/wl_icon.png" alt=""></router-link>
            <router-link to="/">
                <span class="back">首页</span>
            </router-link>

        </div>
        <div class="header__right">
            <span>{{ dayOfWeek }} <br>{{ formattedDate }}</span>
            <span>{{ formattedTime }}</span>
        </div>
    </div>
</template>

<script  >
export default {
  props: {
    theme: {
      type: String,
      default: 'blue'
    }
  },
  data () {
    return {
      dayOfWeek: '',
      formattedDate: '',
      formattedTime: ''
    }
  },
  methods: {

    // 获取时间
    updateDateTime () {
      const now = new Date()

      // 获取星期
      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.dayOfWeek = daysOfWeek[now.getDay()]

      // 获取年月日
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      this.formattedDate = `${year}-${month}-${day}`

      // 获取小时和分钟
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      this.formattedTime = `${hours}:${minutes}`
    }
  },
  mounted () {
    this.updateDateTime()
    setInterval(this.updateDateTime, 1000)
  }
}

</script>

<style scoped lang="less">
.header {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    background:url("../assets/images/headerBg2.png");
    background-size: 100% 113%;
    height: 3.906vw;
    background-color: #fff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;

    &__left {
        //height: 100%;
        display: flex;
        align-items: center;
        gap: 1vw;
        img {
            width: 20.15vw;
        }
        .back{
            display: inline-block;
            width:  3.85vw;
            height: 1.96vw;
            background-color: #E8F2FF;
            color: #347BD5;
            font-size: 0.9vw;
            text-align: center;
            line-height: 1.96vw;
            border-radius: 4px;

        }

    }

    &__right {
        display: flex;

        span:nth-child(1) {
            //color: red;
            text-align: right;
            display: inline-block;
            margin-right: 0.52vw;
            font-size: 0.729vw;
            line-height: 1vw;

        }

        span:nth-child(2) {
            font-size: 2vw;
            font-weight: 700;

        }
    }

}
.header2 {
    height: 3.906vw;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;

    &__left {
        //height: 100%;
        img {
            width: 20.15vw;
        }
    }

    &__right {
        display: flex;

        span:nth-child(1) {
            //color: red;
            text-align: right;
            display: inline-block;
            margin-right: 0.52vw;
            font-size: 0.729vw;
            line-height: 1vw;

        }

        span:nth-child(2) {
            font-size: 2vw;
            font-weight: 700;

        }
    }

}
</style>
