<template>
  <d2-container>
    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}tabs`"
          target="_blank"
        >
          <h3>Tabs 标签页</h3>
        </ai-link>
      </header>

      <ai-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <ai-tab-pane
          label="NavMenu 导航菜单 顶栏"
          name="first"
        >
          <section>
            <header>
              <ai-link
                :underline="false"
                :href="`${aiVueUrl}menu#ding-lan`"
                target="_blank"
              >
                <h3>NavMenu 导航菜单</h3>
              </ai-link>
            </header>

            <ai-menu
              :default-active="activeIndex"
              class="ai-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <ai-menu-item index="1">处理中心</ai-menu-item>
              <ai-submenu index="2">
                <template slot="title">我的工作台</template>
                <ai-menu-item index="2-1">选项1</ai-menu-item>
                <ai-menu-item index="2-2">选项2</ai-menu-item>
                <ai-menu-item index="2-3">选项3</ai-menu-item>
                <ai-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <ai-menu-item index="2-4-1">选项1</ai-menu-item>
                  <ai-menu-item index="2-4-2">选项2</ai-menu-item>
                  <ai-menu-item index="2-4-3">选项3</ai-menu-item>
                </ai-submenu>
              </ai-submenu>
              <ai-menu-item
                index="3"
                disabled
              >消息中心</ai-menu-item>
              <ai-menu-item index="4"><a
                  href="https://www.ele.me"
                  target="_blank"
                >订单管理</a></ai-menu-item>
            </ai-menu>
          </section>
        </ai-tab-pane>

        <ai-tab-pane
          label="NavMenu 导航菜单 折叠"
          name="second"
        >
          <section>
            <header>
              <ai-link
                :underline="false"
                :href="`${aiVueUrl}menu#zhe-die`"
                target="_blank"
              >
                <h3>NavMenu 导航菜单</h3>
              </ai-link>
            </header>

            <ai-radio-group
              v-model="isCollapse"
              style="margin-bottom: 20px;"
            >
              <ai-radio-button :label="false">展开</ai-radio-button>
              <ai-radio-button :label="true">收起</ai-radio-button>
            </ai-radio-group>
            <ai-menu
              default-active="1-4-1"
              class="ai-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
            >
              <ai-submenu index="1">
                <template slot="title">
                  <i class="ai-icon-location"></i>
                  <span slot="title">导航一</span>
                </template>
                <ai-menu-item-group>
                  <span slot="title">分组一</span>
                  <ai-menu-item index="1-1">选项1</ai-menu-item>
                  <ai-menu-item index="1-2">选项2</ai-menu-item>
                </ai-menu-item-group>
                <ai-menu-item-group title="分组2">
                  <ai-menu-item index="1-3">选项3</ai-menu-item>
                </ai-menu-item-group>
                <ai-submenu index="1-4">
                  <span slot="title">选项4</span>
                  <ai-menu-item index="1-4-1">选项1</ai-menu-item>
                </ai-submenu>
              </ai-submenu>
              <ai-menu-item index="2">
                <i class="ai-icon-menu"></i>
                <span slot="title">导航二</span>
              </ai-menu-item>
              <ai-menu-item
                index="3"
                disabled
              >
                <i class="ai-icon-document"></i>
                <span slot="title">导航三</span>
              </ai-menu-item>
              <ai-menu-item index="4">
                <i class="ai-icon-setting"></i>
                <span slot="title">导航四</span>
              </ai-menu-item>
            </ai-menu>
          </section>
        </ai-tab-pane>

        <ai-tab-pane
          label="Breadcrumb 面包屑"
          name="third"
        >
          <section>
            <header>
              <ai-link
                :underline="false"
                :href="`${aiVueUrl}breadcrumb`"
                target="_blank"
              >
                <h3>Breadcrumb 面包屑</h3>
              </ai-link>
            </header>

            <div class="breadcrumb-demo">
              <ai-breadcrumb separator="/">
                <ai-breadcrumb-item :to="{ path: '/' }">首页</ai-breadcrumb-item>
                <ai-breadcrumb-item><a href="/">活动管理</a></ai-breadcrumb-item>
                <ai-breadcrumb-item>活动列表</ai-breadcrumb-item>
                <ai-breadcrumb-item>活动详情</ai-breadcrumb-item>
              </ai-breadcrumb>

              <ai-breadcrumb separator-class="ai-icon-arrow-right">
                <ai-breadcrumb-item :to="{ path: '/' }">首页</ai-breadcrumb-item>
                <ai-breadcrumb-item>活动管理</ai-breadcrumb-item>
                <ai-breadcrumb-item>活动列表</ai-breadcrumb-item>
                <ai-breadcrumb-item>活动详情</ai-breadcrumb-item>
              </ai-breadcrumb>
            </div>
          </section>

        </ai-tab-pane>

        <ai-tab-pane
          label="Dropdown 下拉菜单"
          name="fourth"
        >
          <section>
            <header>
              <ai-link
                :underline="false"
                :href="`${aiVueUrl}dropdown`"
                target="_blank"
              >
                <h3>Dropdown 下拉菜单</h3>
              </ai-link>
            </header>

            <div class="dropdown-demo">
              <ai-dropdown>
                <span class="ai-dropdown-link">
                  下拉菜单<i class="ai-icon-arrow-down ai-icon--right"></i>
                </span>
                <ai-dropdown-menu slot="dropdown">
                  <ai-dropdown-item>黄金糕</ai-dropdown-item>
                  <ai-dropdown-item>狮子头</ai-dropdown-item>
                  <ai-dropdown-item>螺蛳粉</ai-dropdown-item>
                  <ai-dropdown-item disabled>双皮奶</ai-dropdown-item>
                  <ai-dropdown-item divided>蚵仔煎</ai-dropdown-item>
                </ai-dropdown-menu>
              </ai-dropdown>

              <ai-dropdown
                split-button
                type="primary"
                @click="splitButtonHandleClick"
              >
                更多菜单
                <ai-dropdown-menu slot="dropdown">
                  <ai-dropdown-item>黄金糕</ai-dropdown-item>
                  <ai-dropdown-item>狮子头</ai-dropdown-item>
                  <ai-dropdown-item>螺蛳粉</ai-dropdown-item>
                  <ai-dropdown-item>双皮奶</ai-dropdown-item>
                  <ai-dropdown-item>蚵仔煎</ai-dropdown-item>
                </ai-dropdown-menu>
              </ai-dropdown>

              <ai-dropdown @command="handleCommand">
                <span class="ai-dropdown-link">
                  下拉菜单<i class="ai-icon-arrow-down ai-icon--right"></i>
                </span>
                <ai-dropdown-menu slot="dropdown">
                  <ai-dropdown-item command="a">黄金糕</ai-dropdown-item>
                  <ai-dropdown-item command="b">狮子头</ai-dropdown-item>
                  <ai-dropdown-item command="c">螺蛳粉</ai-dropdown-item>
                  <ai-dropdown-item
                    command="d"
                    disabled
                  >双皮奶</ai-dropdown-item>
                  <ai-dropdown-item
                    command="e"
                    divided
                  >蚵仔煎</ai-dropdown-item>
                </ai-dropdown-menu>
              </ai-dropdown>
            </div>
          </section>
        </ai-tab-pane>

        <ai-tab-pane
          label="Steps 步骤条"
          name="fifth"
        >
          <section>
            <header>
              <ai-link
                :underline="false"
                :href="`${aiVueUrl}steps`"
                target="_blank"
              >
                <h3>Steps 步骤条</h3>
              </ai-link>
            </header>

            <div class="steps-demo">
              <ai-steps
                :active="2"
                blockchain
              >
                <ai-step
                  title="正常"
                  description="2019-05-28 14:13:34"
                ></ai-step>
                <ai-step
                  title="冲红"
                  description="2019-05-28 15:13:34"
                ></ai-step>
                <ai-step
                  title="报销中"
                  description="2019-05-28 16:13:34"
                ></ai-step>
                <ai-step
                  title="已报销"
                  description="2019-05-28 17:13:34"
                ></ai-step>
              </ai-steps>

              <ai-steps :active="1">
                <ai-step
                  title="步骤 1"
                  description="这是一段很长很长很长的描述性文字"
                ></ai-step>
                <ai-step
                  title="步骤 2"
                  description="这是一段很长很长很长的描述性文字"
                ></ai-step>
                <ai-step
                  title="步骤 3"
                  description="这段就没那么长了"
                ></ai-step>
              </ai-steps>
            </div>

          </section>
        </ai-tab-pane>
      </ai-tabs>
    </article>
  </d2-container>
