<template>
  <div class="page">
    <action-bar title="温度" />
    <div class="content">
      <slider class="slider" 
        vertical="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 26" :key="i" class="slider-item">{{i + 15}}</text>
      </slider>
      <text class="temp-unit">℃</text>
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import AC from "./ac.js";
const component = {
  name: "ACTemp",
  components: { ActionBar },
  data() {
    return {
      current: AC.temp - 15
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    change(e) {
      console.log('temp change: ', e.index);
      AC.setTemp(e.index + 15);
    }
  },
};

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;
  font-family: AlibabaSans102-Md;
}
.temp-unit {
  position: absolute;
  font-size: 32px;
  color: white;
  left: 168px;
  top: 95px;
}
</style>
