<template>
  <div class="picture__list">
    <div
      v-for="item in props.list"
      :key="item.wordId"
      class="picture__item"
      @click="$emit('selected', item.answer, item)"
    >
      <div :class="[item?.result, 'item__content']">
        <template v-if="item.optionType === 2">
          <img mode="aspectFit" :src="item.value" />
          <!-- <LazyLoad :src="item.value" /> -->
        </template>
        <template v-else>
          <div class="item__text">
            <AbbrImg :abbr="item.abbr" gap="8"></AbbrImg>
            <span>{{ item.value }}</span>
          </div>
        </template>
      </div>
      <div v-show="props.result === question_wrong" class="item__answer">
        <div class="item__answer__wrap">
          <div style="font-family: Arial; font-size: 32px; font-weight: 400">
            {{ item.spell }}
          </div>
          <div class="item__answer__wrap__bottom">
            <AbbrImg :abbr="item.abbr" gap="8"></AbbrImg>

            <span>{{ item.tips }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { question_wrong } from '../..'
import type { Option } from '../interface'

const props = defineProps<{
  list: Array<any>
  result: null | string
}>()

const emit = defineEmits<(e: 'selected', answer: boolean, optionsItem: Option) => void>()
const OSS_URL = import.meta.env.VITE_OSS_URL
const cross = `url(${OSS_URL}/xuexiaole_clinet/normalMode/cross.png)`
const tick = `url(${OSS_URL}/xuexiaole_clinet/normalMode/tick.png)`
</script>

<style lang="scss" scoped>
$red: #d9574e;

* {
  box-sizing: border-box;
  user-select: none;
}

@keyframes animate__fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.picture__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .picture__item {
    flex-shrink: 0;
    width: 397px;
    margin-bottom: 8vh;

    .item__content {
      position: relative;
      width: 397px;
      height: 19.25vh;
      border-radius: 0.67vh;
      border: 0.33vh solid #d9d163;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .item__text {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.83vh;
      }

      &.right {
        border: 0.33vh solid #8fcc00;
        cursor: auto;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(193, 240, 82, 0.25);
          z-index: 1;
        }

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 5.33vh;
          background-image: v-bind(tick);
          background-size: contain;
        }
      }

      &.error {
        border: 0.33vh solid $red;
        cursor: auto;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(217, 87, 78, 0.25);
          z-index: 1;
        }

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 5.33vh;
          background-image: v-bind(cross);
          background-size: contain;
        }
      }
    }

    .item__answer {
      display: flex;
      justify-content: center;

      &__wrap {
        // display: flex;
        /*设置子元素的宽度不自动继承父元素*/
        text-align: center;
        width: fit-content;
        /*设置子元素的宽度自适应*/
        width: -webkit-fit-content;
        width: -moz-fit-content;
        border-radius: 0.83vh;
        background: #fff01f;
        opacity: 0;
        animation: animate__fadeIn 0.3s linear 1.2s forwards;
        padding: 0.67vh 10px;
        margin-top: 0.67vh;

        &__bottom {
          display: flex;
        }
      }

      text {
        display: inline-block;
        border-radius: 0.67vh;
        background: #fff01f;
        color: var(--grey-3, rgba(0, 0, 0, 0.65));
        // font-size: 32px;
        font-size: 2.67vh;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }
    }
  }
}
</style>
