<template>
  <div class="page-actionsheet">
    <co-header fixed title="Action Sheet">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell title="点击上拉 action sheet" @click.native="sheetVisible = true"></co-cell>
      <co-cell title="不带取消按钮的 action sheet" @click.native="sheetVisible2 = true"></co-cell>
    </div>
    <co-actionsheet :actions="actions" v-model="sheetVisible"></co-actionsheet>
    <co-actionsheet :actions="actions2" v-model="sheetVisible2" cancel-text=""></co-actionsheet>
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        sheetVisible: false,
        sheetVisible2: false,
        actions: [],
        actions2: []
      };
    },

    methods: {
      takePhoto() {
        console.log('taking photo');
      },

      openAlbum() {
        console.log('opening album');
      },

      goBack() {
        history.go(-1);
      }
    },

    mounted() {
      this.actions = [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }];
      this.actions2 = [{
        name: '确定'
      }, {
        name: '返回上一步',
        method: this.goBack
      }];
    }
  };
</script>
