<template>
    <div class="comment-list-detail right-list-toolbar right-list-panel-card">
    <!--输出图片列表信息-->
    <el-toolbar>
      <el-col :span="10" :offset="14" class="search-box-r tool-search-box-r">
        <el-input v-model="searchContent" @keyup.enter.native="search" placeholder="请输入用户名/回复内容" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon">
          <i class="fa fa-search" @click="search" title="查询"></i>
        </span>
      </el-col>
    </el-toolbar>

    <el-list-view ref="comments" :data-read-url="dataUrl" :pageSize="10" >
      <template slot-scope="row">
        <div class="panel-card">
          <el-row :gutter="20" class="card-body">
            <el-col :span="2">
              <img class="weibo_headImage" :src="currentWeibo.headImage" :onerror="'assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png'">
            </el-col>
            <el-col :span="22">
              <el-row>
                <el-col>
                  <a class="list-card-title" href="javascript:void(0)" @click.stop="goWeibo(weiboPrefix+currentWeibo.profileURL)">{{currentWeibo.name}}</a>
                </el-col>
              </el-row>

              <el-row>
                <el-col>
                  <em>{{row.addTime}}</em>
                  <span>来自：</span>
                  <em v-html="row.source||'客户端'"></em>
                </el-col>
              </el-row>

              <el-row>
                <el-col>
                  <em v-html="row.content"></em>
                </el-col>
              </el-row>

              <el-row v-if="commentType === ''">
                <el-col >
                  <span>微博正文：</span>
                  <em v-html="row.statusContent"></em>
                  <span>作者</span>
                  <em>{{row.name}}</em>
                </el-col>
              </el-row>

            </el-col>
          </el-row>

          <el-row class="list-card-buttons">
            <el-col :span="10">
            </el-col>
            <el-col :span="14" class="tar">
              <el-button @click.stop="del([row])" v-if="row.Deleted==='Y'" type="text" title="删除" :priv="`ImagePlayerManage.Delete.${row.ID}`">
                <i class="fa fa-times"></i> 删除
              </el-button>
            </el-col>
          </el-row>

        </div>
      </template>
    </el-list-view>
  </div>
</template>
<script>
export default {
  props: {
    accountId: [String, Number],
    commentType: {
      type: String,
      default: 'send'
    }
  },
  data() {
    return {
      searchContent: '',
      currentWeibo: {},
      weiboPrefix: 'https://weibo.com/'
    }
  },
  async created() {
    await this.getWeibo()
  },
  methods: {
    async getWeibo() {
      let resp = await axios.get(`/ui/weibo/mediaaccounts/${this.accountId}/user`)
      if (resp.data.status === 1) {
        this.currentWeibo = resp.data.data
      }
    },
    dataUrl() {
      return [
        `/ui/weibo/mediaaccounts/${this.accountId}/comments`,
        {
          params: {
            keyWord: encodeURIComponent(this.searchContent),
            type: this.commentType
          }
        }
      ]
    },
    search() {
      this.$refs['comments'].getData()
    },
    del() {

    },
    goWeibo(url) {
      window.open(url, '_target')
    }
  }
}
</script>
<style>
.weibo_headImage{
  margin-top: 13px;
  max-width: 100px;
  max-height: 100px
}
.comment-list-detail .tool-search-box-r {top: 10px;}
</style>
