<template>
  <div class="word_gist">
    <div class="word_translate_box">
      <div class="spell">
        <div class="spell-content">
          {{ propdata.spell }}
        </div>
      </div>
      <div class="nav_box">
        <div class="nav_tabs">
          <img
            :src="`${OSS_URL}/icon/${active_new ? 'shengciben_01_active' : 'shengciben_01'}.svg`"
            alt=""
            @click="changeMode(0)"
          />
        </div>
      </div>
    </div>
    <div class="articulation_box">
      <div class="articulation">
        <div
          v-if="propdata.usAccents"
          class="t-icon"
          @click="handlePlayus(propdata, propdata.usAccents)"
        >
          <Accent name="us" :active="propdata.isplayus"></Accent>
        </div>
        <div class="accents usAccents">
          美 <span class="text"> {{ propdata.iusAccents }}</span>
        </div>
      </div>
      <div class="articulation">
        <div
          v-if="propdata.brAccents"
          class="t-icon"
          @click="handlePlaybr(propdata, propdata.brAccents)"
        >
          <Accent name="br" :active="propdata.isplaybr"></Accent>
        </div>
        <div class="accents brAccents">
          英 <span class="text">{{ propdata.ibrAccents }} </span>
        </div>
      </div>
    </div>
    <div class="origin_box">
      <div v-for="(voc, idx2) in propdata.vocabularyWordList" :key="idx2" class="origin">
        {{ voc.tagName }}
      </div>
    </div>
    <div class="type_box">
      <div v-for="(item, idx1) in propdata.meaningSimpleList || []" :key="idx1" class="type">
        <AbbrImg height="40" gap="4" :abbr="item.typeAbbr"></AbbrImg>
        <div>
          <span v-for="(item2, o) in item.descList" :key="o" :class="['desc']">
            <span v-if="item.descList.length > 1" class="desc_sort">{{ o + 1 }}</span>
            <span v-if="item2.levelInfo" class="isActive">{{ item2.znDesc }}</span>
            <span v-else v-html="handleDesc(item2)"></span><span></span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="select-box-p">
    <div v-if="itypeAbbrList && itypeAbbrList.length > 0" class="select-box">
      <div class="scroll-view_H hidden_scroll">
        <div
          v-for="(i, idx3) in itypeAbbrList"
          :key="idx3"
          :class="['select-item', { active: typeActive === i }]"
          @click="changeTypeId(i, idx3)"
        >
          {{ i }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import wordDetailApi from '@/api/subject/wordDetail'
import { playbr, playus } from './hook'

interface formType {
  id?: any
  spell: string
  brAccents: string
  usAccents: string
  meaningSimpleList?: any[]
  ibrAccents?: string
  iusAccents?: string
  vocabularyWordList: any[]
  strangeFlag: number
  knowFlag: number
  typeAbbrList: any[]
  typeAbbr: string
  isplaybr?: boolean
  isplayus?: boolean
}
const props = defineProps<{
  detailData: formType
  wordId: string
}>()
const emit = defineEmits(['typeActive', 'toDetail', 'stopAllLottie'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/dictionaries_box.svg)`

const active_new = ref(false)
const active_familiar = ref(false)
const itypeAbbrList = ref<any[]>()
const typeActive = ref()
const typeActiveIdx = ref(0)
const scrollLeft = ref(0) // 滑动距离
// 停止当前组件喇叭动画
const stopAllLottie = () => {
  propdata.value.isplaybr = propdata.value.isplayus = false
}
defineExpose({
  stopAllLottie,
})

const handlePlayus = (data: anyObj, url: string) => {
  emit('stopAllLottie')
  playus(data, url)
}
const handlePlaybr = (data: anyObj, url: string) => {
  console.log('url', data, url)

  emit('stopAllLottie')
  playbr(data, url)
}

const changeTypeId = (value: any, index: number) => {
  typeActiveIdx.value = index
  typeActive.value = value
  emit('typeActive', typeActive.value, props.detailData.spell)
}

const handleJump = (value: anyObj) => {
  if (propdata.value.spell === value.hrefWord) return
  if (!value.hrefWord) return
  emit('toDetail', value.hrefWord)
}

const handleDesc = (value: anyObj) => {
  if (!value.hrefWord) return value.znDesc
  const regex = new RegExp(value.hrefWord, 'gi')
  return value.znDesc.replace(
    regex,
    (match: any) =>
      `<span style="color:#99D609;font-weight: bold;cursor: pointer; " onClick = 'handleJump(${JSON.stringify(
        value,
      )})'>${match}</span>`,
  )
}

const changeMode = (value: any) => {
  if (value === 0) {
    active_new.value = !active_new.value
  } else {
    active_familiar.value = !active_familiar.value
  }
  operateWord()
}

