<template>
  <div>
    <h1>Tag 标签</h1>
    <p class="fbg-text">单页面应用单标签页组件</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseButtonStr">
      <el-tabpage :data="data" @close="handleClose" @change="handleChange"/>
    </demo>
    <h3 class="fbg-title">属性</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>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>close</td>
          <td>关闭事件</td>
          <td>path, dataList, stopEventFun</td>
        </tr>
        <tr>
          <td>change</td>
          <td>切换页面</td>
          <td>path, dataList, stopEventFun</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          title: '客户管理',
          path: '/table',
          icon: 'touxiang',
        },
        {
          id: 2,
          title: '用户列表',
          path: '/form',
          icon: 'touxiang'
        },

      ],
      baseButtonStr: `
      <el-tabpage :data="data" @close="handleClose" @change="handleChange"/>
      <script>
      export default {
        data() {
          return {
            data: [
              {
                id: 1,
                title: '客户管理',
                path: '/table',
                icon: 'touxiang',
                hideClose: true
              },
              {
                id: 2,
                title: '用户列表',
                path: '/form',
                icon: 'touxiang'
              }
            ]
          }
        },
        methods: {
          handleClose(path, data) {
            console.log(path, data);
          },
          handleChange(path, data) {
            console.log(path, data);
          },
        }
      }
      <\/script>
      `
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleClose(path, data) {
      console.log(path, data);
    },
    handleChange(path, data) {
    }
  }
}
</script>