<template>
  <w-text am time="15s" style="--move: 15em" class="main-title">
    <div :contenteditable="editable" @dblclick="edit">
      {{ poStore.po.mainTitle || title }}
    </div>
  </w-text>
</template>
<script setup>
import { ref } from 'vue'
import { usePoStore } from '@/store'
const title = import.meta.env.VITE_APP_NAME
const poStore = usePoStore()

const editable = ref(false)

const edit = (event) => {
  if (editable.value == false) {
    editable.value = true
  } else {
    editable.value = false
    poStore.po.mainTitle = event.target.textContent;
  }
}
</script>
<style lang="scss" scoped>
.main-title {
  color: var(--w-main-light-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "黑体";
  font-weight: bold;
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
  // transform: scale(1, 1.1);

}
</style>