<template>
  <div class="demo-tooltip-disabled">
    <div class="demo-box">
      <span>是否禁止显示面板: </span>
      <ui-tooltip
        :disabled="disabled"
        :offset="10"
        trigger="click"
        content="这是一个可以被disabled的tooltip"
        placement="top-start">
        <ui-button :type="disabled ? 'danger' : 'primary' ">
          点击一下
        </ui-button>
      </ui-tooltip>

      <ui-button
        style="margin-left: 10px;"
        size="small"
        @click="switchHandler('disabled')">
        切换到{{ disabled ? '非禁止状态': '禁止状态' }}
      </ui-button>
    </div>

    <div class="demo-box">
      <span>面板是否带有隐藏功能: </span>
      <ui-tooltip
        :offset="10"
        :disabled-outside="disabledOutside"
        trigger="click"
        content="这是一个可以被disabled的tooltip"
        placement="top-start">
        <ui-button :type="disabledOutside ? 'danger' : 'primary' ">
          点击一下
        </ui-button>
      </ui-tooltip>

      <ui-button
        style="margin-left: 10px;"
        size="small"
        @click="switchHandler('disabledOutside')">
        切换到{{ disabledOutside ? '非禁止状态' : '禁止状态' }}
      </ui-button>
    </div>

    <div class="demo-box">
      <span>按钮禁止状态: </span>
      <ui-tooltip
        :disabled-outside="disabledOutside"
        trigger="hover"
        content="按钮禁止状态"
        placement="top-start">
        <ui-button
          :disabled="disabledButton"
          type="primary">
          hover
        </ui-button>
      </ui-tooltip>

      <ui-button
        style="margin-left: 10px;"
        size="small"
        @click="switchHandler('disabledButton')">
        切换到{{ disabledButton ? '非禁止状态': '禁止状态' }}
      </ui-button>
    </div>
  </div>
</template>
<script>
import { Tooltip, Button } from "amumu-ui"
export default {
  components: {
    "ui-tooltip": Tooltip,
    "ui-button": Button,
  },
  data() {
    return {
      disabled: false,
      disabledOutside: false,
      disabledButton: false,
    }
  },
  methods: {
    switchHandler(field) {
      this[field] = !this[field]
    },
  },
}
</script>
<style lang="scss">
.top {
  text-align: center;
}

.left {
  float: left;
  width: 85px;
}

.right {
  float: right;
  width: 85px;
}

.bottom {
  clear: both;
  text-align: center;
}

.item {
  margin: 4px;
}

.left .ui-tooltip-popper,
.right .ui-tooltip-popper {
  padding: 8px 10px;
}
</style>
