<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="row.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+row.profileURL)">{{row.name}}</a>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <em>{{row.addTime}}</em>
                  <span>来自：</span>
                  <em v-html="sourceStage(row.source)">{{row.source}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <em>{{row.content}}</em>
                </el-col>
              </el-row>

              <el-row>
                <el-col class="weibo_content">
                  &nbsp;&nbsp;<em>@{{row.originUser}}</em><br/>
                </el-col>
                <el-col  class="weibo_content">
                  &nbsp;&nbsp;<em v-html="row.originContent">{{row.originContent}}</em>
                </el-col>
              </el-row>

              <el-row>
                <el-col :offset="10" :span="2" >
                  <el-button class="comments_fonts" type="text" priv="SocialMedia.WeiBoManage.Comment" v-if="row.deleted=='N'" @click="openComments(row.ID)" title="评论"><i class="fa fa-commenting-o"></i>{{row.comments}}</el-button>
                  <span class="comments_fonts" v-if="row.deleted=='Y'"><i class="fa fa-commenting-o"></i>{{row.comments}}</span>
                </el-col>
              </el-row>

              <div class="weibo_reply" v-show="row.ID==replyContent.ID&&replyContent.show">
                <el-row>
                  <el-col>
                    <el-input type="textarea" placeholder="请输入评论内容" v-model="replyContent.content"></el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="weibo_content_submit">
                    <el-button type="primary" @click="reply" priv="SocialMedia.WeiBoManage.Comment">评论</el-button>
                  </el-col>
                </el-row>
              </div>

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

        </div>
      </template>
    </el-list-view>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    accountId: [String, Number],
    commentType: {
      type: String,
      default: 'send'
    }
  },
  data() {
    return {
      searchContent: '',
      currentWeibo: {},
      weiboPrefix: 'https://weibo.com/',
      replyContent: {
        content: '',
        show: false,
        ID: '',
        userID: ''
      }
    }
  },
  async created() {
    await this.getWeibo()
  },
  methods: {
    sourceStage: function(val) {
      if (val) {
        return `<a target="_blank" ${val.substr(val.indexOf('href'))}`
      }
      return `<a href="${this.weiboPrefix}" target="_blank">客户端</a>`
    },
    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}/atmeweibo`,
        {
          params: {
            keyWord: encodeURIComponent(this.searchContent)
          }
        }
      ]
    },
    search() {
      this.$refs['comments'].getData()
    },
    async del(id) {
      let resp = await axios.delete(`/ui/weibo/mediaaccounts/${this.accountId}/comments/${id}`)
      util.showResponseMessage(resp.data)
      resp.data.status === 1 && this.search()
    },
    goWeibo(url) {
      window.open(url, '_target')
    },
    openComments(id) {
      this.replyContent.show = !this.replyContent.ID ? true : this.replyContent.show
      let show = this.replyContent.ID === id ? !this.replyContent.show : this.replyContent.show
      this.replyContent = Object.assign(this.replyContent, {ID: id, show: show, userID: this.currentWeibo.ID})
    },
    async reply() {
      let resp = await axios.post(`/ui/weibo/mediaaccounts/${this.accountId}/comments`, this.replyContent)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.replyContent.ID = ''
        this.replyContent.content = ''
        this.replyContent.show = false
        this.search()
      }
    }
  }
}
</script>
<style>
.weibo_content{
  background-color: #F6F7F9;
}
.comments_fonts{
  font-size: 17px
}
.weibo_reply{
   border: 1px;
   border-color: aqua;
}
.weibo_content_submit{
  padding-top: 10px;
  text-align: right;
}
.weibo_headImage{
  margin-top: 13px;
  max-width: 100px;
  max-height: 100px
}
</style>
