<template>
  <div class="page">
    <image style="width:240px;height:320px" :src="backgroundImage[this.pictureIndex]"></image>
    <img class="back" :src="require('./images/icon-back.png')" @click="back" />
    <text class="title" @click="back">音乐</text>
    <text class="center-text">{{ musicText }}</text>
    <text class="below-text">{{ authorText }}</text>
    <img class="last-icon" resize="contain" :src="require('./images/last.png')" @click="lastMusicClick"/>
    <img class="play-icon" resize="contain" :src="playOrPausePictures[this.playOrPauseFlag]" @click="playOrPauseClick"/>
    <img class="next-icon" resize="contain" :src="require('./images/next.png')" @click="nextMusicClick"/>
  </div>
</template>

<script>
const MUSICS = ["Easy Love", "Early to Bed", "Freedom"];
const AUTHORS = ["Sigala", "Morphine", "Anthony Hamilton"];

import ActionBar from "../../components/action-bar.vue";

const component = {
  name: "music",
  components: { ActionBar },
  data() {
    return {
      musicIndex: 0,
      authorIndex: 0,
      pictureIndex: 0,
      backgroundImageIndex: 0,
      playOrPauseFlag: 0,
      playOrPausePictures: [require("./images/play.png"), require("./images/pause.png")],
      musicPictures: [require("./images/music.png"), require("./images/music1.png"), require("./images/music2.png")],
      backgroundImage: [require("./images/music-bg.png"), require("./images/music-bg1.png"), require("./images/music-bg2.png")],
    };
  },
  computed: {
    musicText() {
      let music = MUSICS[this.musicIndex];
      return `${music}`;
    },
    authorText() {
      let author = AUTHORS[this.authorIndex];
      return `${author}`;
    },
  },
  methods: {
    back(e) {
      if (/*外面监听back事件*/0) {
        this.$emit('back');
      } else {
        this.$page.finish();
      }
    },
    playOrPauseClick() {
      if (this.playOrPauseFlag == 0) {
        this.playOrPauseFlag = 1;
      } else {
        this.playOrPauseFlag = 0;
      }
    },
    nextMusicClick() {
      if (this.musicIndex == 2) {
        this.musicIndex = 0;
      } else {
        this.musicIndex = this.musicIndex + 1;
      }
      if (this.authorIndex == 2) {
        this.authorIndex = 0;
      } else {
        this.authorIndex = this.authorIndex + 1;
      }
      if (this.pictureIndex == 2) {
        this.pictureIndex = 0;
      } else {
        this.pictureIndex = this.pictureIndex + 1;
      }
      if (this.backgroundImageIndex == 2) {
        this.backgroundImageIndex = 0;
      } else {
        this.backgroundImageIndex = this.backgroundImageIndex + 1;
      }
    },
    lastMusicClick() {
      if (this.musicIndex == 0) {
        this.musicIndex = 2;
      } else {
        this.musicIndex = this.musicIndex - 1;
      }
      if (this.authorIndex == 0) {
        this.authorIndex = 2;
      } else {
        this.authorIndex = this.authorIndex - 1;
      }
      if (this.pictureIndex == 0) {
        this.pictureIndex = 2;
      } else {
        this.pictureIndex = this.pictureIndex - 1;
      }
      if (this.backgroundImageIndex == 0) {
        this.backgroundImageIndex = 2;
      } else {
        this.backgroundImageIndex = this.backgroundImageIndex - 1;
      }
    },
    back(e) {
      if (/*外面监听back事件*/0) {
        this.$emit('back');
      } else {
        this.$page.finish();
      }
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.back {
  width: 13px;
  height: 23px;
  left: 10px;
  top: 17px;
  position: absolute;
}
.title {
  left: 36px;
  top: 12px;
  position: absolute;
  color: white;
  font-size: 24px;
  text-overflow: ellipsis;
}
.center-text {
  align-items: center;
  line-height: 28px;
  text-align: center;
  top: 87px;
  color:#ffffff;
  font-size:28px;
  align-self: center;
  position: absolute;
}
.below-text{
  align-items: center;
  line-height: 22px;
  position: absolute;
  font-size: 20px;
  text-align: center;
  align-self: center;
  color: #FFFFFF;
  top: 126px;
}
.last-icon {
  position: absolute;
  text-align: center;
  left: 27px;
  top: 221px;
  width: 38px;
  height: 35px;
  align-self: center;
}
.play-icon {
  position: absolute;
  left: 93px;
  top: 211px;
  width: 54px;
  height: 54px;
  align-self: center;
}
.next-icon {
  position: absolute;
  left: 175px;
  top: 221px;
  width: 38px;
  height: 35px;
  align-self: center;
}
</style>
