<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar align="right" class="search-box-r tool-search-box-r">
      <el-input v-model="keyWord" placeholder="请输入关键字" @keyup.enter.native="search" size="medium" class="search-bar-algin-toolbar">
      </el-input>
      <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
    </el-toolbar>
    <el-table :data="medias" :data-read-url="getDataURL" ref="dataTable">
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column label="平台列表">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" priv="SocialMedia.MediaCondition.Save" @click.stop="edit(scope.row.code)">
              <img :src="`assets/images/socialmedia/${scope.row.icon}`" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="scope.row.name" />
              &nbsp;{{scope.row.name}}
            </el-button>
          </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.stop="edit(scope.row.code)" type="text" priv="SocialMedia.MediaCondition.Save" title="查看限制条件">
            <i class="fa fa-search f16"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      medias: [],
      keyWord: ''
    }
  },
  async created() {},
  methods: {
    edit(code) {
      this.$router.push(`/socialmedia/mediaConditionList/${code}`)
    },
    async search() {
      await this.$refs.dataTable.getData()
    },
    getDataURL() {
      return [
        '/ui/mediaconditions',
        {
          params: {
            keyWord: encodeURIComponent(this.keyWord)
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
.search-bar-algin-toolbar {
  width: 270px;
}
.el-toolbar-body > span, .el-toolbar-body > .el-button:last-child, .el-toolbar-body > .el-toolbar-btn:last-child {top: 20px;}
</style>
