<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = withDefaults(
  defineProps<{
    titleList: anyObj[]
    wordList: anyObj[]
    currentId: string
    showAnswer: boolean
  }>(),
  {
    titleList: () => [{}],
    wordList: () => [{}],
    currentId: '',
    showAnswer: false,
  },
)
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`

function SwitchCollect(item: anyObj) {}
function hasAnswerWord(sentence: string) {}

const getRegx = (str: string, showAnswer = false) => {
  const regx = new RegExp('\\b(' + props.wordList.map(item => item.word).join('|') + ')\\b', 'gi')
  return showAnswer
    ? str.replace(
        regx,
        match => `<span style="color: green; text-decoration: underline;">${match}</span>`,
      )
    : str.replace(regx, '____')
}

onMounted(() => {
  console.log(props.titleList[0].id, props.currentId)
})
</script>
<template>
  <div class="box-list">
    <div v-for="item in titleList" :key="item.id" class="box-list-item">
      <div class="sentence">
        <div :class="{ english: true, active: item.id === currentId }">
          <span v-html="getRegx(item.enDesc, showAnswer)"> </span>
        </div>
      </div>
      <div class="tool-box">
        <div class="icon">
          <Horn :src="item.enUrl" width="42"></Horn>
        </div>
        <div class="icon" @click.stop="SwitchCollect(item)">
          <img :src="`${OSS_URL}/icon/collect2_${item.collect ? 'active' : 'nomal'}.svg`" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-list {
  width: max-content;
  margin: 0 auto;
}
.box-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sentence {
    margin-right: 24px;
    :deep(.english) {
      max-width: 1000px;
      padding: 1vh 32px;
      color: var(--, $font-color);
      font-family: 'Droid Serif';
      font-size: 2.83vh;
      font-style: normal;
      font-weight: 400;
      line-height: 4.17vh; /* 147.059% */
      border-radius: 1.67vh;

      &.active {
        background: #e9f9ff;
        margin-bottom: 1.33vh;
      }
    }
  }
  .tool-box {
    display: flex;

    & > .icon {
      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: 24px;
      &:last-child {
        margin: 0;
      }
      img {
        height: 3.5vh;
        width: 42px;
      }
    }
  }
  &:last-child {
    .sentence {
      .english {
        margin: 0;
      }
    }
  }
}
</style>
