<template>
  <bz-page-wrapper title="Basic组件" content="偶尔会用到的基础组件">
    <a-row :gutter="[20, 20]">
      <a-col :span="7">
        <a-card title="BzTitle 示例">
          <div class="my-16">
            <h3> 显示帮助文字</h3>
            <bz-title helpMessage="这里是帮助一下"> 我是标题 </bz-title>
          </div>
          <div class="my-16">
            <h3> 显示蓝色方块</h3>
            <bz-title :span="true"> 我是标题 </bz-title>
          </div>
          <div class="my-16">
            <h3> 文字不加粗</h3>
            <bz-title :normal="true"> 文字不加粗 </bz-title>
          </div>
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card title="BzHelp 示例">
          <div class="my-16">
            <h3> 文字列表</h3>
            <bz-help :text="['我是帮助文字', '我是帮助文字', '我是帮助文字']"> </bz-help>
          </div>
          <div class="my-16">
            <h3> 显示方向</h3>
            <bz-help :text="['我是帮助文字', '我是帮助文字', '我是帮助文字']" placement="top">
            </bz-help>
          </div>
          <div class="my-16">
            <h3> 显示序号</h3>
            <bz-help :text="['我是帮助文字', '我是帮助文字', '我是帮助文字']" :showIndex="true">
            </bz-help>
          </div>
        </a-card>
      </a-col>
      <a-col :span="7">
        <a-card title="BzArrow 示例" style="height: 300px">
          <div class="my-16">
            <h3> 展开/关闭 <bz-button @click="expand = !expand"> 点击切换状态</bz-button></h3>

            <bz-arrow :expand="expand"> </bz-arrow>
          </div>

          <div class="my-16">
            <h3> 方向</h3>
            <bz-arrow down class="mr-8"> </bz-arrow>
            <bz-arrow up> </bz-arrow>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </bz-page-wrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Card, Row, Col } from 'ant-design-vue';
  export default defineComponent({
    components: { ACard: Card, ARow: Row, ACol: Col },
    data() {
      return {
        expand: false,
      };
    },
  });
</script>
