<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    itemData: anyObj
    currentId: string
    showAnswer: boolean
  }>(),
  {
    itemData: () => ({}),
    currentId: '',
    showAnswer: false,
  },
)
const emits = defineEmits(['selecct'])

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`

const app_bg = `url(${OSS_URL}/urm/app_bg_big.png) bottom/100% 100% no-repeat`
const showError = ref(false)
const isTrue = ref(false)
// const isTrue = computed(() => props.currentId === props.itemData && props.showAnswer);

function changeStrange() {
  // props.itemData.strange = !props.itemData.strange;
  // operateTag({
  //     id: props.itemData.wordId,
  //     meaningId: props.itemData.meaningId,
  //     levelId: props.itemData.levelId,
  //     knowFlag: null,
  //     strangeFlag: props.itemData.isStrange ? 1 : 0,
  // }).then(() => {
  //     // handleOpenMask(isMarked.value);
  // });
}
const choose = () => {
  if (props.showAnswer) return
  showError.value = props.currentId !== props.itemData.answerID
  emits('selecct', props.itemData.answerID)
}

// abbr: '',
//         word: 'swim',
//         pinyin: '/gawsg/',
//         wordId: '123',
//         accentInfo:
//             'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
//         meaning: '哈哈',
//         strange: false,
</script>
<template>
  <div
    :class="{
      'word-box': true,
      isError: showError,
      isTrue: isTrue,
    }"
    @click="choose"
  >
    <div class="word-content">
      <div class="word">
        {{ itemData.word }}
      </div>
      <div class="sound">
        {{ itemData.pinyin }}
      </div>
      <div v-if="isTrue" class="znName">
        {{ itemData.meaning }}
      </div>
    </div>

    <div class="tool-box">
      <div class="tool-box-item">
        <Icon
          :name="itemData.strange ? 'shengciben_active' : 'shengciben'"
          size="42"
          @click="changeStrange"
        ></Icon>
      </div>
      <div class="tool-box-item">
        <Horn :src="itemData.accentInfo" width="42"></Horn>
      </div>
      <div v-if="isTrue" class="tool-box-item">
        <Icon name="wordDetail" size="42"></Icon>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.word-box {
  cursor: pointer;
  width: 320px;
  height: 26.33vh;
  padding: 2vh;
  border-radius: 1.67vh;
  border: 0.25vh solid #8cdaff;
  background: linear-gradient(180deg, #d6f2ff 0%, #d6f2ff 1.5%);
  .word-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 17vh;
  }

  .word,
  .sound,
  .znName {
    width: 100%;

    color: var(--, $font-color);
    font-family: 'Droid Serif';
    font-size: 2.33vh;
    font-style: normal;
    line-height: 4.67vh; /* 128.571% */
    font-weight: 400;
    text-align: center;
    border-radius: 1.33vh;
  }
  .word {
    font-weight: 700;
    background: #fff;
  }
  .sound {
    border: 0.17vh solid #8cdaff;
  }
  .znName {
    border: 0.17vh solid #8fcc00;
  }
  .tool-box {
    display: flex;
    justify-content: center;
    margin-top: 0.42vh;
    &-item {
      cursor: pointer;

      height: 5vh;
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.08vh solid $font-color;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.65);
      margin-right: 46px;
      &:last-child {
        margin: 0;
      }
    }
    .t-icon {
      height: 3.5vh;
      width: 3.5vh;
    }
  }
}
.isError {
  border: 0.25vh solid #d9574e;
  background: #fff2f2;
  .word {
    background: #ee9f9a;
  }
  .sound {
    border: 0.17vh solid #d9574e;
  }
}
.isTrue {
  border: 0.25vh solid #8fcc00;
  background: #fbfff2;
  .word {
    background: #c1f052;
  }
  .sound {
    border: 0.17vh solid #8fcc00;
  }
}
</style>
