<template>
  <el-table :data-read-url="getDataURL" :page-size="pageSize" ref="dataTable" class="media-account-table">
    <el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
    <el-table-column label="媒体名称" >
        <template slot-scope="scope">
          <el-button type="text" class="table-title-button" :title="scope.row.MName" :priv="linePriv" @click.stop="edit(scope.row)">
            <img :src="scope.row.headImage ? scope.row.headImage : `./assets/images/socialmedia/${scope.row.PCode.toLowerCase()}-logo-18x18.png`" class="headImg"  onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="scope.row.MName" />
            &nbsp;{{scope.row.MName}}
          </el-button>
        </template>
    </el-table-column>
    <el-table-column prop="typeName" label="所属分类" width="140"></el-table-column>
    <el-table-column label="所属平台" width="140">
      <template slot-scope="scope">{{scope.row.PCode | formatPCode}}</template>
    </el-table-column>
    <slot name="options"></slot>
  </el-table>
</template>
<script>
export default {
  props: {
    getDataURL: {
      type: Function,
      required: true
    },
    linePriv: {
      type: String
    },
    pageSize: {
      type: Number,
      default: 20
    }
  },
  filters: {
    formatPCode: function(pcode) {
      let mediaTypes = [
        {pcode: 'SinaWeiBo', pname: '新浪微博'},
        {pcode: 'WeChatAccount', pname: '微信公众平台'},
        {pcode: 'WeChatMedia', pname: '微信开放平台'},
        {pcode: 'QQNewsPlat', pname: '企鹅号服务平台'},
        {pcode: 'QQNewsSite', pname: '企鹅号内容网站'},
        {pcode: 'TouTiaoMedia', pname: '今日头条平台'}
      ]
      let type = mediaTypes.find(val => val.pcode === pcode)
      if (type) {
        return type.pname
      } else {
        return pcode
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    edit(row) {
      this.$emit('callback', row)
    },
    loadData() {
      this.$refs.dataTable.getData()
    }
  }
}
</script>
<style scoped>
  .headImg{
    width:18px;
    height:18px;
  }
</style>
<style>
  .media-account-table .el-button--text.green{
    color:#28b06e
  }
  .media-account-table .el-button--text.green span{
    color:inherit
  }
</style>
