<template>
  <rt-view>
    <rt-header>
      <rt-navbar>
        <rt-button slot="right" type="sub" text @click="commentClick()">
          <span class="submittext">发送</span>
        </rt-button>
      </rt-navbar>
    </rt-header>
    <rt-content>
      <div class="rt-card-content">
        <form style="background-color: #F4F5FA;">
          <rt-textarea
            style="background-color: #F4F5FA;"
            v-model="datainfo.text"
            placeholder="写评论"
            autoHeight
            :rows="4"
          ></rt-textarea>
        </form>
        <div
          class="quickanswerbox"
          v-for="(quick,index) in quickanswer"
          :key="index"
          @click="quickanswerchange(quick)"
        >{{quick}}</div>
      </div>
    </rt-content>
  </rt-view>
</template>

<script>
import moment from 'moment';

export default {
  name: 'rtCommentView',
  data() {
    return {
      // 表单字段
      datainfo: {
        id: this.$route.params.id,
        text: null,
        score: null
      },
      isrtlistPage: this.$route.params.isrtListPage,

      commentStatus: this.$route.params.commentStatus,
      replyItem: JSON.parse(this.$route.params.replyItem),

      isComment: true,
      commentList: [],

      mainBtnColor: '#0099ff',
      addname: '发表',
      quickanswer: [
        '写的太棒了👏',
        '学习了~🌹',
        '赞!👍',
        '感谢你的分享🙏🙏',
        '沙发!🛋',
        '送你一朵小红花🌸',
        '专业有深度😍',
        '细致有见地😮',
        '加油!⛽',
        '早点休息😴'
      ]
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    StarClick1(index) {
      this.datainfo.score = 2 * index;
    },
    commentClick() {
      var sendText = '';
      if (rt.isNullOrWhiteSpace(this.datainfo.text)) {
        rt.showErrorToast('请输入文字内容');
        return;
      } else {
        sendText = this.datainfo.text;
      }

      this.isComment = false;
      this.postCommentData = {
        object_id: this.datainfo.id,
        text: sendText
      };
      if (this.commentStatus === 'replyComment') {
        this.postCommentData = {
          object_id: this.datainfo.id,
          text: sendText,
          parent_post_commentid: { Id: this.replyItem.parent_post_commentid, Name: 'jeoComment' },
          reply_userinfoid: { Id: this.replyItem.CreatedBy, Name: this.replyItem.CreatedByName }
        };
      } else if (this.commentStatus !== 'newComment') {
        this.postCommentData = {
          object_id: this.datainfo.id,
          text: sendText,
          parent_post_commentid: { Id: this.replyItem.post_commentId, Name: 'jeoComment' }
        };
      }

      this.sendComment2(this.postCommentData).then(data => {
        rt.showSuccessToast('发送成功');
        // this.sendComment = '';
        this.isComment = true;
        this.$bus.$emit('rt-reload-data-comment');
        this.$router.go(-1);
      });
    },
    sendComment2(reqData) {
      var url = 'api/PostComment/CreateData';
      return rt.post(url, reqData);
    },
    loadData() {
      this.datainfo.text = '';
      this.datainfo.score = 10;
      var apiUrl = 'api/Course/GetComment?courseId=' + this.datainfo.id;
      rt.get(apiUrl)
        .then(resp => {
          var data = resp[0];
          if (data) {
            this.datainfo.score = data.score_value;
            if (data.text && this.isrtlistPage) {
              this.datainfo.text = data.text;
            } else {
              this.datainfo.text = '';
            }
          } else {
            this.datainfo.score = 0;
          }
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
    },
    createComment(data) {
      return rt.post('api/Course/CreateComment', data);
    },
    quickanswerchange(value) {
      this.datainfo.text = this.datainfo.text + value;
    }
  }
};
</script>

<style lang="less" scoped>
.committext {
  margin-right: 15px;
  font-size: 14px;
}
.quickanswerbox {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 20px;
  background: rgba(244, 245, 250, 1);
  border-radius: 14px;
  margin-right: 15px;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.star {
  margin-right: 15px;
  position: relative;
  top: 4px;
}
.rt-card-content {
  border-radius: 5px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 1px 5px 1px rgba(167, 210, 255, 0.15);

  /deep/.rt-input-area > textarea {
    background-color: #f4f5fa !important;
  }

  /deep/.rt-textarea > .input-wrapper > .rt-input-area > textarea {
    background-color: #f4f5fa !important;
  }
}
</style>
