<template>
  <div class="editHeader">
    <div class="editProofName">
      <input
        type="text"
        class="outline-none w-full h-full"
        style="background-color: #f4f4f4; padding: 0 21px"
        :value="title"
        @input="handle"
      />
    </div>
    <div class="flex items-center mt-2.5">
      <div>
        <Icon iconName="iconjiang" size="18" style="margin-right: 8px"></Icon>
      </div>
      <div class="just-do-it">点击以下添加一级标题开始自定义模板吧 ！</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from "@/components/Icon/index.vue";
defineProps<{
  title: string;
}>();

const emit = defineEmits(["update:title"]);

const handle = (e: Event) => {
  emit("update:title", (e.target as HTMLInputElement).value);
};
</script>

<style lang="scss" scoped>
.editHeader {
  height: 114px;
  background: #ffffff;
  border-radius: var(--sy-border-radius);
  padding-top: 23px;
  padding-left: 33px;
  padding-right: 33px;
  .editProofName {
    height: 41px;
    background: #f4f4f4;
    input {
      font-size: 20px;
      font-weight: 500;
      color: var(--sy-black);
    }
  }
  .just-do-it {
    font-size: 14px;
    font-weight: 400;
    color: #292929;
  }
}
</style>
