<template>
  <div class="dof-music-player">
    <div class="play-top">
      <image class="top-img" :src="moveImg" v-if="_theme !== 'colmo'"></image>
      <dof-iconfont
        v-else-if="_theme == 'colmo'"
        :code="'\u4790'"
        size="50"
        color="rgba(255,255,255,0.8)"
      ></dof-iconfont>
      <div class="top-title" ref="topTitle">
        <dof-marquee
          :width="marqueeWidth"
          :textWidth="marqueeTextWidth"
          height="44px"
          :text="marqueeText"
          :bgColor="themeStyle.marqueeBgColor"
          :textColor="themeStyle.marqueeTextColor"
          :duration="10000"
          :delay="3000"
          v-if="marqueeShowFlag"
        >
        </dof-marquee>
        <text class="top-title-text" v-else>{{ playText }}: {{ title }}</text>
      </div>
      <div class="top-right" v-if="_theme !== 'colmo'">
        <image class="top-img top-img-play" v-if="play" :src="playImg" @click="playHandler('pause')"></image>
        <image class="top-img top-img-play" v-if="!play" :src="pauseImg" @click="playHandler('play')"></image>
        <image class="top-img" :src="nextImg" @click="nextHandler"></image>
      </div>
      <div class="top-right" v-else-if="_theme == 'colmo'">
        <dof-iconfont
          class="top-img-play"
          v-if="play"
          :code="'\u4773'"
          size="50"
          color="rgba(255,255,255,0.8)"
          @dofIconFontClicked="playHandler('pause')"
        ></dof-iconfont>
        <dof-iconfont
          class="top-img-play"
          v-if="!play"
          :code="'\u4770'"
          color="rgba(255,255,255,0.8)"
          size="50"
          @dofIconFontClicked="playHandler('play')"
        ></dof-iconfont>
        <dof-iconfont
          :code="'\u4765'"
          size="50"
          @dofIconFontClicked="nextHandler"
          color="rgba(255,255,255,0.8)"
        ></dof-iconfont>
      </div>
    </div>
    <text ref="titleLen" class="top-title-text title-hidden">{{ playText }}: {{ title }}</text>
    <div class="volume-content">
      <image class="top-img volume-img volume-img-left" :src="volumeLowImg" v-if="_theme !== 'colmo'"></image>
      <dof-iconfont
        class="volume-img volume-img-left"
        v-else-if="_theme == 'colmo'"
        :code="'\u4763'"
        size="64"
        color="rgba(255,255,255,0.8)"
      ></dof-iconfont>
      <dof-slider
        v-model="volume"
        :min="min"
        :max="max"
        :theme="theme"
        :track-height="_trackHeight"
        :track-color="trackColor"
        :bar-color="barColor"
        :button-size="_buttonSize"
        :button-color="buttonColor"
        :readonly="readonly"
        :step="step"
        :gradientBarConfig="_gradientBarConfig"
        @change="sliderChangeHandler"
      ></dof-slider>
      <image class="top-img volume-img volume-img-right" :src="volumeHighImg" v-if="_theme !== 'colmo'"></image>
      <dof-iconfont
        class="volume-img volume-img-right"
        v-else-if="_theme == 'colmo'"
        :code="'\u4791'"
        size="64"
        color="rgba(255,255,255,0.8)"
      ></dof-iconfont>
    </div>
  </div>
</template>

<style>
.dof-music-player {
  padding: 40px 32px;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.04);
  border-radius: 32px;
  background-color: #ffffff;
  position: relative;
}

.title-hidden {
  position: absolute;
  left: 0;
  top: 1000px;
  opacity: 0;
}
.top-img {
  width: 40px;
  height: 40px;
}

.play-top {
  display: flex;
  flex-direction: row;
  margin-bottom: 66px;
}

.top-title {
  flex: 1;
  margin: 0 24px;
  flex-direction: row;
  align-items: center;
}

.top-title-text {
  font-size: 32px;
  color: #1E2E37;
  line-height: 44px;
  white-space: normal;
  word-wrap: nomal;
}

.top-right {
  display: flex;
  flex-direction: row;
}

.top-img-play {
  margin-right: 44px;
}

.volume-content {
  padding: 0 52px;
  position: relative;
  /* background-color: red; */
}

.volume-img {
  position: absolute;
  top: 0;
  /* background-color: green; */
}

.volume-img-left {
  left: 0;
}

.volume-img-right {
  right: 0;
}
</style>
<style src="./colmo.css"></style>
<script>
import DofSlider from '../dof-slider'
import DofMarquee from '../dof-marquee'
const dom = weex.requireModule('dom')
import ColmoMixin from '../../mixins/colmo'
import DofIconfont from '../dof-iconfont'
import { STYLE_MAP } from './style'
export default {
  mixins: [ColmoMixin],
  components: {
    DofSlider,
    DofMarquee,
    DofIconfont
  },
  props: {
    volume: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    play: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'brand'
    },
    trackHeight: {
      type: Number,
      default: undefined
    },
    trackColor: {
      type: String,
      default: '#F2F2F2'
    },
    barColor: {
      type: String,
      default: ''
    },
    buttonSize: {
      type: Number,
      default: undefined
    },
    buttonColor: {
      type: String,
      default: '#ffffff'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    step: {
      type: Number,
      default: 1
    }
  },

  data() {
    return {
      moveImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/music-wave.png',
      playImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/play.png',
      pauseImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/pause.png',
      nextImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/next.png',
      volumeLowImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/volume-low.png',
      volumeHighImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/volume-high.png',
      topTitleWidth: 0,
      titleLenWidth: 0,
      marqueeWidth: '0px',
      marqueeTextWidth: '0px'
    }
  },
  mounted() {
    this.$nextTick(() => {
      let ele1 = this.$refs.topTitle
      let ele2 = this.$refs.titleLen
      this.getEleWidth(ele1, 'topTitle')
      this.getEleWidth(ele2, 'titleLen')
    })
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || 'default'
      console.log('_theme')
      console.log(STYLE_MAP[_theme].marqueeTextColor)

      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    _buttonSize() {
      let tmp = this.buttonSize || this.themeStyle.buttonSize
      return tmp
    },
    _trackHeight() {
      let tmp = this.trackHeight || this.themeStyle.trackHeight
      return tmp
    },
    _gradientBarConfig() {
      return this._theme == 'colmo' ? { start: 'rgba(255,255,255,0)', end: '#fff' } : {}
    },
    playText() {
      return this.play ? '播放中' : '已暂停'
    },
    marqueeText() {
      return this.playText + ': ' + this.title
    },
    marqueeShowFlag() {
      return this.titleLenWidth > this.topTitleWidth ? true : false
    }
  },
  methods: {
    sliderChangeHandler(val) {
      this.$emit('dofVolumeChanged', val)
    },
    playHandler(type) {
      this.play = !this.play
      this.$emit('dofPlayClicked', type)
    },
    nextHandler() {
      this.$emit('dofNextClicked')
    },
    getEleWidth(ele, str) {
      let self = this
      dom.getComponentRect(ele, result => {
        let size = result.size || {}
        let width = parseInt(size.width)
        if (!width) {
          self.getEleWidth(ele, str)
        } else {
          if (str == 'topTitle') {
            self.topTitleWidth = width
            self.marqueeWidth = width + 'px'
            self.marqueeTextWidth = parseInt(width + 400) + 'px'
          } else if (str == 'titleLen') {
            self.titleLenWidth = width
          }
        }
      })
    }
  }
}
</script>
