<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-row>
      <el-col :offset="14" :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>
    <div class="">
      <account-list @callback="fansManage" ref="dataTable" :getDataURL="getDataURL" line-priv="" :page-size="20">
        <template slot="options">
          <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.stop="fansManage(scope.row)" type="text" class="green"><i class="fa fa-user-circle f16"></i>粉丝管理</el-button>
          </template>
        </el-table-column>
        </template>
      </account-list>
    </div>
  </div>

</template>

<script>
import util from '@src/common/util.js'
import accountList from './components/AccountList.vue'
const pCode = 'WeChatMedia,WeChatAccount,SinaWeiBo'
export default {
  components: {
    'account-list': accountList
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      searchContent: {
        keyWord: '',
        typeID: ''
      },
      accountTypes: []
    }
  },
  created() {
    this.getAccountTypes()
  },
  methods: {
    async getAccountTypes() {
      let res = await axios.get('/ui/accounttypes')
      this.accountTypes = res.data.data
    },
    // 进入粉丝管理
    fansManage(row) {
      if (row.PCode === 'SinaWeiBo') {
        this.$router.push({path: `/socialmedia/sinaFansManage/${row.AID}`})
      } else {
        this.$router.push({path: `/socialmedia/fansManage/${row.AID}`, query: {accountID: row.ID}})
      }
    },
    // 刷新表格数据
    search() {
      this.$refs.dataTable.loadData()
    },
    getDataURL() {
      return ['/ui/mediaaccounts', { params: {
        keyWord: encodeURIComponent(this.searchContent.keyWord),
        typeID: this.searchContent.typeID,
        pCode: pCode
      }}]
    }
  }
}
</script>
