<template>
  <div class="demo-typo-interactive">
    <ui-space layout="vertical">
      <ui-typo-text
        :copyable="true"
        text="这是一段文本"></ui-typo-text>

      <ui-typo-text
        text="这是一段文本(自定义复制文本)"
        type="success"
        :copyable="{
          text:'custom copy',
          onCopy: handleCopy,
          icon: ['campaign','bookmark'],
          tooltips: false,
        }">
        <template slot="copy-icon">
          <ui-icon name="adduser"></ui-icon>
        </template>
        <template slot="copyed-icon">
          <ui-icon name="animal_and_nature"></ui-icon>
        </template>
      </ui-typo-text>
      <ui-typo-text
        :text="editText"
        :editable="editable">
        <template slot="edit-icon">
          <ui-icon name="adduser"></ui-icon>
        </template>
      </ui-typo-text>

      <ui-typo-text
        :text="editText"
        :editable="{
          onChange: handleEdit,
          onStart: handleStart,
          tooltip: false
        }"></ui-typo-text>
    </ui-space>
  </div>
</template>
<script>
import { TypoText, Space, Icon } from "amumu-ui"

export default {
  components: {
    "ui-typo-text": TypoText,
    "ui-space": Space,
    "ui-icon": Icon,
  },
  data() {
    return {
      editable: {
        onChange: this.handleEdit,
        maxlength: 15,
        onStart: this.handleStart,
        tooltip: "编辑",
      },
      editText: "这是一段文本(可编辑)",
    }
  },
  methods: {
    handleCopy() {
      console.log("handle copy")
    },
    handleEdit(newText) {
      this.editText = newText
    },
    handleStart() {
      this.editable.maxlength = 20
    },
  },
}
</script>
<style lang="scss">
.demo-typo-interactive {
  .mm-space {
    display: flex;
  }
}
</style>
