<template>
  <div class="edit-title-wrapper">
    <div class="input-title-wrapper">
      <div class="input-title">请输入大屏标题</div>
      <div ref="titleref" class="title-input" contenteditable="true" spellcheck="false"></div>
    </div>
    <div class="update-wrapper">
      <el-button @click="confirmUpdate">确认修改</el-button>
    </div>
  </div>
</template>

<script>
import { getTitle, updateTitle } from '@/api/title.js'
export default {
  mounted() {
    this.initTitle()
  },
  methods: {
    async initTitle() {
      await getTitle().then(res => {
        console.log(res, 'getTitle')
        this.$refs.titleref.innerText = res.name
      })
    },
    confirmUpdate() {
      updateTitle({
        name: this.$refs.titleref.innerText
      }).then(res => {
        console.log(res, '修改成功')
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      }).catch(() => {
        this.$message.error('修改失败')
      })
    }
  }
}
</script>

<style lang="scss">
  .edit-title-wrapper {
    width: 80%;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 9px 1px #eee;
    margin: 30px auto;
    .input-title-wrapper {
      margin: 30px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .input-title {
        width: 200px;
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
      }
      .title-input {
        padding: 4px;
        border-radius: 4px;
        font-size: 16px;
        width: calc(80% - 200px);
        outline: none;
        border: 1px solid black;
      }
    }
    .update-wrapper {
      display: flex;
      justify-content: flex-end;

    }
  }
</style>