<template>
  <div class="word_form">
    <div v-if="iformList && iformList.length > 0" class="select-container">
      <div class="header">
        <Icon name="jing" size="64"></Icon>
        <span class="title">变形 ｜ <span class="ying">Forms</span></span>
      </div>
      <div class="content">
        <div class="content-row">
          <div class="scroll-view_H hidden_scroll">
            <div class="content_wrapper">
              <div v-for="(item, idx4) in iformList" :key="idx4" class="content-col">
                <div class="enDesc">{{ item.spell }}</div>
                <div class="labels">{{ item.formName }}</div>
                <div v-if="item.usAccents || item.iusAccents" class="accents-box">
                  <div class="icon-box">
                    <div
                      v-show="item.usAccents"
                      class="t-icon"
                      @click="handlePlayus(item, item.usAccents)"
                    >
                      <Accent name="us" :active="item.isplayus"></Accent>
                    </div>
                  </div>

                  <div v-show="item.iusAccents" class="accents usAccents">
                    美
                    <span class="text">{{ item.iusAccents }}</span>
                  </div>
                </div>
                <div v-if="item.brAccents || item.ibrAccents" class="accents-box">
                  <div class="icon-box">
                    <div
                      v-show="item.brAccents"
                      class="t-icon"
                      @click="handlePlaybr(item, item.brAccents)"
                    >
                      <Accent name="br" :active="item.isplaybr"></Accent>
                    </div>
                  </div>
                  <div v-show="item.ibrAccents" class="accents usAccents">
                    英
                    <span class="text">{{ item.ibrAccents }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { playbr, playus } from './hook'

const props = defineProps<{
  formList?: any[]
  typeAbbrList: any[]
  typeAbbr: string
}>()

const emit = defineEmits(['typeActive', 'stopAllLottie'])

const iformList = ref<any[]>()
const itypeAbbrList = ref<any[]>()
const typeActive = ref()

// 停止当前组件喇叭动画
const stopAllLottie = () => {
  ;(iformList.value || []).forEach(item => {
    item.isplaybr = item.isplayus = false
  })
}
defineExpose({
  stopAllLottie,
})

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

const handleAccents = (url: string, type: string) => {
  if (!url) return

  const { accent, file } = JSON.parse(url)[0]
  return type === 'accent' ? accent : file
}

onMounted(() => {
  itypeAbbrList.value = props.typeAbbrList
})

watch(
  () => props.formList,
  (newValue, oldValue) => {
    if (!newValue) return
    let data = JSON.parse(JSON.stringify(newValue))
    data &&
      (iformList.value = data.map(item => {
        return {
          ...item,
          ibrAccents: handleAccents(item.brAccents, 'accent'),
          iusAccents: handleAccents(item.usAccents, 'accent'),
        }
      }))
    itypeAbbrList.value = props.typeAbbrList
    typeActive.value = props.typeAbbr
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.word_form {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;

  .select-container {
    width: 100%;
    // height: 316px;
    margin-top: 4vh;
    padding-bottom: 2.67vh;
    border-bottom: 0.08vh dashed #8390fa;

    .header {
      display: flex;
      align-items: center;

      .t-icon {
        width: 5.33vh;
        height: 5.33vh;
      }

      .title {
        font-family: $font-text;
        font-size: 3.33vh;
        font-weight: 500;
        line-height: 5vh;
        .ying {
          font-family: Arial;
        }
      }
    }

    .content {
      margin: 1.33vh 0 0 52px;

      // height: 230px;
      .content-row {
        display: flex;
        font-family: $font-text;
        font-size: 2.33vh;
        font-weight: 500;
        color: #000000a6;

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

        .content_wrapper {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }

        .content-col {
          margin-right: 64px;
          margin-bottom: 1.33vh;
          display: inline-flex;
          flex-direction: column;
          justify-content: space-between;

          &:nth-last-child(1) {
            flex: 1;
          }

          .enDesc {
            font-family: Arial;
            height: 4.33vh;
            line-height: 4.33vh;
            font-size: 2.83vh;
            color: var(---Grey2, rgba(0, 0, 0, 0.75));
            font-weight: 700;
          }

          .labels {
            margin: 0.67vh 0;
          }

          .accents-box {
            display: flex;
            align-items: center;
            font-family: $font-text;
            font-size: 2vh;
            font-weight: 400;
            height: 4.33vh;
            line-height: 4.33vh;

            .icon-box {
              width: 4.67vh;
              height: 4.67vh;
              margin-right: 8px;
            }

            .t-icon {
              cursor: pointer;
              width: 4.67vh;
              height: 4.67vh;
              color: #000000a6;
            }

            .text {
              display: inline-block;
              color: #a6a6a4;
              font-size: 2.33vh;
            }
          }
        }
      }
    }
  }
}
</style>
