<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
      <i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div class="look-cotent-list">
      <el-list-view @selection-change="onSelectionChange" :data="comments" :data-read-url="getData" :pageSize="10" ref="commentsListRef">
        <template slot-scope="row">
          <div class="panel-card">
            <el-row>
              <el-col :span="2" class="image">
                <img :src="row.headImage" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"></el-col>
              <el-col :span="22">
                <el-row><span style="margin-left:10px; "><em>{{row.screenName}}</em></span></el-row>
                <el-row><span style="margin-left:10px;"><em>{{row.commentTime}}</em></span>&nbsp;<span><em>{{row.source}}</em></span></el-row>
                <el-row><span style="margin-left:10px;">{{row.commentContent}}</span></el-row>
              </el-col>
            </el-row>
            <el-row v-for="interaction in (row.Interactions)" :key="interaction.ID">
              <el-col :span="2"><span>{{interaction.screenName}}</span></el-col>
              <el-col :span="22"><span>{{interaction.replyContent}}</span></el-col>
            </el-row>
            <div v-if="PCode=='SinaWeiBo'">
              <el-row v-if="showReplyBox[row.ID]">
                <span>
                  <img :src="'assets/images/socialmedia/'+PCode.toLowerCase()+'-logo-18x18.png'"
                      onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" >&nbsp;
                  回复：<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 2}" v-model="row.replyCotent"></el-input>
                  <div class="reply-btn">
                    <el-button @click.stop="replyOkHandler(row)" type="primary" :disabled="!row.replyCotent" round class="shadow-primary">回复</el-button>
                  </div>
                </span>
              </el-row>
            </div>
            <div v-else>
                <el-row v-if="showReplyBox[row.ID]">
                  <span v-if="!row.hasReply">
                    <img :src="'assets/images/socialmedia/'+PCode.toLowerCase()+'-logo-18x18.png'"
                      onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" >&nbsp;
                    回复：<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 2}" v-model="row.replyCotent"></el-input>
                    <div class="reply-btn">
                      <el-button @click.stop="replyOkHandler(row)" type="primary" :disabled="!row.replyCotent" round class="shadow-primary">回复</el-button>
                    </div>
                  </span>
                  <span v-else style="margin-left:10px;">已回复</span>
                </el-row>
            </div>
            <el-row class="list-card-buttons">
              <el-col :span="24" class="tar">
                <el-button @click.stop="showReply(row)" type="text" title="回复">
                  <i class="fa fa-reply"></i>回复
                </el-button>
                <el-button @click.stop="selectSet(row)" type="text" :title="row.markelect" v-if="PCode!='SinaWeiBo'">
                  <i :class="row.commentType==0?'fa fa-star-o':'fa fa-star'"></i> {{row.markelect}}
                </el-button>
                <el-button @click.stop="deleteOne(row)" type="text" title="查看">
                  <i class="fa fa-remove"></i>删除
                </el-button>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-list-view>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    mediaID: {
      type: String,
      required: true
    },
    castID: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      PCode: this.$route.query.PCode || '',
      comments: [], // 评论数据
      showReplyBox: []
    }
  },
  methods: {
    onSelectionChange(selection) {
    },
    async replyOkHandler(row) {
      let params = {
        rootID: row.rootID,
        PCode: this.PCode,
        content: row.replyCotent
      }
      let res = await axios.put(`/ui/social/comments/${this.castID}/reply`, params)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.replyCotent = ''
        this.showReplyBox[row.ID] = false
        this.refs.commentsListRef.getData()
      }
    },
    async selectSet(row) {
      let params = {
        rootID: row.rootID,
        PCode: this.PCode,
        commentType: row.commentType
      }
      let res = await axios.put(`/ui/social/comments/${this.castID}/mark`, params)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.showReplyBox[row.ID] = false
        this.refs.commentsListRef.getData()
      }
    },
    showReply(row) {
      Vue.set(this.showReplyBox, row.ID, !this.showReplyBox[row.ID])
    },
    getData() {
      return [
        `/ui/social/comments/${this.castID}`, {
          params: {
            PCode: this.PCode
          }
        }
      ]
    },
    async deleteOne(row) {
      let params = {
        rootID: row.rootID,
        PCode: this.PCode
      }
      try {
        await this.$confirm('确定要删除该评论吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/social/comments/${this.castID}`, {params: params})
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.showReplyBox[row.ID] = false
          this.refs.commentsListRef.getData()
        }
      } catch (e) {

      }
    }
  }
}
</script>
<style scope>
.look-cotent-list .image img {
  max-width: 80px;
  max-height: 80px;
}
.look-cotent-list  .panel-card .card-header{
  background-color: #f9f9f9;
  padding: 10px 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.look-cotent-list .reply-btn{
    float: right;
    margin-top: 5px;
  }
</style>
