<template>
  <el-tooltip :disabled="disabled" :effect="effect" :content="sonContent" :placement="placement" v-bind="$attrs">
    <slot></slot>
  </el-tooltip>
</template>

<script>
export default {
  name: 'DgTooltip',
  props: {
    apiCode: {
      type: String,
      default: () => 'tooltipSysDict',
    },
    primaryKey: {
      type: String,
      default: () => '',
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    effect: {
      type: String,
      default: () => 'dark',
    },
    content: {
      type: String,
      default: () => '',
    },
    placement: {
      type: String,
      default: () => 'top',
    },
  },
  data() {
    return {
      sonContent: '',
    }
  },
  watch: {
    content: {
      handler(newVal, oldVal) {
        this.sonContent = newVal
      },
      deep: true,
    },
  },
  created() {
    if (this.content) this.sonContent = this.content
    else if (this.primaryKey) this.getContent()
    else this.sonContent = '暂无提示内容'
  },
  methods: {
    // 获取content内容
    async getContent() {
      let res = await this.$api.DgJsonStore({
        apiCode: 'tooltipSysDict',
        params: `command=init&limit=1&start=0&dimCode=tooltip&key=${this.primaryKey}`,
      })
      this.sonContent = res.root[0].CONTENT
    },
  },
}
</script>
