<!--
 * @Description: 头部
 * @Author: kcz
 * @Date: 2019-12-30 00:37:05
 * @LastEditors: kcz
 * @LastEditTime: 2020-03-26 20:18:56
 -->
<template>
  <div class="header">
    <div class="header-left">
      <a-icon type="left" @click="$emit('back')" />
      <span v-if="!editing" style="marginLeft:20px"> {{ baseOptions.innerTitle }}</span>
      <a-icon v-if="!editing" type="edit" style="padding:10px 20px" @click="editTitle" />
      <a-input
        v-if="editing"
        ref="headerInput"
        class="header-input"
        v-model="baseOptions.innerTitle"
        @blur="blur"
      ></a-input>
    </div>

    <div class="operation">
      <a-button icon="code" size="large" @click="$emit('handleShare')">
        分享
      </a-button>
      <a-button style="marginLeft:25px" icon="save" size="large" @click="$emit('handleSave')">
        保存
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editing: false
    }
  },
  props: {
    baseOptions: {
      type: Object,
      default: () => ({})
    }
  },
  components: {},
  methods: {
    editTitle() {
      this.editing = true
      setTimeout(() => {
        console.log(this.$refs.headerInput)
        this.$refs.headerInput.focus()
      }, 0)
    },
    blur() {
      this.editing = false
    },
  },

}
</script>
<style scoped lang="less">
.header-left {
  display: flex;
  flex: 1;
  align-items: center;
  span {
    display: block;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.header-input {
  width: 50%;
}
</style>
