<template>
  <div>
    <h1>提示类</h1>
    <p class="fbg-text">常用的提示类。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseAlertStr">
      <el-alert class="marigin-bottom10" title="成功类" />
      <el-alert type="error" class="marigin-bottom10" title="错误类" />
      <el-alert type="warning" class="marigin-bottom10" title="警告类" />
      <el-alert type="info" class="marigin-bottom10" title="通用类" />
    </demo>
    <h3 class="fbg-title">带说明文字</h3>
    <demo :code="discriptionAlertStr">
      <el-alert type="info" class="marigin-bottom10" title="通用类" description="带说明文字带提示类"/>
    </demo>
    <h3 class="fbg-title">具有关闭按钮</h3>
    <demo :code="closeAlertStr">
      <el-alert type="info" class="marigin-bottom10" title="通用类" closable @close="handleClose" />
      <el-alert type="info" class="marigin-bottom10" title="通用类" closable close-text="知道了" />
    </demo>
    <h3 class="fbg-title">插槽的使用</h3>
    <demo :code="slotAlertStr">
      <el-alert type="info" class="marigin-bottom10" closable >
        <span slot="title">slot通用类</span>
        <span slot="description">slot说明</span>
        <span slot="close"><i class="fbg-icon-check" /></span>
      </el-alert>
    </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>type</td>
          <td>提示类型</td>
          <td>string</td>
          <td>success | warning | error | info</td>
          <td>success</td>
        </tr>
        <tr>
          <td>message</td>
          <td>提示内容</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>content</td>
          <td>说明内容</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>closable</td>
          <td>按钮</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>close-text</td>
          <td>按钮</td>
          <td>String</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>--</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>title</td>
          <td>标题</td>
          <td>--</td>
        </tr>
        <tr>
          <td>description</td>
          <td>说明</td>
          <td>--</td>
        </tr>
        <tr>
          <td>close</td>
          <td>关闭按钮</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      loading: true,
      baseAlertStr: `
      <el-alert class="marigin-bottom10" title="成功类" />
      <el-alert type="error" class="marigin-bottom10" title="错误类" />
      <el-alert type="warning" class="marigin-bottom10" title="警告类" />
      <el-alert type="info" class="marigin-bottom10" title="通用类" />`,
      discriptionAlertStr: `
      <el-alert type="info" class="marigin-bottom10" title="通用类" description="带说明文字带提示类" />`,
      closeAlertStr: `
      <template>
        <el-alert type="info" class="marigin-bottom10" title="通用类" closable @close="handleClose" closable />
      </template>
      <script>
        export default {
          data() {
            return {};
          },
          methods: {
            handleClose() {
              alert('点击关闭');
            }
          }
        }
      <\/script>
      `,
      slotAlertStr: `      
      <el-alert type="info" class="marigin-bottom10" closable >
        <span slot="title">slot通用类</span>
        <span slot="description">slot说明</span>
        <span slot="close"><i class="fbg-icon-check" /></span>
      </el-alert>`,
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleClose() {
      alert('点击关闭');
    }
  }
}
</script>
<style lang="scss" scoped>
.marigin-bottom10 {
  margin-bottom: 10px;
}
</style>