<template>
  <div class="demo-dropdown-complex">
    <ui-dropdown
      button
      :track-ref-width="false"
      popper-class="demo-dropdown-popper">
      下拉菜单
      <template
        slot="dropdown"
        slot-scope="scopeDropdown">
        <ui-dropdown-item
          title="不同类型"
          @click="handleFe">
          <span>小满前端</span>
          <span slot="right">
            <ui-icon
              name="check"
              size="14px"
              style="color: #00b0ff"></ui-icon>
          </span>
        </ui-dropdown-item>
        <ui-dropdown-item disabled>
          小满后端(selected)
        </ui-dropdown-item>
        <ui-dropdown-item
          v-if="!hideTest"
          :hide-on-click="false"
          show-on-hover>
          <span
            slot="left"
            slot-scope="prop">
            小满测试({{ prop.active ? 'active' : 'hover' }})
          </span>
          <span
            slot="right"
            slot-scope="prop">
            <ui-popconfirm
              :on-visible-change="prop.setActive"
              title="你确定删除吗?"
              @confirm="handleConfirm">
              <ui-icon
                name="close"
                size="14px"
                style="color: #00b0ff"></ui-icon>
            </ui-popconfirm>
          </span>
        </ui-dropdown-item>
        <ui-dropdown-item
          :hide-on-click="false"
          show-on-hover>
          <span
            slot="left">
            小满产品
          </span>
          <span
            slot="right">
            <ui-popconfirm
              title="你确定关闭菜单吗?"
              @confirm="closeMenuConfirm(scopeDropdown.action)">
              <ui-icon
                name="close"
                size="14px"
                style="color: #00b0ff"></ui-icon>
            </ui-popconfirm>
          </span>
        </ui-dropdown-item>
        <ui-dropdown
          :hide-on-click="false"
          placement="right-start"
          popper-class="demo-dropdown-popper"
          @click="handleClick">
          <template slot-scope="prop">
            <ui-dropdown-item
              :selected="prop.visible"
              show-arrow
              divider>
              多层级
            </ui-dropdown-item>
          </template>

          <template slot="dropdown">
            <ui-dropdown-item>第二层</ui-dropdown-item>
            <ui-dropdown-item divider>
              第二层
            </ui-dropdown-item>
            <ui-dropdown-item>第二层</ui-dropdown-item>
            <ui-dropdown-item>第二层</ui-dropdown-item>
            <ui-dropdown
              hide-on-click
              placement="right-start"
              popper-class="demo-dropdown-popper">
              <template slot-scope="prop">
                <ui-dropdown-item
                  :selected="prop.visible"
                  show-arrow
                  divider>
                  多层级二
                </ui-dropdown-item>
              </template>

              <template
                slot="dropdown"
                slot-scope="scopeThirdDropdown">
                <ui-dropdown-item>第三层</ui-dropdown-item>
                <ui-dropdown-item divider>
                  第三层
                </ui-dropdown-item>
                <ui-dropdown-item>第三层</ui-dropdown-item>
                <ui-dropdown-item>第三层</ui-dropdown-item>
                <ui-dropdown-item
                  :hide-on-click="false"
                  show-on-hover>
                  <span
                    slot="left">
                    小满产品
                  </span>
                  <span
                    slot="right">
                    <ui-popconfirm
                      title="你确定关闭这层菜单吗?"
                      @confirm="() => scopeThirdDropdown.action.hide()">
                      <ui-icon
                        name="close"
                        size="14px"
                        style="color: #00b0ff"></ui-icon>
                    </ui-popconfirm>
                  </span>
                </ui-dropdown-item>
              </template>
            </ui-dropdown>
          </template>
        </ui-dropdown>
      </template>
    </ui-dropdown>
  </div>
</template>

<script>
import { Dropdown, DropdownItem, Icon, Popconfirm } from "amumu-ui"
import { message } from "amumu-ui/src/factory"

export default {
  components: {
    "ui-dropdown": Dropdown,
    "ui-dropdown-item": DropdownItem,
    "ui-icon": Icon,
    "ui-popconfirm": Popconfirm,
  },
  data() {
    return {
      hideTest: false,
    }
  },
  methods: {
    handleConfirm() {
      this.hideTest = true
    },
    closeMenuConfirm(action) {
      action.hide()
      const vmMessage = message.loading("1s后重新打开菜单...")
      setTimeout(() => {
        vmMessage.close()
        action.show()
      }, 1000)
    },
    handleFe(event, name) {
      console.log("event", event, name)
    },
    handleClick(event, name) {
      console.log("event", event, name)
    },
  },
}
</script>
<style lang="scss">
.demo-dropdown-popper {
  width: 160px;
}
</style>
