<template>
  <div class="message">
    <div class="input-msg">
      <textarea name="" id="msg" cols="50" rows="5" v-model.trim="title" @keyup.enter="sendMsg"
        :placeholder="refer"></textarea>
      <el-button @click="sendMsg" type="primary" size="medium" > 发送信息 </el-button>
    </div>
    <div class="history">
      <div class="msg-item" v-for="msg in msgList" :key="msg.id">
        <div>
          <h3>用户：{{msg.author}}</h3>
          <p><small>{{msg.createTime | formatTime}}</small></p>
          <p class="cont">{{msg.title}}</p>

          <block v-if="msg.replyTime>0 && msg.reply!=''">
            <h3 style="color: red;">官方答复</h3>
            <p><small>{{msg.replyTime | formatTime}}</small></p>
            <p class="cont">{{msg.reply}}</p>
          </block>

          <p class="control">
            <el-button @click="replyMsg(msg)" type="primary" size="mini"> 回复 </el-button>
            <el-button v-if="msg.userId==userInfo.uid" @click="delMsg(msg.postId)" type="danger" size="mini"> 删除  </el-button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import { mapGetters } from "vuex";
  import { MessageBox } from "element-ui";
  export default {
    created() {
      this.loadData()
    },
    data() {
      return {
        page: 1,
        size: 6,
        total: 0,
        refer:'',
        title: "",
        msgList: [],

      }
    },
    watch: {
      mediaId(){
        this.page = 1
        this.loadData()
      }
    },
    computed: {
    	...mapGetters("user", ["userInfo"])
    },
    onShow(){
      this.loadData()
    },
    props:['mediaId', "id"],
    methods: {
      loadData(){
        if( !this.mediaId ) return;
        let param = {
          mediaId: this.mediaId,
          page: this.page,
          size: this.size
        }
        httpServer( "Course.GetUserPostMediaList", param).then(res=>{
          if( res.code != 200) return;
          this.total = res.data.total;
          this.msgList = res.data.list||[];
        })
      },
      sendMsg() {
        if (this.title === "") {
          alert("留言内容为空")
          return
        }
        let title = this.refer +this.title
        let param = {title, mediaId: this.mediaId};
        httpServer( "Course.AddPostMedia", param).then(res=>{
          if( res.code != 200) return;
          this.title = '';
          this.refer = '';
          param.userId = this.userInfo.uid;
          param.author = this.userInfo.nickname;
          param.createTime = parseInt(Date.now()/1000)
          this.msgList.push( param )
          this.total += 1
        })
      },
      doDelMsg(postId){
        let param = {postId};
        httpServer( "Course.DeletePostMedia", {postId}).then(res=>{
          if( res.code != 200) return;
          this.loadData()
        })
      },
      replyMsg(msg){
        let title = msg.title||''
        if( title.substr(0,2) == '回复'){
          title = title.split('\n')[1];
        }
        this.refer = `回复 @${msg.author}:${title}\n`
      },
      delMsg(postId) {
        let that = this
        MessageBox({
          title: "删除信息",
          message: "删除之后不可恢复，是否确认删除！！",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '提交中...';
              that.doDelMsg(postId);
              done();
              instance.confirmButtonLoading = false;
              that.dialogVisible = true;

            } else{
              done();
            }

          }
        })
      },
    },
    filters: {
      formatTime: value => {
        const date = new Date(value*1000);
        return `${date.getFullYear()}年${(date.getMonth()+1).toString().padStart(2,0)}月${date.getDate().toString().padStart(2,0)}日 ${date.getHours().toString().padStart(2,0)}时${date.getMinutes().toString().padStart(2,0)}分${date.getSeconds().toString().padStart(2,0)}秒`
      }
    }
  }
</script>
<!-- 如果想让这里编写的样式只对当前组件有效，style上添加一个scoped属性-->
<style scoped>
  .input-msg {
    width: 80%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #msg {
    width: 100%;
    height: 60px;
    padding: 10px;
    outline: none;
    border: 1px solid rgba(219, 73, 73, 0.466);
    border-radius: 5px;
    resize: none;
    display: block;
    margin: 10px auto;
    font-size: 18px;
  }

  .send-msg {
    width: 200px;
    height: 40px;
    border: none;
    background-color: orangered;
    color: wheat;
    border-radius: 20px;
    cursor: pointer;
    font-size: 18px;
  }

  .send-msg:hover {
    background-color: rgb(34, 231, 109);
    color: #000;
  }

  .history {
    width: 80%;
    padding: 20px 10px;
    margin: 10px auto;
    background-color: #fff;
  }

  .msg-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px dashed #888;
  }

/*  .msg-item img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
  } */

  .msg-item div {
    margin-left: 10px;
    width: 100%;
  }

  .msg-item div h2 {
    font-size: 22px;
  }

  .msg-item div h2 small {
    font-size: 16px;
    color: #888;
    font-weight: 600;
    margin-left: 20px;
  }

  .msg-item div p.cont {
    font-size: 16px;
    color: #444;
    margin: 10px 0;
    word-wrap: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 30px;
  }

  .control {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .reply{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .btn {
    width: 80px;
    height: 30px;
    border: 1px solid #888;
    border-radius: 15px;
    cursor: pointer;
  }

  .btn-edit {
    background-color: rgb(20, 187, 247);
  }

  .btn-edit:hover {
    background-color: rgb(17, 148, 196);
    color: #fff;
  }

  .btn-del {
    background-color: rgb(247, 20, 88);
  }

  .btn-del:hover {
    background-color: rgb(192, 21, 72);
    color: #fff;
  }
</style>
