<template>
  <view class="header">
    <view v-if="isShowUserInfo" class="left">
      <unitv-zone
        id="header_zone"
        class="header_zone"
        :down="down"
        :values="[0, 1]"
        :column="2"
      >
        <unitv-item
          :item="0"
          class="item"
          @click="fnNavigate('/pages/login/index')"
        >
          <view class="login_btn">登录</view>
        </unitv-item>
        <unitv-item
          :item="1"
          class="item user"
          @click="fnNavigate('/pages/mine/index')"
        >
          <view class="avatar">
            <image src="/static/avatar.png" />
          </view>
          <view>呀哈哈</view>
        </unitv-item>
      </unitv-zone>
    </view>
    <view class="right">
      <view>{{ time }}</view>
      <view class="logo">
        <image src="/static/logo.png" />
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";

export default {
  props: {
    isShowUserInfo: {
      type: Boolean,
      default: true,
    },
    down: {
      type: String,
      default: "tabs_zone",
    },
  },
  data() {
    return {
      time: "",
    };
  },
  created() {
    this.time = dayjs().format("HH:mm");
    setInterval(() => {
      this.time = dayjs().format("HH:mm");
    }, 1000);
  },
  methods: {
    fnNavigate(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 99;
  overflow: auto;

  .left {
    float: left;
    .header_zone {
      display: flex;

      .item {
        display: flex;
        border-radius: 34rpx;
        background-color: rgba(255, 255, 255, 0.1);
        font-size: 12rpx;
        margin-left: 10rpx;

        .login_btn {
          padding: 3rpx 15rpx;
          border-radius: 34rpx;
        }

        &:first-child {
          margin-left: 0;
        }

        &.user {
          position: relative;
          border-radius: 11rpx;
          background-color: rgba(255, 255, 255, 0.1);
          padding: 3rpx 10rpx 3rpx 30rpx;

          .avatar {
            position: absolute;
            left: 0;
            top: 0;
            border: 2rpx solid #070a26;
            border-radius: 50%;
            font-size: 0;

            image {
              width: 19rpx;
              height: 19rpx;
              border-radius: 50%;
            }
          }
        }

        &.hover {
          background-color: #254eff;
          color: #fff;
        }
      }
    }
  }

  .right {
    float: right;
    font-size: 12rpx;
    display: flex;
    align-items: center;
    justify-content: end;

    .logo {
      margin-left: 26rpx;

      image {
        width: 62rpx;
        height: 12rpx;
      }
    }
  }
}
</style>
