<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>
    <account-list @callback="callback" 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="callback(scope.row)" type="text" class="green"><i class="fa fa-cog f16"></i>管理</el-button>
          </template>
        </el-table-column>
        </template>
    </account-list>
  </div>
</template>
<script>
import accountList from '../socialmedia/components/AccountList.vue'
const PCODE = 'WeChatMedia,WeChatAccount'
export default {
  components: {
    'account-list': accountList
  },
  data() {
    return {
      searchContent: {
        keyWord: '',
        typeID: ''
      },
      accountTypes: []
    }
  },
  created() {
    this.getAccountTypes()
  },
  methods: {
    async getAccountTypes() {
      let res = await axios.get('/ui/accounttypes')
      this.accountTypes = res.data.data
    },
    search() {
      this.$refs.dataTable.loadData()
    },
    callback(row) {
      this.$router.push(`/socialmedia/weixinList/${row.ID}/media`)
    },
    getDataURL() {
      return [
        '/ui/mediaaccounts',
        {
          params: {pCode: PCODE, typeID: this.searchContent.typeID, keyWord: encodeURIComponent(this.searchContent.keyWord)}
        }
      ]
    }
  }
}
</script>
