<template>
  <div class='tuitui-dialog'>
    <div class="title">点击按钮查看</div>
    <div class='tuitui-dialog-btns'>
      <div><BKButton :text="'基本'" @click="toggleDialog('basic')"></BKButton></div>
      <div><BKButton :text="'二级标题'" @click="toggleDialog('subtitle')"></BKButton></div>
      <div><BKButton :text="'描述'" @click="toggleDialog('message')"></BKButton></div>
      <div><BKButton :text="'图标'" @click="toggleDialog('icon')"></BKButton></div>
      <div><BKButton :text="'多个按钮'" @click="toggleDialog('btns')"></BKButton></div>
      <div><BKButton :text="'完整示例'" @click="toggleDialog('all')"></BKButton></div>
    </div>
    <BKDialog v-bind='dialog' v-if='dialogShow'></BKDialog>
  </div>
</template>
<script>
import BKDialog from '@/components/BKDialog'
import BKButton from '@/components/BKButton'

export default {
  components: {
    BKDialog,
    BKButton
  },
  data () {
    return {
      dialog: {
        title: '一级标题',
        maskClick: () => {
          this.toggleDialog('dialogShow')
        }
      },
      dialogShow: false
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKDialog 对话框弹窗'
    })
  },
  methods: {
    toggleDialog (type) {
      const {dialog} = this
      if (type === 'basic') {
        this.dialog = Object.assign(dialog, {
          subTitle: '',
          message: '',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('dialogShow')
            }
          }]
        })
      }
      if (type === 'subtitle') {
        this.dialog = Object.assign(dialog, {
          subTitle: '二级标题 二级标题 二级标题',
          message: '',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('dialogShow')
            }
          }]
        })
      }

      if (type === 'message') {
        this.dialog = Object.assign(dialog, {
          subTitle: '',
          message: '描述信息 描述信息 描述信息',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('dialogShow')
            }
          }]
        })
      }
      if (type === 'icon') {
        this.dialog = Object.assign(dialog, {
          icon: 'success',
          subTitle: '',
          message: '',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('dialogShow')
            }
          }]
        })
      }
      if (type === 'btns') {
        this.dialog = Object.assign(dialog, {
          icon: 'success',
          subTitle: '',
          message: '',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('btns')
            }
          },
          {
            name: '取消',
            fontColor: 'black',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('btns')
            }
          }]
        })
      }
      if (type === 'all') {
        this.dialog = Object.assign(dialog, {
          icon: 'success',
          subTitle: '二级标题 二级标题 二级标题',
          message: '描述信息 描述信息 描述信息 描述信息 描述信息 描述信息',
          btns: [{
            name: '确定',
            fontColor: 'blue',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('btns')
            }
          },
          {
            name: '取消',
            fontColor: 'black',
            bgColor: 'white',
            fn: () => {
              this.toggleDialog('btns')
            }
          }]
        })
      }
      this.dialogShow = !this.dialogShow
    }
  }
}
</script>
<style scoped>
.tuitui-dialog .tuitui-dialog-btns {
  margin: 40px;
  display: flex;
  flex-direction: column;
}
.tuitui-dialog .tuitui-dialog-btns > div {
  margin-top: 60px;
}
.title {
  margin: 40px;
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
</style>
