<template>
  <div class="c-banner">
    <div class="cover">
      <div class="title">多平台内容管理工具</div>
      <div class="desc">
        <p>通过连接内容创作者与内容平台，</p>
        <p>帮助自媒体高效的进行跨平台的内容分发及管理</p>
      </div>
      <div class="btns">
        <a v-if="!macDownloadUrl" class="mac prohibit">
          Mac版下载
        </a><a v-else class="mac" :href="macDownloadUrl">
          Mac版下载
        </a><a v-if="!windowsDownloadUrl" class="windows prohibit">
          Windows版下载
        </a><a v-else class="windows" :href="windowsDownloadUrl">
          Windows版下载
        </a>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getMacDownloadUrl, getWindowsDownloadUrl } from 'api/download'

const downloadUrl = `${location.protocol}//update-fengchao.apps.xiaoyun.com/release`
export default {
  data () {
    return {
      macDownloadUrl: '',
      windowsDownloadUrl: ''
    }
  },
  created () {
    this._getMacDownloadUrl()
    this._getWindowsDownloadUrl()
  },
  methods: {
    _getMacDownloadUrl () {
      getMacDownloadUrl().then((res) => {
        if (res.url) {
          this.macDownloadUrl = res.url.replace('-mac.zip', '.dmg')
        }
      })
    },
    _getWindowsDownloadUrl () {
      getWindowsDownloadUrl().then((res) => {
        res = res || ''
        let appName = ''
        res.replace(/^path:.*?\.exe$/img, ($1) => {
          appName = $1.replace('path: ', '').trim()
        })
        if (appName) {
          this.windowsDownloadUrl = `${downloadUrl}/${appName}`
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.c-banner
  height: 500px
  width: 100%
  background-image: url("banner.png")
  background-size: cover
  background-position: center
  color: #fff
  .cover
    height: 230px
    padding: 135px 0
    background-color: rgba(0, 0, 0, 0.5)
    padding-left: 140px
    .title
      font-size: 34px
      margin-bottom: 30px
    .desc
      font-size: 20px
      color: #f2f2f2
      margin-bottom: 60px
      line-height: 28px
    .btns
      a
        width: 140px
        font-size: 16px
        color: #fff
        height: 50px
        display: inline-block
        line-height: 50px
        text-align: center
        -webkit-transition: background-color .2s linear
        -moz-transition: background-color .2s linear
        -o-transition: background-color .2s linear
        -ms-transition: background-color .2s linear
        transition: background-color .2s linear
        &.mac
          border-bottom-left-radius: 50px
          border-top-left-radius: 50px
          background-color: #fd6129
        &.windows
          border-bottom-right-radius: 50px
          border-top-right-radius: 50px
          background-color: #ff4400
        &.prohibit
          cursor: not-allowed
          background-color: #999
          color: #ccc
        &.mac:hover, &.windows:hover 
          background-color: #e60012
</style>
