<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div class="panel-card platform-body">
      <div>
        <div v-for="item in mediaPlatforms" :key="item.ID" class="platform-list">
          <a href="javascript:void(0);" @click.stop="oauth(item.ID)" class="platform-item" :title="item.name">
            <img :src="`assets/images/socialmedia/${item.logoFile.toLowerCase()}`" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"/><br/><br/>
            {{item.name}}
          </a>
        </div>
      </div>
      <div class="platform-title">Tips：点击对应平台进行帐号授权。<span>添加头条号，未出现登录界面时，请先清理浏览器缓存！</span></div>
    </div>

    <el-dialog title="授权帐号" :visible.sync="oauthDialogModal" :close-on-click-modal="false" width="950px" class="media-auth-dialog">
      <iframe :src="authURL" style="width:100%;height:98%"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      mediaPlatforms: [],
      authURL: '',
      oauthDialogModal: false
    }
  },
  async created() {
    let res = await axios.get('/ui/mediaplatforms')
    this.mediaPlatforms = res.data.data
  },
  methods: {
    async oauth(code) {
      if (!code) {
        this.$alert('数据异常，请刷新页面重新尝试', '提示', { type: 'error' })
        return
      }
      this.authURL = ''
      if (code === 'SinaWeiBo' || code === 'QQWeiBo' || code === 'WeChatMedia' || code === 'QQNewsPlat' || code === 'TouTiaoMedia') {
        let res = await axios.get('/ui/mediaaccounts/0/authorize', {
          params: { media: code }
        })
        this.authURL = res.data.redirect_url
        this.oauthDialogModal = true
        if (res.data.status !== 1) {
          util.showErrorMessageBox(res.data.message)
        }
      } else {
        this.$router.push(`/socialmedia/accounts/new/${code}`)
      }
    }
  }
}
</script>
<style>
@media (max-width: 480px) {
  .media-auth-dialog .el-dialog {
    width: 96%;
  }
}
.media-auth-dialog .el-dialog .el-dialog__body {
  height: 550px;
}
</style>

<style scoped>
.platform-body {
  overflow: hidden;
  padding: 130px;
}
.platform-title {
  color: #777;
  clear: both;
  padding-top: 25px;
  font-size: 16px;
  padding-bottom: 30px;
}
.platform-list {
  text-align: center;
  float: left;
  width: 120px;
  margin-bottom:15px;
}
.platform-item {
  color: #777;
  text-decoration: none;
}
.platform-item:hover {
  color: #28b06e;
}
</style>
