<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item label="主题" prop="effect">
        <el-select v-model="effect">
          <el-option label="dark（黑色）" value="dark" />
          <el-option label="light（白色）" value="light" />
        </el-select>
      </el-form-item>
      <el-form-item label="提示文字" prop="content">
        <el-input v-model="content" placeholder="请输入提示文字" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="出现位置" prop="placement">
        <el-select v-model="placement">
          <el-option label="top（上边）" value="top" />
          <el-option label="top-start（上左）" value="top-start" />
          <el-option label="top-end（上右）" value="top-end" />
          <el-option label="bottom（下边）" value="bottom" />
          <el-option label="bottom-start（下左）" value="bottom-start" />
          <el-option label="bottom-end（下右）" value="bottom-end" />
          <el-option label="left（左边）" value="left" />
          <el-option label="left-start（左上）" value="left-start" />
          <el-option label="left-end（左下）" value="left-end" />
          <el-option label="right（右边）" value="right" />
          <el-option label="right-start（右上）" value="right-start" />
          <el-option label="right-end（右下）" value="right-end" />
        </el-select>
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="偏移量" prop="offset">
        <el-input-number v-model="offset" placeholder="请输入偏移量" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="显示Tooltip箭头" prop="visibleArrow">
        <el-switch v-model="visibleArrow" />
      </el-form-item>
      <el-form-item label="延迟出现(毫秒)" prop="openDelay">
        <el-input-number v-model="openDelay" placeholder="请输入毫秒数" :step="1000" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="手动控制模式" prop="manual">
        <el-switch v-model="manual" />
      </el-form-item>
      <el-form-item label="鼠标可进入tooltip" prop="enterable">
        <el-switch v-model="enterable" />
      </el-form-item>
      <el-form-item label="出现后自动隐藏延时(毫秒)" prop="hideAfter">
        <el-input-number v-model="hideAfter" placeholder="请输入毫秒数" :step="1000" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="tabindex" prop="tabindex">
        <el-input-number v-model="tabindex" placeholder="请输入tabindex" style="width: 178px;" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemTooltip',
  extends: ApDevItemBase,
  data() {
    return {
      effect: 'dark', // 主题
      content: '提示文字', // 显示的内容，也可以通过slot#content传入DOM
      placement: 'bottom', // Tooltip的出现位置
      disabled: false, // 是否禁用
      offset: 0, // 出现位置的偏移量
      visibleArrow: true, // 是否显示Toolti 箭头
      openDelay: 0, // 延迟出现，单位毫秒
      manual: false, // 手动控制模式，设置为true后，mouseenter和mouseleave事件将不会生效
      enterable: true, // 鼠标是否可进入到tooltip中
      hideAfter: 0, // Tooltip出现后自动隐藏延时，单位毫秒，为0则不会自动隐藏
      tabindex: 0 // Tooltip组件的tabindex
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    effect() {
      this.initOpt()
    },
    content() {
      this.initOpt()
    },
    placement() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    offset() {
      this.initOpt()
    },
    visibleArrow() {
      this.initOpt()
    },
    openDelay() {
      this.initOpt()
    },
    manual() {
      this.initOpt()
    },
    enterable() {
      this.initOpt()
    },
    hideAfter() {
      this.initOpt()
    },
    tabindex() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-tooltip class="item" @effect@ @content@ @placement@ @disabled@ @offset@ @visibleArrow@ @openDelay@ @manual@ @enterable@ @hideAfter@ @tabindex@>
            <el-button>文字提示</el-button>
        </el-tooltip>`

      // 数据
      this.data = `{
                    @disabled@
                }`

      // 方法
      this.methods = `{}`

      // ---------- 模板内容替换 ----------
      if (this.effect == 'dark') {
        this.replaceTemplate(' @effect@', '')
      } else {
        this.replaceTemplate('@effect@', `effect="${this.effect}"`)
      }

      this.replaceTemplate('@content@', `content="${this.content}"`)

      if (this.placement == 'bottom') {
        this.replaceTemplate(' @placement@', '')
      } else {
        this.replaceTemplate('@placement@', `placement="${this.placement}"`)
      }

      if (this.disabled) {
        this.replaceTemplate('@disabled@', ':disabled="disabledFlag"')
        this.replaceData('@disabled@', 'disabledFlag: true,')
      } else {
        this.replaceTemplate(' @disabled@', ``)
        this.replaceData('@disabled@', '')
      }

      if (this.offset == '0' || this.offset == '') {
        this.replaceTemplate(' @offset@', '')
      } else {
        this.replaceTemplate('@offset@', `:offset=${this.offset}`)
      }

      if (this.visibleArrow) {
        this.replaceTemplate(' @visibleArrow@', '')
      } else {
        this.replaceTemplate('@visibleArrow@', ':visible-arrow="false"')
      }

      if (this.openDelay == '0' || this.openDelay == '') {
        this.replaceTemplate(' @openDelay@', '')
      } else {
        this.replaceTemplate('@openDelay@', `:open-delay=${this.openDelay}`)
      }

      if (this.manual) {
        this.replaceTemplate('@manual@', 'manual')
      } else {
        this.replaceTemplate(' @manual@', '')
      }

      if (this.enterable) {
        this.replaceTemplate(' @enterable@', '')
      } else {
        this.replaceTemplate('@enterable@', ':enterable="false"')
      }

      if (this.hideAfter == '0' || this.hideAfter == '') {
        this.replaceTemplate(' @hideAfter@', '')
      } else {
        this.replaceTemplate('@hideAfter@', `:hide-after=${this.hideAfter}`)
      }

      if (this.tabindex == '0' || this.tabindex == '') {
        this.replaceTemplate(' @tabindex@', '')
      } else {
        this.replaceTemplate('@tabindex@', `:tabindex=${this.tabindex}`)
      }
    }
  }
}
</script>
