<template>
  <div>
    <h1>Dialog 对话框</h1>
    <p class="fbg-text">在保留当前页面状态的情况下，告知用户并承载相关操作。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseDialogStr">
      <el-button @click="dialogVisible=true">点击</el-button>
      <el-dialog
        title="公告"
        :visible.sync="dialogVisible">
          <p class="fbg-dialog-body">测试内容</p>
      </el-dialog>
    </demo>
    <h3 class="fbg-title">自定义标题栏</h3>
    <demo :code="titleDialogStr">
      <el-button @click="titleDialogVisible=true">点击</el-button>
      <el-dialog
        :visible.sync="titleDialogVisible">
        <p slot="title" style="font-weight: 600;">自定义标题栏</p>
        <p class="fbg-dialog-body">测试内容</p>
      </el-dialog>
    </demo>
    <h3 class="fbg-title">自定义底部工具栏</h3>
    <demo :code="footerDialogStr">
      <el-button @click="footerDialogVisible=true">点击</el-button>
      <el-dialog
        :visible.sync="footerDialogVisible">
        <p slot="title" style="font-weight: 600;">自定义底部工具栏</p>
        <p class="fbg-dialog-body">测试内容</p>
        <div slot="footer">
          <el-button type="primary" @click="footerDialogVisible = false">确 定</el-button>
          <el-button @click="footerDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </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>visible</td>
          <td>是否显示 Dialog，支持 .sync 修饰符</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>title</td>
          <td>Dialog 的标题，也可通过具名 slot （见下表）传入</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>width</td>
          <td>Dialog 的宽度</td>
          <td>String</td>
          <td>--</td>
          <td>50%</td>
        </tr>
        <tr>
          <td>fullscreen</td>
          <td>是否为全屏 Dialog</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>top</td>
          <td>Dialog CSS 中的 margin-top 值</td>
          <td>String</td>
          <td>--</td>
          <td>15vh</td>
        </tr>
        <tr>
          <td>modal</td>
          <td>是否需要遮罩层</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>modal-append-to-body</td>
          <td>遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>append-to-body</td>
          <td>Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>lock-scroll</td>
          <td>是否在 Dialog 出现时将 body 滚动锁定</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>custom-class</td>
          <td>Dialog 的自定义类名</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>close-on-click-modal</td>
          <td>是否可以通过点击 modal 关闭 Dialog</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>close-on-press-escape</td>
          <td>是否可以通过按下 ESC 关闭 Dialog</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>show-close</td>
          <td>是否显示关闭按钮</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>before-close</td>
          <td>关闭前的回调，会暂停 Dialog 的关闭</td>
          <td>function(done)，done 用于关闭 Dialog</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>center</td>
          <td>是否对头部和底部采用居中布局</td>
          <td>String</td>
          <td>true | false</td>
          <td>fals</td>
        </tr>
        <tr>
          <td>destroy-on-close</td>
          <td>关闭时销毁 Dialog 中的元素</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">slot 插槽</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>名称</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>title</td>
          <td>Dialog 标题区的内容</td>
        </tr>
        <tr>
          <td>footer</td>
          <td>Dialog 按钮操作区的内容</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>open</td>
          <td>Dialog 打开的回调</td>
          <td>--</td>
        </tr>
        <tr>
          <td>opened</td>
          <td>Dialog 打开动画结束时的回调</td>
          <td>--</td>
        </tr>
        <tr>
          <td>close</td>
          <td>Dialog 关闭的回调</td>
          <td>--</td>
        </tr>
        <tr>
          <td>closed</td>
          <td>Dialog 关闭动画结束时的回调</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      dialogVisible: false,
      titleDialogVisible: false,
      footerDialogVisible: false,
      baseDialogStr: `
      <el-button @click="dialogVisible=true">点击</el-button>
      <el-dialog
        title="公告"
        :visible.sync="dialogVisible">
          <p class="fbg-dialog-body">测试内容</p>
      </el-dialog>
      <script>
      export default {
        data() {
          return {
            dialogVisible: false
          }
        }
      }
      <\/script>`,
      titleDialogStr: `
      <el-button @click="dialogVisible=true">点击</el-button>
      <el-dialog
        :visible.sync="dialogVisible">
          <p slot="title" style="font-weight: 600;">自定义标题栏</p>
          <p class="fbg-dialog-body">测试内容</p>
      </el-dialog>
      <script>
      export default {
        data() {
          return {
            dialogVisible: false
          }
        }
      }
      <\/script>`,
      footerDialogStr: `
      <el-button @click="dialogVisible=true">点击</el-button>
      <el-dialog
        title="公告"
        :visible.sync="dialogVisible">
          <p slot="title" style="font-weight: 600;">自定义标题栏</p>
          <p class="fbg-dialog-body">测试内容</p>
          <div slot="footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
      </el-dialog>
      <script>
      export default {
        data() {
          return {
            dialogVisible: false
          }
        }
      }
      <\/script>`
    }
  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>