<template >
  <div>
    <h1>常用于主动操作后的反馈提示。</h1>
    <p class="fbg-text">由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</p>
    <h3 class="fbg-title">提示框</h3>
    <demo :code="baseMessageStr">
      <el-button @click="handleOpenMessage">点击打开提示信息</el-button>
    </demo>
    <h3 class="fbg-title">单独使用提示框</h3>
    <demo :code="aloneMessageStr">
      <el-button @click="handleAloneOpenMessage">点击打开提示信息</el-button>
    </demo>
     <h3 class="fbg-title">警报提示框</h3>
    <demo :code="baseAlertStr">
      <el-button @click="handleOpenAlert">点击打开警报提示框</el-button>
    </demo>
     <h3 class="fbg-title">询问框</h3>
    <demo :code="baseConfirmStr">
      <el-button @click="handleOpenConfirm">点击打开询问信息</el-button>
    </demo>
    <h3 class="fbg-title">询问框插槽用法</h3>
    <demo :code="slotConfirmStr">
      <el-button @click="handleOpenSlotConfirm">点击打开询问信息</el-button>
    </demo>
     <h3 class="fbg-title">单独使用询问框</h3>
    <demo :code="aloneConfirmStr">
      <el-button @click="handleAloneOpenConfirm">点击打开询问窗口</el-button>
    </demo>
    <h3 class="fbg-title">Message 属性</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</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>duration</td>
          <td>显示时间（单位：毫秒）</td>
          <td>Number</td>
          <td>--</td>
          <td>2000</td>
        </tr>
        <tr>
          <td>slotRender</td>
          <td>默认插槽渲染</td>
          <td>Function</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">MessageBox 询问框</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>title</td>
          <td>标题</td>
          <td>String</td>
          <td>--</td>
          <td>--</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>modal</td>
          <td>是否显示遮罩</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>showClose</td>
          <td>是否显示关闭按钮</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>showFooter</td>
          <td>是否显示底部工具栏</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>cancelButtonText</td>
          <td>取消按钮文本</td>
          <td>String</td>
          <td>--</td>
          <td>取消</td>
        </tr>
        <tr>
          <td>confirmButtonText</td>
          <td>提交按钮文本</td>
          <td>String</td>
          <td>--</td>
          <td>确认</td>
        </tr>
        <tr>
          <td>dangerouslyUseHTMLString</td>
          <td>允许title与content内容使用html标签</td>
          <td>Boolean</td>
          <td>true｜false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>showCancelButton</td>
          <td>是否显示取消按钮</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>showConfirmButton</td>
          <td>是否显示确认按钮</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>closeOnClickModal</td>
          <td>点击遮罩是否关闭询问框</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>closeOnPressEscape</td>
          <td>是否可通过按下 ESC 键关闭	</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>contentSlotRender</td>
          <td>内容插槽渲染</td>
          <td>Function</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>messageSlotRender</td>
          <td>标题插槽渲染</td>
          <td>Function</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import {msgbox, message} from '../../index';
import hljs from '../util/highlight';
export default {
  data() {
    return {
      baseMessageStr: `
        <el-button @click="handleOpenMessage">点击打开提示信息</el-button>
        <script>
        export default {
          methods: {
            handleOpenMessage() {
              this.$message({
                type: 'warning',
                message: '错误信息！',
                slotRender: (h) => {
                  return h('a', {
                    attrs: {
                      href: 'javascript:'
                    },
                    on: {
                      click: () => {
                        console.log(3333)
                      }
                    }
                  }, '撤销');
                }
              });
            }
          }
        }
        <\/script>
      `,
      aloneMessageStr: `
        <el-button @click="handleOpenMessage">点击打开提示信息</el-button>
        <script>
        import {message} from 'fbg-ui';
        export default {
          methods: {
            handleOpenMessage() {
              message({
                type: 'warning',
                message: '错误信息！'
              });
            }
          }
        }
        <\/script>
      `,
      baseAlertStr: `
        <el-button @click="handleOpenAlert">点击打开提示信息</el-button>
        <script>
        export default {
          methods: {
            async handleOpenAlert() {
              try {
                await this.$alert({
                  type: 'success',
                  message: '错误信息！'
                });   
              } catch (e) {
                console.log(e)
              }
            }
          }
        }
        <\/script>
      `,
      baseConfirmStr: `
        <el-button @click="handleOpenConfirm">点击打开询问信息</el-button>
        <script>
        export default {
          methods: {
            async handleOpenConfirm() {
              try {
                await this.$confirm({
                  message: '错误信息！',
                  content: '删除之后无法恢复，请谨慎操作！'
                });   
              } catch (e) {
                console.log(e)
              }
            }
          }
        }
        <\/script>
      `,
      slotConfirmStr: `
        <el-button @click="handleOpenSlotConfirm">点击打开询问信息</el-button>
        <script>
        export default {
          methods: {
            async handleOpenSlotConfirm() {
              try {
                await this.$confirm({
                  type: 'success',
                  messageSlotRender: (h) => {
                    return h('h4', {}, '标题');
                  },
                  contentSlotRender: (h) => {
                    return h('span', {}, [
                      h('span', {}, '测试内容'),
                      h('a', { attrs: {href: 'javascript:'}}, '点击跳转')
                    ]);
                  }
                });   
              } catch (e) {
                console.log(e)
              }
            },
          }
        }
        <\/script>
      `,
      aloneConfirmStr: `
        <el-button @click="handleOpenConfirm">点击打开询问窗口</el-button>
        <script>
        import {msgbox} from 'fbg-ui';
        export default {
          methods: {
            async handleOpenConfirm() {
              try {
                await msgbox({
                  message: '错误信息！',
                  content: '删除之后无法恢复，请谨慎操作！'
                });   
              } catch (e) {
                console.log(e)
              }
            }
          }
        }
        <\/script>
      `
    };
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleOpenMessage() {
      this.$message({
        type: 'warning',
        message: '错误信息！',
        slotRender: (h) => {
          return h('a', {
            attrs: {
              href: 'javascript:'
            },
            on: {
              click: () => {
                console.log(3333)
              }
            }
          }, '撤销');
        }
      });
    },
    handleAloneOpenMessage() {
      message({
        type: 'warning',
        message: '错误信息！'
      });
    },
    async handleOpenConfirm() {
      try {
        await this.$confirm({
          message: '错误信息！',
          content: '删除之后无法恢复，请谨慎操作！'
        });   
      } catch (e) {
        console.log(e)
      }
    },
    async handleOpenAlert() {
      try {
        await this.$alert({
          type: 'success',
          message: '错误信息！'
        });   
      } catch (e) {
        console.log(e)
      }
    },
    async handleOpenSlotConfirm() {
      try {
        await this.$confirm({
          type: 'success',
          messageSlotRender: (h) => {
            return h('h4', {}, '标题')
          },
          contentSlotRender: (h) => {
            return h('span', {
            }, [
              h('span', {}, '测试内容'),
              h('a', { attrs: {href: 'javascript:'}}, '点击跳转')
            ]);
          }
        });   
      } catch (e) {
        console.log(e)
      }
    },
    async handleAloneOpenConfirm() {
      try {
        await msgbox({
          message: '错误信息！',
          content: '删除之后无法恢复，请谨慎操作！'
        });   
      } catch (e) {
        console.log(e)
      }

    }
  }
}
</script>
<style lang="scss" scoped>

</style>