<template>
  <div class="page">
    <action-bar title="音乐" />
    <image style="width:84px;height:84px" class="picture" :src="musicPictures[this.pictureIndex]"></image>
    <text class="center-text">{{ musicText }}</text>
    <text class="below-text">{{ authorText }}</text>
    <div class="player">
        <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>
    </div>
</template>

<script>
const MUSICS = ["Crushing Days", "Easy Love", "Early to Bed"];
const AUTHORS = ["joe satriani", "Sigala", "Morphine"];

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

const component = {
  name: "music",
  components: { ActionBar },
  data() {
    return {
      musicIndex: 0,
      authorIndex: 0,
      pictureIndex: 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")],
    };
  },
  computed: {
    musicText() {
      let music = MUSICS[this.musicIndex];
      return `${music}`;
    },
    authorText() {
      let author = AUTHORS[this.authorIndex];
      return `${author}`;
    },
  },
  methods: {
    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;
      }
    },
    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;
      }
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.picture {
  margin-top: 2px;
}
.center-text {
  color:#ffffff;
  font-size:20px;
  align-self: center;
  margin-top: 12px;
}
.below-text{
  opacity: 0.6;
  font-size: 18px;
  color: #FFFFFF;
  margin-top: 2px;
}
.player {
  flex-direction: row;
  margin-top: 27px;
}
.last-icon {
  width: 32px;
  height: 29px;
  margin-right: 38px;
  align-self: center;
}
.play-icon {
  width: 41px;
  height: 42px;
  align-self: center;
}
.next-icon {
  width: 32px;
  height: 29px;
  margin-left: 37px;
  align-self: center;
}
</style>
