<template>
  <div class='tuitui-action-sheet'>
    <div class="title">点击按钮查看</div>
    <div class='tuitui-action-btn-wrap'>
      <div><BKButton @click="openActionSheet('pActionSheet1')" :text="'基本'"></BKButton></div>
      <div><BKButton @click="openActionSheet('pActionSheet2')" :text="'带标题'"></BKButton></div>
      <div><BKButton @click="openActionSheet('pActionSheet3')" :text="'带描述'"></BKButton></div>
      <div><BKButton @click="openActionSheet('pActionSheet4')" :text="'取消按钮'"></BKButton></div>
      <div><BKButton @click="openActionSheet('pActionSheet5')" :text="'取消文案'"></BKButton></div>
    </div>
    <BKActionSheet
      ref="pActionSheet1"
      :buttonData="pActionSheetButtonData"
      @click="actionSheetClick"
    >
    </BKActionSheet>
    <BKActionSheet
      ref="pActionSheet2"
      :des="'我是描述'"
      :title="'我是标题'"
      :buttonData="pActionSheetButtonData2"
      @click="actionSheetClick"
    >
    </BKActionSheet>

    <BKActionSheet
      ref="pActionSheet3"
      :buttonData="pActionSheetButtonData3"
      @click="actionSheetClick"
    >
    </BKActionSheet>

    <BKActionSheet
      ref="pActionSheet4"
      :buttonData="pActionSheetButtonData4"
      @click="actionSheetClick"
      :showCancel='false'
    >
    </BKActionSheet>
    <BKActionSheet
      ref="pActionSheet5"
      :buttonData="pActionSheetButtonData3"
      @click="actionSheetClick"
      :cancelText="'隐藏'"
    >
    </BKActionSheet>
  </div>
</template>
<script>
import BKActionSheet from '@/components/BKActionSheet'
import BKButton from '@/components/BKButton'
const pActionSheetButtonData = [
  {
    text: '警告',
    backgroundColor: 'white',
    textColor: '#FA5741'
  },
  {
    text: '按钮一',
    backgroundColor: 'white',
    textColor: '#222'
  },
  {
    text: '按钮二',
    backgroundColor: 'white',
    textColor: '#222'
  }
]
const pActionSheetButtonData2 = [
  {
    text: '按钮一',
    backgroundColor: 'white',
    textColor: '#222'
  },
  {
    text: '按钮二',
    backgroundColor: 'white',
    textColor: '#222'
  }
]
const pActionSheetButtonData3 = [
  {
    text: '警告',
    backgroundColor: 'white',
    textColor: '#FA5741'
  },
  {
    text: '按钮一',
    desc: '描述',
    backgroundColor: 'white',
    textColor: '#222'
  },
  {
    text: '按钮二',
    backgroundColor: 'white',
    textColor: '#222'
  }
]
const pActionSheetButtonData4 = [
  {
    text: '警告',
    backgroundColor: 'white',
    textColor: '#FA5741'
  }
]
export default {
  components: {
    BKActionSheet,
    BKButton
  },
  data () {
    return {
      pActionSheetButtonData,
      pActionSheetButtonData2,
      pActionSheetButtonData3,
      pActionSheetButtonData4
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKActionSheet 上拉菜单'
    })
  },
  methods: {
    actionSheetClick (val, index) {
      console.log(val, index)
    },
    openActionSheet (name) {
      this.$refs[name].swtichActionSheet()
    }
  }
}
</script>
<style scoped>
.tuitui-action-sheet .tuitui-action-btn-wrap {
  margin: 40px;
  display: flex;
  flex-direction: column;
}
.tuitui-action-sheet .tuitui-action-btn-wrap > div {
  margin-top: 60px;
}
.title {
  margin: 40px;
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
</style>
