<template>
  <div class="page-swipe">
    <co-drawer :opened="isopen" :direction="direction" :distance="new_distance" :modal="modal=='是'? true : false" @togglemenu="handleToggle">
      <div class="swipe-menu" slot="menu">
        <div class="page-button-group co-pd-a08">
          <co-button size="large">菜单0</co-button>
          <co-button size="large">菜单1</co-button>
          <co-button size="large">菜单2</co-button>
          <co-button size="large">菜单3</co-button>
          <co-button size="large" type="danger" @click="handleToggle(false)">关闭</co-button>
        </div>
      </div>
      <div slot="content">
        <co-header title="Drawer">
          <fallback slot="left"></fallback>
        </co-header>

        <div class="co-wrapper page-swipe-content">
          <co-cell :title="'弹射距离:'+distance" label="0~1之间的小数">
            <select style="width: 80%;" :disabled="isopen" v-model="distance">
              <option v-for="v in 9" :key="v">{{v/10}}</option>
            </select>
          </co-cell>
          <co-radio
            title="抽屉的位置"
            v-model="direction"
            :options="['left', 'right']">
          </co-radio>
          <co-radio
            title="是否添加覆盖层"
            v-model="modal"
            :options="['是','否']">
          </co-radio>
          <co-button size="large" type="success" @click="handleToggle(true)">打开</co-button>
          <div class="page-swipe-banner">
              向{{ swipeDir }}滑动
          </div>
        </div>
      </div>
    </co-drawer>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-swipe-menu',
  data() {
    return {
      isopen: false,
      direction: 'left',
      modal: '是',
      distance: 0.5
    };
  },
  computed: {
    new_distance() {
      return Number(this.distance);
    },
    swipeDir: function() {
      if (this.direction === 'left') {
        return '右';
      } else if (this.direction === 'right') {
        return '左';
      }
    }
  },
  methods: {
    handleToggle(state) {
      this.isopen = state;
    }
  }
};
</script>

<style lang="less">
  .page-swipe{
    .page-swipe-content {
      .co-cell-value {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        position: relative;
      }

      .co-button {
        height: 2.25rem;
        margin-top: .6rem;
      }

      .page-swipe-banner{
        margin-top:20px;
        height: 300px;
        text-align: center;
        background-color: aqua;
      }
    }
  }
</style>
