<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-row>
      <el-col :span="14">
        <el-toolbar>
          <el-button @click="add" :disabled="!createdFlag" priv="SocialMedia.MediaAccount.Add">
            <i class="fa fa-plus"></i>新建</el-button>
        </el-toolbar>
      </el-col>
      <el-col :span="10" class="dropdown-search-box-r search-bar-algin-toolbar search-bar-social-media-accounts">
        <el-input v-model="searchContent.keyWord" placeholder="请输入媒体名称" @keyup.enter.native="search" size="medium">
          <el-select placeholder="所属分类" clearable slot="prepend" v-model="searchContent.typeID" @change="search">
            <el-option v-for="item in accountTypes" :label="item.name" :value="item.ID" :key="item.ID"></el-option>
          </el-select>
        </el-input>
        <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
      </el-col>
    </el-row>
    <account-list @callback="callback" ref="dataTable" :getDataURL="getDataURL" line-priv="SocialMedia.MediaAccount.Edit" :page-size="20">
      <template slot="options">
        <el-table-column prop="addUser" label="添加人" width="140"></el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="140">
          <template slot-scope="scope">{{scope.row.addTime | fixDateTime}}</template>
        </el-table-column>
        <el-table-column align="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.stop="edit(scope.row.ID)" type="text" priv="SocialMedia.MediaAccount.Edit" title="编辑">
              <i class="fa fa-edit f16"></i></el-button>
            <el-button @click.stop="auth(scope.row.ID)" type="text" priv="SocialMedia.MediaAccount.Auth" title="授权">
              <i class="fa fa-key f16"></i></el-button>
            <el-button @click.stop="del(scope.row.ID)" type="text" priv="SocialMedia.MediaAccount.Delete" title="删除">
              <i class="fa fa-remove f16"></i></el-button>
          </template>
        </el-table-column>
      </template>
    </account-list>
    <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'
import accountList from './components/AccountList.vue'
export default {
  components: {
    'account-list': accountList
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      accountTypes: [],
      createdFlag: false,
      accounts: [],
      authURL: '',
      oauthDialogModal: false,
      searchContent: {
        keyWord: '',
        typeID: ''
      } // 搜索框文本绑定值
    }
  },

  async created() {
    let res = await axios.get('/ui/accounttypes')
    this.accountTypes = res.data.data
    this.createdFlag = true
  },
  methods: {
    add() {
      if (this.accountTypes.length === 0) {
        this.$alert('添加账号前，请先创建账号分类！', '提示', { type: 'warning' })
        return
      }
      this.$router.push('/socialmedia/accounts/new')
    },
    edit(ID) {
      this.$router.push(`/socialmedia/accounts/${ID}`)
    },
    async auth(ID) {
      let res = await axios.put(`/ui/mediaaccounts/${ID}/auth`)
      util.showResponseMessage(res.data)
    },
    async del(ID) {
      try {
        await this.$confirm('确定要删除该帐号吗，删除后无法恢复！', '提示', {
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let res = await axios.delete(`/ui/mediaaccounts/${ID}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.search()
      }
    },
    search() {
      this.$refs.dataTable.loadData()
    },
    callback(row) {
      this.edit(row.ID)
    },
    getDataURL() {
      return [
        '/ui/mediaaccounts',
        {
          params: {
            keyWord: encodeURIComponent(this.searchContent.keyWord),
            noValidate: 'Y',
            typeID: this.searchContent.typeID
          }
        }
      ]
    }
  }
}
</script>

<style>
@media (max-width: 480px) {
  .media-auth-dialog .el-dialog {
    width: 96%;
  }
}
.media-auth-dialog .el-dialog .el-dialog__body {
  height: 550px;
}
.search-bar-social-media-accounts .search-icon{
  top: 8px;
}
</style>
<style scoped>
</style>
