<template>
  <view class="navbar" :style="{height: navbarInfo.height}"  >
    <view class="deco" >
      <view class="content" :style="contentStyles" >
        <view class="left" >
          <view class="back-icon" @click="goback">
            <img :src="staticImg.arowLeft" alt="">
          </view>
          <view class="level-count">
            <view
              class="level-dot"
              v-for="item in props.levelCount"
              :key="item"
              :style="{backgroundColor: item <= props.progress ? '#1191E7' : '#FFCC6A' }"
            />
          </view>
          <view class="countdown" >
            <image :src="staticImg.clock" />
            {{props.countdownTotal}}
          </view>
        </view>
        <view class="right" >
          <img class="magnifier" @click="opraMagnifier" :src="state.magnifierState ?staticImg.magnifierClose : staticImg.magnifierOpen" alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup name="navbar" >
import { defineProps, reactive, defineEmits } from "vue"
import { useNavbarInfo, useStaticImg } from '@/hooks/index';
import type { CardModeEnum } from "@/enum/constant";

const navbarInfo = useNavbarInfo()

const staticImg = useStaticImg()

interface IPorps {
  mode: CardModeEnum
  levelCount: number  // 总题卡数
  progress: number  // 当前做题进度
  countdownTotal: number // 倒计时总时间
}

const props = defineProps<IPorps>()

const emits = defineEmits(['goback', 'changeMagnifier'])

console.log(navbarInfo.height);

const contentStyles = {
  height: navbarInfo.contentHeight,
  top: navbarInfo.top,
  left: navbarInfo.left
}

const state = reactive({
  magnifierState: false
})

const goback = () => emits('goback')

const opraMagnifier = () => {
  state.magnifierState = !state.magnifierState
  emits('changeMagnifier', state.magnifierState)
}

</script>


<style lang="less" scoped >
.navbar {
  width: 100%;
  background: rgba(251, 223, 172, 1);
  position: relative;
  .deco {
    width: 100%;
    height: 100%;
    background: #F9BF4F;
    border-radius: 0px 0px 40rpx 40rpx;
    padding: 0 26rpx;
    box-sizing: border-box;
    .content {
      width: calc(100vw - 104rpx);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      .left {
        display: flex;
        align-items: center;
        .back-icon {
        width: 24rpx;
        height: 40rpx;
        margin-right: 26rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .level-count {
        background: #FAA400;
        box-shadow: inset 0px 2rpx 6rpx 0px rgba(162,76,0,0.25);
        border-radius: 200rpx;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-right: 52rpx;
      .level-dot {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 16rpx;
        display: inline-block;
      }
      }
      .countdown {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        width: 130rpx;
        height: 64rpx;
        background: #FAA400;
        box-shadow: inset 0px 2rpx 6rpx 0px rgba(162,76,0,0.25);
        border-radius: 0px 200rpx 200rpx 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        image {
          width: 66rpx;
          height: 80rpx;
          position: absolute;
          left: -32rpx;
          top: -6rpx;
          display: block;
        }
      }
      }
      .right {
        .magnifier {
          width: 96rpx;
          height: 96rpx;
        }
      }
    }
    
  }
}
</style>