<template>
  <div class='tuitui-button'>
    <div class='item'>
      <div class='title'>尺寸： mini small normal large</div>
      <div class='content'>
        <div class='content-item'>
          <BKButton :size="'mini'" :text="'mini'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'small'" :text="'small'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'normal'" :text="'normal'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'large'" :text="'large'"></BKButton>
        </div>
      </div>
    </div>
    <div class='item'>
      <div class='title'>微信开放能力: openType</div>
      <div class='content'>
        <div class='content-item'>
          <BKButton :text="'分享'" :openType="'share'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton @onGetUserInfo="getuserinfo" :openType="'getUserInfo'" :text="'用户信息'"></BKButton>          
        </div>
        <div class='content-item'>
          <BKButton :openType="'openSetting'" :text="'授权页'"></BKButton>          
        </div>
      </div>
    </div>
    <div class='item'>
      <div class='title'>其他配置：颜色配置，disable, plain</div>
      <div class='content'>
        <div class='content-item'>
          <BKButton :loading='true' :text="'Loading'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'large'" :backgroundColor="'rgba(48,114,246,0.05);'" :textColor="'#3072F6'" :text="'文字背景颜色配置'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'large'" :disable='true' :text="'Disable'"></BKButton>
        </div>
        <div class='content-item'>
          <BKButton :size="'large'" :plain=true :text="'plain'"></BKButton>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BKButton from '@/components/BKButton'
export default {
  components: {
    BKButton
  },
  data () {
    return {}
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKButton 按钮'
    })
  },
  onShareAppMessage () {
    return {
      title: '转发标题',
      path: '/pages/home/main'
    }
  },
  methods: {
    getuserinfo () {
      wx.getUserInfo({
        success: function (res) {
          console.log(res)
        }
      })
    }
  }
}
</script>
<style scoped>
.tuitui-button {
  padding: 40px;
}
.tuitui-button .item {
  padding: 40px 0;
}
.tuitui-button .item  .title{
  padding: 20px 0;
  font-size: 28px;
  font-weight: 600;
  color: #ccc;
}
.tuitui-button .content-item {
  margin-top: 20px;
}

</style>
