<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 :span="22">
                  <a class="list-card-title" href="javascript:void(0)" @click.stop="goWeibo(weiboPrefix+currentWeibo.profileURL)">{{currentWeibo.name}}</a>
                </el-col>
                <el-col :span="2" class="close-comment">
                  <el-button type="text" priv="SocialMedia.WeiBoManage.Comment_Delete" @click="del(row.ID)" class="comments_fonts"><i class="fa fa-times" aria-hidden="true"></i></el-button>
                </el-col>
              </el-row>

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

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

              <el-row >
                <el-col class="weibo_content">
                  <span style="padding-left:10px">{{commentType=='send'?'回复'+row.name:'评论我的微博'}}：</span>
                  <em v-html="row.statusContent"></em>
                </el-col>
              </el-row>

              <el-row v-if="commentType=='receive'">
                <el-col :offset="10" :span="2" >
                  <el-button class="comments_fonts" type="text" priv="SocialMedia.WeiBoManage.Comment_Reply" v-if="row.deleted=='N'" @click="openComments(row)" title="评论"><i class="fa fa-commenting-o"></i>回复</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-if="commentType=='receive'" v-show="row.ID==replyContent.ID&&replyContent.show">
                <el-row>
                  <el-col>
                    <!-- <span style="position:absolute;top:1px;left:16px;">{{replyContent.tips}}</span> -->
                    <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(row.ID)" priv="SocialMedia.WeiBoManage.Comment_Reply">回复</el-button>
                  </el-col>
                </el-row>
              </div>
            </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/',
      replyContent: {
        content: '',
        show: false,
        ID: '',
        userID: '',
        statusID: ''
      }

    }
  },
  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}/comments`,
        {
          params: {
            keyWord: encodeURIComponent(this.searchContent),
            type: this.commentType
          }
        }
      ]
    },
    search() {
      this.$refs['comments'].getData()
    },
    async del(id) {
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let resp = await axios.delete(`/ui/weibo/mediaaccounts/${this.accountId}/comments/${id}`, {params: {userID: this.currentWeibo.ID}})
        util.showResponseMessage(resp.data)
        resp.data.status === 1 && this.search()
      } catch (e) {

      }
    },
    goWeibo(url) {
      window.open(url, '_target')
    },
    openComments(row) {
      this.replyContent.show = !this.replyContent.ID ? true : this.replyContent.show
      let show = this.replyContent.ID === row.ID ? !this.replyContent.show : this.replyContent.show
      this.replyContent = Object.assign(this.replyContent, {ID: row.ID, show: show, userID: this.currentWeibo.ID, statusID: row.statusID})
      this.replyContent.content = `回复${row.name}:`
    },
    async reply(id) {
      let subDatas = Object.assign({}, this.replyContent, {content: this.replyContent.content.substring(this.replyContent.content.indexOf(':') + 1)})
      let resp = await axios.post(`/ui/weibo/mediaaccounts/${this.accountId}/comments/${id}/reply`, subDatas)
      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
}
.close-comment {text-align: right;}
</style>
