<template>
  <div class="layout-no-cols right-list-panel-card">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
      <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="refreshList()">
        <span><i class="fa fa-refresh"></i>刷新</span></el-button>
    </el-toolbar>
    <el-list-view ref="commentList" :data-read-url="getCommentLists" :pageSize="10" @selection-change="onSelectionChange">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row>
            <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoViewPage(row)">{{row.title}}</a>
            <span class="gray" title="媒体名称">{{row.MName}}</span>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>转载量：</span><em>{{(row.PCode=='WeChatAccount'||row.PCode=='WeChatMedia')?'-':row.repostsCount}}</em>
            </el-col>
            <el-col :span="6"><span>评论数：</span> <em>{{row.commentsCount}}</em> </el-col>
            <el-col :span="6"><span>点赞数：</span> <em>{{(row.PCode=='WeChatAccount'||row.PCode=='WeChatMedia')?'-':row.attitudesCount}}</em> </el-col>
            <el-col :span="6"><span>推送时间：</span> <em>{{row.pushTime | fixDateTime}}</em> </el-col>
          </el-row>
          <el-row class="list-card-buttons">
            <el-col :span="12">
              <el-tag size="small">{{row.pushState==0?'推送成功':'推送失败'}}</el-tag>
            </el-col>
            <el-col :span="12" class="tar">
              <el-button @click.stop="gotoViewPage(row)" type="text" title="查看">
                <i class="fa fa-edit"></i>查看
              </el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    ID: {
      type: String,
      required: true
    }
  },
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      PCode: this.$route.query.PCode || ''
    }
  },
  methods: {
    refreshList() {
      this.$refs.commentList.getData()
    },
    gotoViewPage(row) {
      if (!row || !row.MCastID) {
        return
      }
      this.$router.push({path: `/socialmedia/commentsList/${this.ID}/${row.MCastID}`, query: {PCode: this.PCode}})
    },
    onSelectionChange(selection) {},
    getCommentLists() {
      return [
        `/ui/social/comments`,
        {
          params: {
            ID: this.ID
          }
        }
      ]
    }
  }
}
</script>
<style scope>
</style>
