<template>
  <div class="page">
    <action-bar title="模式" />
    <div class="content">
      <slider class="slider" 
        vertical="true" 
        infinite="true"
        :index="current"
        @change="change"
        enableAcceleration="true"
        previousMargin="88px" 
        nextMargin="88px"
        edgeFadingTop="100px"
        edgeFadingBottom="100px"
        edgeFadingColor="black"
        scaleFactor="0.63">
        <image v-for="(item, i) in items" :key="i" class="slider-item" :src="item" resize="center" />
      </slider>
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import AC from "./ac.js";
const component = {
  name: "ACMode",
  components: { ActionBar },
  data() {
    return {
      current: AC.mode,
      items: [
        require('./images/icon-mode-wet.png'),
        require('./images/icon-mode-cold.png'),
        require('./images/icon-mode-hot.png'),
        require('./images/icon-mode-wind.png'),
      ]
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    change(e) {
      console.log('mode change: ', e.index);
      AC.setMode(e.index);
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.content {
  flex: 1;
  width: 100%;
  align-items: center;
}
.slider {
  width: 100px;
  height: 260px;
}
.slider-item {
}
</style>
