<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" mode="bottom" :close-on-click-overlay="true" :closeable="false" :round="16">
        <view class="theme-ie w-auto box-border bg-white">
          <view class="popup-header">
            <view class="popup-header-left">
              <uv-icon name="calendar" size="26" />
              <view class="popup-header-left-title">
                <text>答题卡</text>
                <slot name="title" />
              </view>
            </view>
            <view class="popup-header-right">
              <block v-if="!readonly">
                <view class="stats-dot stats-dot-done">已答</view>
                <view class="stats-dot stats-dot-not-done">未答</view>
                <view class="stats-dot stats-dot-not-know">不会</view>
              </block>
              <block v-else>
                <view class="stats-dot stats-dot-correct">答对</view>
                <view class="stats-dot stats-dot-incorrect">答错</view>
                <view class="stats-dot stats-dot-not-done">未答</view>
              </block>
            </view>
          </view>
          <slot />
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>

<script lang="ts" setup>
const props = defineProps<{
  readonly?: boolean;
}>();
const popupRef = ref();
const open = () => {
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-header {
  @apply px-30 h-120 flex items-center justify-between;
}

.popup-header-left {
  @apply flex items-center;
}

.popup-header-left-title {
  @apply flex items-center text-30 text-fore-title font-bold;
}

.popup-header-right {
  @apply flex items-center gap-x-60;
}

.stats-dot {
  @apply relative text-22 text-fore-light;

  &::before {
    @apply content-[''] absolute top-6 -left-30 w-18 h-18 rounded-full;
  }

  &.stats-dot-done {
    &::before {
      @apply bg-primary;
    }
  }

  &.stats-dot-not-done {
    &::before {
      @apply w-14 h-14 border-2 border-solid border-back;
    }
  }

  &.stats-dot-not-know {
    &::before {
      @apply bg-back;
    }
  }

  &.stats-dot-correct {
    &::before {
      @apply bg-[#2CC6A0];
    }
  }

  &.stats-dot-incorrect {
    &::before {
      @apply bg-[#FF5B5C];
    }
  }
}
</style>