</template>

<script>
export default {
  name: "Navigation",
  components: {},
  data() {
    return {
      aiVueUrl:
        process.env.VUE_APP_AIVUE_URL + process.env.VUE_APP_AIVUE_PATH,
      // tabs 选中选项卡的 name
      activeName: "second",
      // 当前激活菜单index
      activeIndex: "1",
      // NavMenu 展开
      isCollapse: true
    };
  },
  mounted() {},
  methods: {
    // tab选中触发事件
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // tab菜单激活回调
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // NavMenu 展开指定的 sub-menu
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    // NavMenu 收起指定的 sub-menu
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // split-button 为 true 时，点击左侧按钮的回调
    splitButtonHandleClick() {
      alert("button click");
    },
    // 点击菜单项触发的事件回调
    handleCommand(command) {
      this.$message("click on item " + command);
    }
  }
};
</script>

<style lang="scss" scoped>
.ai-menu-vertical-demo:not(.ai-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.breadcrumb-demo {
  div {
    margin-bottom: 10px;
  }
}
.dropdown-demo {
  display: flex;
  align-items: center;
}
.ai-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.ai-icon-arrow-down {
  font-size: 12px;
}
.ai-dropdown {
  vertical-align: top;
}
.ai-dropdown + .ai-dropdown {
  margin-left: 15px;
}
.ai-icon-arrow-down {
  font-size: 12px;
}
.steps-demo {
  width: 420px;
  div {
    margin-bottom: 10px;
  }
}
</style>
