<template>
  <div class="page-switch">
    <co-header fixed title="Switch">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-part page-switch-padding page-content-main co-mg-tb06">
        <co-switch v-model="value1" @change="handleChange">
          <label v-text="value1"></label>
        </co-switch>
      </div>

      <div class="page-part page-switch-padding co-mg-tb06">
        <co-switch v-model="value4" @change="handleChange">
          <label v-text="value4"></label>
        </co-switch>
      </div>

      <co-cell :title="'选项 ' + value2">
        <co-switch v-model="value2" @change="handleChange"></co-switch>
      </co-cell>
      <co-cell :title="'选项 ' + value3">
        <co-switch v-model="value3" @change="handleChange"></co-switch>
      </co-cell>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-switch',

  data() {
    return {
      value1: false,
      value2: false,
      value3: true,
      value4: true
    };
  },

  methods: {
    handleChange(event) {
      console.log(event);
    }
  }
};
</script>

<style lang="css">
  .page-switch-padding {
    padding: 0 10px;
  }
</style>
