<template>
  <div>
    <h1>Navbar 导航菜单</h1>
    <p class="fbg-text">为网站提供导航功能的菜单。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseNavbarStr">
      <el-menu :data="data" :shortcutData="shortcutData" :confirm="onConfirm" @selected="handleSelected"/>
    </demo>

    <h3 class="fbg-title">Navbar 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>菜单数据</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>shortcutData</td>
          <td>菜快捷菜单数据</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Form 方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>confirm</td>
          <td>快捷菜单编辑(return false则关闭弹窗、return true;则保持弹窗)</td>
          <td>selectedData</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>selected</td>
          <td>选择</td>
          <td>item, selectedData</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      baseNavbarStr:`
      <el-menu :data="data" :shortcutData="shortcutData" @selected="handleSelected" :confirm="onConfirm"/>
      <script>
      export default {
        data() {
          return {
            data: [
              {
                id: 1,
                label: '客户管理',
                children: [
                  {
                    id: 2,
                    label: '客户管理',
                    icon: 'shoucang1',
                    children: [
                      {
                        id: 3,
                        label: '客户列表',
                        path: '/table'
                      },
                      {
                        id: 4,
                        label: '客户合同',
                        path: '/table'
                      },
                      {
                        id: 5,
                        label: '客户资料',
                        path: '/table'
                      }
                    ]
                  }
                ]
              }
            ],
            shortcutData: [3],
          }
        },
        methods: {
          onConfirm(selectedData) {
            this.shortcutData = selectedData;
            return false;
          },
          handleSelected(data) {

          }
        }
      }
      <\/script>
      `,
      data: [
        {
          id: 1,
          label: '用户管理',
          path: '/table1',
        },
        {
          id: 1,
          label: '角色管理',
          url: '/table1',
          children: [
            {
              id: 2,
              label: '角色权限',
              icon: 'shoucang1',
              path: '/table'
            }
          ]
        },
        {
          id: 1,
          label: '客户管理',
          children: [
            {
              id: 2,
              label: '客户管理',
              icon: 'shoucang1',
              children: [
                {
                  id: 3,
                  label: '客户列表',
                  path: '/table'
                },
                {
                  id: 4,
                  label: '客户合同',
                  path: '/table'
                },
                {
                  id: 5,
                  label: '客户资料',
                  path: '/table'
                }
              ]
            }
          ]
        }
      ],
      shortcutData: [3],
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    onConfirm(selectedData) {
      this.shortcutData = selectedData;
      return false;
    },
    handleSelected(item, data) {
      console.log(data, 99999)
      // this.shortcutData = data;
    }
  }
}
</script>