const operateWord = () => {
  let postData = {
    id: props.wordId,
    knowFlag: active_familiar.value ? 1 : 0,
    strangeFlag: active_new.value ? 1 : 0,
  }
  wordDetailApi.operateTag(postData).then(res => {})
}

const propdata = ref<formType>({
  ...props.detailData,
})

onMounted(() => {
  window.handleJump = handleJump
})

watch(
  () => props.detailData,
  (newValue, oldValue) => {
    if (!newValue) return
    let data = JSON.parse(JSON.stringify(newValue))
    data = {
      ...data,
      ibrAccents: data.brAccents && JSON.parse(data.brAccents)[0].accent,
      iusAccents: data.usAccents && JSON.parse(data.usAccents)[0].accent,
    }

    for (const item of data.meaningSimpleList || []) {
      item.typeAbbr = (item.typeAbbr || '').split('/')
    }
    propdata.value = data
    active_new.value = propdata.value.strangeFlag === 1
    active_familiar.value = propdata.value.knowFlag === 1
    itypeAbbrList.value = propdata.value.typeAbbrList
    typeActive.value = propdata.value.typeAbbr
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.word_gist {
  height: fit-content;
  padding: 5.33vh 0 4vh 0;
  border-bottom: 0.08vh solid #8390fa;
  box-sizing: border-box;

  .word_translate_box {
    display: flex;
    justify-content: space-between;

    .spell {
      height: 8.33vh;
      font-family: Arial;
      font-size: 5.33vh;
      font-weight: 500;
      border: 0.33vh solid #8a94fd;
      border-right: none;
      border-left: none;
      text-align: center;
      line-height: 8vh;
      padding: 0 32px;
      position: relative;
      .spell-content {
        position: relative;
      }
      &::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-40%);
        content: '';
        height: 2.83vh;
        width: 100%;
        border: 0.25vh dashed #8a94fd;
        border-right: none;
        border-left: none;
      }
    }

    .nav_tabs {
      img {
        pointer-events: auto;
        cursor: pointer;
        width: 5.33vh;
        height: 5.33vh;
      }
    }
  }

  .articulation_box {
    display: flex;
    margin: 2.67vh 0 2vh 0;

    .articulation {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .t-icon {
        cursor: pointer;
        width: 4.67vh;
        height: 4.67vh;
        line-height: 3.67vh;
        margin-right: 24px;
      }

      .accents {
        font-family: $font-text;
        font-size: 2vh;
        font-weight: 400;
        line-height: 3vh;
        color: #000000a6;

        .text {
          font-size: 2.33vh;
          line-height: 3.5vh;
          color: #a6a6a4;
        }
      }
    }
  }

  .origin_box {
    display: flex;

    .origin {
      width: 112px;
      height: 3.17vh;
      background-color: #acb3fd;
      padding: 0.33vh 24px 0.33vh 24px;
      border-radius: 0.83vh;
      font-family: $font-text;
      font-size: 1.67vh;
      font-weight: 400;
      line-height: 3.17vh;
      text-align: center;
      margin-right: 16px;
    }
  }

  .type_box {
    .type {
      font-family: $font-text;
      font-size: 2.67vh;
      font-weight: 400;
      display: flex;
      margin: 2vh 0 2vh 0;

      &:nth-of-type(1) {
        margin-top: 2.67vh;
      }

      .img {
        width: auto;
        height: 4.17vh;
        margin-right: 4px;
      }

      .desc {
        line-height: 4vh;
        margin-right: 16px;
        .desc_sort {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 2.5vh;
          height: 2.5vh;
          margin-right: 6px;
          line-height: 2.83vh;
          text-align: center;
          font-size: 2vh;
          border: 0.08vh solid #8409d6;
          border-radius: 50%;
          color: #8409d6;
        }
        .isActive {
          color: #8409d6;
          text-decoration-line: underline;
          text-decoration-style: wavy;
          text-underline-offset: 8px;
        }
      }
    }
  }
}

.select-box-p {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;

  .select-box {
    margin-top: 5.33vh;
    max-width: 1440px;
    // height: 64px;
    border-radius: 1.67vh;
    background-color: rgba(0, 0, 0, 0.6);

    color: #000000bf;
    font-family: $font-special;
    font-size: 3vh;
    font-weight: 400;
    position: relative;

    .scroll-view_H {
      overflow-x: scroll;
      white-space: nowrap;
      width: 100%;

      .select-item {
        cursor: pointer;
        width: 320px;
        height: 5.33vh;
        text-align: center;
        line-height: 5.33vh;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.65);
        text-align: center;
        font-family: $font-special;
        font-size: 3.33vh;
        font-style: normal;
        font-weight: 400;

        &.active {
          background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
          backdrop-filter: blur(3px);
          border: 0.33vh solid rgba(0, 0, 0, 0.6);
          border-radius: 1.67vh;
          color: #0d1b0d;
        }
      }
    }
  }
}
</style>
