<template>
  <div class="written-wrapper">
    <ScrollView class="word-scroll" scroll-x :list="wordsList">
      <div class="word-content">
        <div class="word" @click="handleWord(item, index)" :class="{ active: wordIdx === index }" v-for="(item, index) of wordsList" :key="item">{{ item }}</div>
      </div>
    </ScrollView>
    <Written @result="getWordList" :width="552" :height="196" background-color="#ffffff" fill-font-size="48px" fill-style="rgba(0, 0, 0, 0.02)" stroke-style="#516DD8" />
    <div class="del" @click="del">
      <img src="../../assets/images/search/del.svg" class="del-icon" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Written from '../Written/Written.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'

const wordsList = ref([])
function getWordList(list) {
  wordsList.value = list
}

const emits = defineEmits(['handle-word', 'del'])
const wordIdx = ref(-1)
const timer = ref(null)
function handleWord(item, index) {
  clearTimeout(timer.value)
  wordIdx.value = index
  emits('handle-word', item)
  timer.value = setTimeout(() => {
    wordIdx.value = -1
    clearTimeout(timer.value)
  }, 300)
}

function del() {
  emits('del')
}
</script>

<style lang="scss" scoped>
.written-wrapper {
  position: relative;
  width: 552px;
  height: 252px;
  background: #ffffff;
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
  .word-scroll {
    position: relative;
    height: 56px;
    background: #ffffff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);
    .word-content {
      display: inline-block;
      white-space: nowrap;
    }
    .word {
      display: inline-block;
      width: 66px;
      height: 56px;
      text-align: center;
      line-height: 56px;
      font-weight: 700;
      font-size: 18px;
      font-family: 'font_bold';
      color: rgba(0, 0, 0, 0.6);
      &.active {
        color: #fff;
        background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
      }
    }
  }
  .del {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 48px;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0px -1px 0px rgba(177, 189, 220, 0.1);
    border-radius: 8px;
  }
}
</style>
