<template>
  <div class="page">
    <action-bar title="风量" />
    <div class="content">
      <slider class="slider" 
        vertical="true" 
        infinite="true"
        :index="current"
        @change="change"
        enableAcceleration="true"
        previousMargin="85px" 
        nextMargin="85px"
        edgeFadingTop="100px"
        edgeFadingBottom="100px"
        edgeFadingColor="black"
        scaleFactor="0.63">
        <text v-for="(item, i) in items" :key="i" class="slider-item">{{item}}</text>
      </slider>
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import AC from "./ac.js";
const component = {
  name: "ACWind",
  components: { ActionBar },
  data() {
    return {
      current: AC.wind,
      items: [
        AC.formatWind(0),
        AC.formatWind(1),
        AC.formatWind(2),
      ]
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    change(e) {
      console.log('wind change: ', e.index);
      AC.setWind(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 {
  font-size: 84px;
  color: white;
  text-align: center;
  line-height: 90px;
}
</style>
