<template>
  <div class="card">
    <div v-if="props.result" :class="['front', props.result]">
      <div class="bgi full-w-h">
        <img
          v-if="props.titlePicture || props.imageUrl"
          class="full-w-h"
          :src="props.titlePicture || props.imageUrl"
        />
        <div :class="['bg_mask', { hasPic: props.titlePicture || props.imageUrl }]"></div>
      </div>
      <div :class="['content', { hasPic: props.titlePicture || props.imageUrl }]">
        <div class="english">
          <AdaptiveText
            :text="english || ''"
            font-family="Arial Black"
            :defaultFontSize="32"
          ></AdaptiveText>
        </div>
        <div class="footBox">
          <AbbrImg :abbr="props.abbr"></AbbrImg>
        </div>
        <div class="chinese">
          <span
            ><AdaptiveText
              :text="chinese || ''"
              font-family="PingFang SC"
              wrap
              :defaultFontSize="24"
            ></AdaptiveText
          ></span>
        </div>
      </div>
    </div>
    <div v-else class="back">
      <div class="content">
        <div v-if="props.titleType === 1" class="english">
          <AdaptiveText
            :text="props.title || ''"
            font-family="Arial Black"
            :defaultFontSize="32"
          ></AdaptiveText>
        </div>
        <div v-else class="chinese">
          <div class="">
            <AbbrImg :abbr="props.abbr"></AbbrImg>
          </div>
          <div class="text">
            <AdaptiveText
              :text="props.title || ''"
              font-family="PingFang SC"
              :defaultFontSize="24"
            ></AdaptiveText>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// import wordFoot from '@/components/PartOfSpeech/PartOfSpeech.vue';
import AdaptiveText from './AdaptiveText.vue'
import type { Option } from '../type'

const props = defineProps<{
  title?: string
  titleType?: number
  abbr?: string
  titlePicture?: string
  wordSpell?: string
  result?: string
  optionList?: Option[]
  znDesc?: string
  spell?: string
  imageUrl?: string
  typeAbbr?: string
}>()

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg_card = `url(${OSS_URL}/xuexiaole_clinet/learnWord/bg_card.png)  center/100% 100% no-repeat`

const chinese = computed(() => {
  if (props.znDesc) return props.znDesc

  if (props.titleType === 1) {
    return props.optionList?.filter(item => item.answer)?.[0].value || ''
  } else if (props.titleType === 2) {
    return props.title
  } else {
    return ''
  }
})

const english = computed(() => {
  if (props.spell) return props.spell

  if (props.titleType === 1) {
    return props.title
  } else if (props.titleType === 2) {
    return props.optionList?.filter(item => item.answer)?.[0].value || ''
  } else {
    return ''
  }
})
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.full-w-h {
  height: 100%;
  width: 100%;
}
img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.card {
  cursor: pointer;
  position: relative;
  width: 280px;
  height: 16.33vh;
  color: rgba(0, 0, 0, 0.75);
  &:last-child {
    margin-right: auto;
  }
  .english {
    font-family: 'Arial Black';
    font-size: 2.67vh;
    text-align: center;
  }
  .chinese {
    font-family: 'PingFang SC';
    font-size: 2vh;
  }
  & > div {
    width: 100%;
    height: 100%;
    border-radius: 1.67vh;
    overflow: hidden;
  }
  :deep(.part-of-speech) {
    margin-right: 0;
  }
  .back {
    background: v-bind(bg_card);

    padding: 0.67vh;
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .chinese {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 2.33vh;
      font-weight: 500;
      text-align: center;
    }
    cursor: pointer;
  }
  .front {
    position: relative;

    .bg_mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    &.right {
      border: 0.33vh solid #8fcc00;
      .bg_mask {
        background-color: rgba(193, 240, 82, 0.8);
      }
      &:hover {
        .content.hasPic {
          filter: opacity(0%);
        }
        .hasPic {
          background-color: rgba(193, 240, 82, 0);
        }
      }
    }
    &.wrong {
      border: 0.33vh solid #bf4d45;
      .bg_mask {
        background-color: rgba(217, 166, 163, 0.8);
      }
      &:hover {
        .content.hasPic {
          filter: opacity(0%);
        }
        .hasPic {
          background-color: rgba(217, 166, 163, 0);
        }
      }
    }
    .content {
      padding: 0.67vh;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.75);
      .footBox {
        font-size: 0;
      }

      .chinese {
        font-family: 'PingFang SC';
        font-size: 2vh;
        font-weight: 600;
        display: flex;
        align-items: center;

        span {
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
