<template>
  <div class="page-cell">
    <co-header fixed title="Cell Swipe">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="page-content-main co-wrapper">
      <co-cell-swipe :left="[{
        content: '更多',
        style: { background: 'blue', color: '#fff' }
      }]" title="向右滑动">
      </co-cell-swipe>
      <co-cell-swipe :right="rightButtons" title='无效的设置'>
        <co-button size="small" type="primary" slot='title'>可以是按钮</co-button>
        <span>请往左划</span>
        <img slot="icon" src="../assets/100x100.png" width="24" height="24">
      </co-cell-swipe>
    </div>
  </div>
</template>

<script type="es6">
  export default {
    created() {
      var self = this;
      this.rightButtons = [
        {
          content: '可以多个按钮',
          style: { background: 'lightgray', color: '#fff' }
        },
        {
          content: '删除',
          style: { background: 'red', color: '#fff' },
          handler: () => self.$messagebox('delete')
        }
      ];
    },

    methods: {
      leftButtonHandler(evt) {
        console.log(123);
      }
    }
  };
</script>
