<template>
  <div class="leaveMessage"  >
    <h3>{{ $t(`message.messageBoard`) }}</h3>
    <span class="wantMessage" @click="handelWantMessage" v-show="WantShow">
      {{ $t(`message.message`) }}</span
    >
    <!-- 未留言 -->
    <div class="inputContent" v-show="leaveShow">
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 5 }"
        :placeholder="$t(`message.said`)"
        v-model="textarea"
        resize="none"
      >
      </el-input>
      <el-button @click="handelPublish" class="publish">{{
        $t(`message.publish`)
      }}</el-button>
    </div>
    <!-- 已发表留言 -->
      
    <div class="leaveContent" v-show="messageContentShow">
      <!-- 用户名 -->
      <el-row>
        <el-col class="user" v-for="item in messageContent" :key="item.id">
          <div class="picture">
            <img
              src="https://hbimg.huabanimg.com/94d26a8255b902cd27b98da5e4518217ebc437892616-RZJfHt_fw658"
              alt=""
            />
          </div>

          <div class="name">
            <!-- 留言第一层 -->
            <div class="firstLayer">
              <span>{{ item.userName }}</span>
              <span>{{ item.id }} {{ $t(`message.building`) }}</span>
              <!-- 留言内容 -->
              <p>{{ item.userMsg }}</p>
              <!-- 回复 -->
              <div class="reply">
                <span>{{handelTime(item.userDate)}}</span>
                <span @click="handelReply(item)">{{
                  $t(`message.reply`)
                }}</span>
              </div>
            </div>
            <!-- 回复留言层 -->
          <div v-if="item.responList[0]">
            <div  v-for="replyItem in getData(item.responList)"  :key="replyItem.id">
              <div class="replyMessage" v-for="replySubItem in replyItem" :key="replySubItem.responid">
              <div>
                <img
                  src="https://hbimg.huabanimg.com/94d26a8255b902cd27b98da5e4518217ebc437892616-RZJfHt_fw658"
                  alt=""
                />
              </div>
              <div class="replyContent"  >             
                <span>{{replySubItem.responser}}</span>
                <span>{{replySubItem.respon}}</span>
                <p class="time">
                 {{ handelTime(replySubItem.responDate) }}
                  <span @click="handelReply(item)">{{
                    $t(`message.reply`)
                  }}</span>
                </p>
              </div>
              </div>
              </div>
            </div>
            <!-- 回复留言下面的输入框 -->
            <div class="replyInput" v-if="replyId == item.id">
              <el-input
                v-model="reply"
                :placeholder="$t(`message.said1`)"
              ></el-input>
              <el-button class="publish" @click="handelDefiniteReply">{{
                $t(`message.determine`)
              }}</el-button>
              <el-button class="replyCancel" @click="handelCancelReply">{{
                $t(`message.cancel`)
              }}</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 点赞分享 -->
    <div class="praise">
      <span>{{ $t(`message.help`) }} </span>
      <span @click="handelPraise"
        ><i class="i iz-like"></i>{{ praiseNum }}</span
      >
      <span><i class="i icai" @click="handelPoor"></i> {{ poorNum }}</span>
      <i class="i itwitter-fill bird" @click="handelTwitter"></i>
      <i class="i ifacebookfacebook52 facebook" @click="handelFacebook"></i>
      <i class="i itelegram bird" @click="handelTelegram"></i>
      <i class="i ireddit Reddit" @click="handelReddit"></i>


      <!-- <span @click="handelShare"> <i class="i ifenxiang"></i></span> -->
    </div>

    <el-dialog title="选择分享" :visible.sync="dialogVisibleShare" width="30%">
      <div class="shareBox">       
        <p @click="handelTwitter">分享页面到 Twitter</p>
        <p @click="handelFacebook">分享页面到 Facebook</p>
        <p @click="handelTelegram">分享页面到 Telegram</p>
        <p @click="handelReddit">分享页面到 Reddit</p>
        <p>分享页面到 discord</p>
      </div>
      <!-- <div class="shareBtn">
        <el-button @click="dialogVisibleShare = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleShare = false"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchMessageBoard,
  submitMessage,
  responMsg,
  getPraise,
  getClickPraisePoor,
} from "../api/messageBoard";
export default {
  data() {
    return {
      leaveShow: true,
      textarea: "",
      messageContent: [
        // {
        //   id: 1,
        //   userMsg: "我是第一条留言",
        //   userName: "留言人",
        //   msgDate: "2009-01-09T08:00:00.000+00:00",
        //   responList: {
        //     responId: 3,
        //     respon: "管理员回复此留言的内容",
        //     responser: "管理员",
        //     toUser: "留言人",
        //     responDate: "2009-01-09T08:01:00.000+00:00",
        //     responList: {
        //       responId: 4,
        //       respon: "用户回复管理员答复的内容",
        //       responser: "留言人",
        //       toUser: "留言人",
        //       responDate: "2009-01-09T08:02:00.000+00:00",
        //       responList: null,
        //     },
        //   },
        // },
        // {
        //   id: 2,
        //   userMsg: "我是第二条留言",
        //   userName: "留言人",
        //   msgDate: "2009-01-09T09:00:00.000+00:00",
        //   responList: null,
        // },
      ],
      reply: "",
      WantShow: false,
      messageContentShow: false,
      messageBoard: {
        //请求历史留言
        page: "",
        coinType: "",
        pageNum: 1,
        pagesize: 10,
      },
      pagelabel: "",
      submitMsg: {
        //发表留言
        message: "",
        page: "",
        coinType: "",
      },
      replyId: "",
      responMsg: {
        //回复留言
        message: "",
        msg_id: "",
      },
      praiseNum: 0,
      praiseFlag: false,
      poorNum: 0,
      poorFlag: false,
      dialogVisibleShare: false,
      twitterURL:"",
      pageUrl:"",//网站当前页面地址
      telegramURL:"",
   

    };
  },
  watch: {
    pagelabel() {//跳转不同页面 请求不同页面数据
      this.fetchDefaultMessage(this.messageBoard);
      this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
    },
  },
  mounted() {
    this.messageBoard.page =JSON.parse(localStorage.getItem("params")).label//当前所在页面    
    this.messageBoard.coinType = localStorage.getItem("radius"); //当前币种
    this.fetchDefaultMessage(this.messageBoard);
    this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})//请求点赞 踩的历史数量
    this.pageUrl = window.location.href
    //监听localstorage改变赋值
    window.addEventListener("setItem", (e) => {
      this.messageBoard.page =JSON.parse(localStorage.getItem("params")).label      
      this.messageBoard.coinType = localStorage.getItem("radius");
      this.pagelabel = JSON.parse(localStorage.getItem("params")).label
    });

   
  },
  methods: {
    //请求历史留言
    async fetchDefaultMessage(data) {
      const list = await fetchMessageBoard(data);
      
    
      this.messageContent = list.data.data.data   
     
       if (this.messageContent[0]) {//有留言数据的情况 默认发表留言框不显示
      this.messageContentShow = true;
      this.WantShow = true;
      this.leaveShow = false;
    }else{
      this.leaveShow = true;
      this.WantShow = false;
      this.messageContentShow = false;
    }

    },
    //发表留言请求
    async fetchSubmitMessage(data) {
      const list = await submitMessage(data);
      //点击发表以后要重新请求所有留言数据
       this.fetchDefaultMessage(this.messageBoard);
    },
    //回复留言
    async fetchResponMsg(data) {
      const list = await responMsg(data);
        // 回复留言以后查询 所有留言重新渲染
       this.fetchDefaultMessage(this.messageBoard);

    },
    //请求点赞 踩的历史数量
    async fetchPraise(data){
      const list = await getPraise(data)
    
      this.praiseNum = list.data.data.likeNum
      this.poorNum = list.data.data.choose
    
    },
    //点赞 点踩以后传送数据
    async fetchClickNum(data){
      const list = await getClickPraisePoor(data)
    },
    //点击顶部我要留言
    handelWantMessage() {
      this.leaveShow = true;
    },
    //点击发表留言
    handelPublish() {
      // let id = 1;
      // let obj = {
      //   id: id++,
      //   message: this.textarea,
      // };
      // id = obj.id;
      // this.messageContent.push(obj);

      this.leaveShow = false;
      this.WantShow = true;
      // -------------------
      this.submitMsg.message = this.textarea;
      this.submitMsg.page = this.messageBoard.page;
      this.submitMsg.coinType = this.messageBoard.coinType;
      console.log(this.submitMsg,6621544561213);
      this.fetchSubmitMessage(this.submitMsg);
      this.textarea = "";
    },
    //点击回复留言
    handelReply(data) {
      this.replyId = data.id; //通过ID控制回复框是否显示
    },
    //取消回复留言
    handelCancelReply() {
      this.replyId = "";
    },
    //确定回复留言
    handelDefiniteReply() {
      this.responMsg.message = this.reply;
      this.responMsg.msg_id = this.replyId;
      this.fetchResponMsg(this.responMsg);
      this.reply =""
    },
    //点赞
    handelPraise() {
      this.praiseFlag = !this.praiseFlag;
      if (this.praiseFlag) {
        this.praiseNum++;
         this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:1})//发送点赞或踩的数据到后端
      } else {
         this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:0})
        this.praiseNum--;
      }
        //请求所有历史点赞数量
       this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
    },
    //踩
    handelPoor() {
      this.poorFlag = !this.poorFlag;
      if (this.poorFlag) {
        this.poorNum++;
        this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:2})
      } else {
        this.poorNum--;
          this.fetchClickNum({page:this.messageBoard.page,coinType:this.messageBoard.coinType,choose:0})
      }
       //请求所有历史点赞 踩数量
       this.fetchPraise({page:this.messageBoard.page,coinType:this.messageBoard.coinType})
    },
    //点击分享
    handelShare(){
      this.dialogVisibleShare =true
    },
    //分享到Twitter
    handelTwitter(){       
         
          this.twitterURL=`http://twitter.com/share?text=${this.$t(this.messageBoard.page)}&url=${this.pageUrl}`
          window.open(this.twitterURL)
    },
    //分享到Facebook
    handelFacebook(){

     
        this.facebookURL=`https://www.facebook.com/sharer.php?u=${this.pageUrl}`
        window.open(this.facebookURL)
    },
    //分享到Telegram
    handelTelegram(){
      this.telegramURL= `https://t.me/share?url=${this.pageUrl}&text=${this.$t(this.messageBoard.page)}`
      window.open(this.telegramURL)
    },
    //分享到Reddit
    handelReddit(){
        this.redditURL= `http://www.reddit.com/submit?url=${this.pageUrl}&title=${this.$t(this.messageBoard.page)}`
      window.open(this.redditURL)
    },
    
    // 处理留言板嵌套数组
    getData(data){
      let newData =[]
      this.handelArrList(data,newData)
    
      return newData
    },
     // 处理留言板嵌套数组
    handelArrList(data,newData) {
      let newObj ={}
      Object.keys(data).forEach(item=>{
        newObj[item]=data[item]
      })
      
      newData.push(newObj)
      if (!newObj.responList) return
      this.handelArrList(newObj.responList,newData)

    },
    //处理时间格式
    handelTime(time){
      return `${time.split("T")[0]} ${time.split("T")[1].split(".")[0]}`
    }
  },
};
</script>

<style lang="scss"  scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.leaveMessage {
  margin-top: 5px;
  position: relative;
  width: 100%;
  min-height: 200px;
  //   height: 500px;
  background: #e5e5e5;
  padding: 0px 5px;
  padding-bottom: 50px;
  // background: rgba(247,147,26,0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  // background: red;
  //   outline: 1px solid red;
  h3 {
    margin: 0px;
    display: inline-block;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  .wantMessage {
    margin-left: 20px;
    font-size: 14px;
    color: #0098d8;
    cursor: pointer;
  }

  .leaveContent {
    width: 100%;
    padding: 10px 0px;
    // background: papayawhip;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .user {
      // outline: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding: 10px 0px;
      display: flex;
      justify-content: space-around;

      margin-top: 5px;
      .picture {
        padding: 10px;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
    .name {
      flex: 1;
        // outline: 1px solid red;
      font-size: 13px;
      padding: 0px 20px;
      .firstLayer{
        //  outline: 1px solid red;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         padding: 10px 0px;
      }
      span:nth-of-type(1) {
        color: #0098d8;
      }
      span:nth-of-type(2) {
        color: rgba(0, 0, 0, 0.6);
        margin-left: 20px;
        font-size: 13px;
      }
      p {
        min-height: 20px; //  outline: 1px solid red;
        font-size: 13px;
        margin-top: 10px;
      }
      .reply {
        font-size: 12px;
        span:nth-of-type(1) {
          color: rgba(0, 0, 0, 0.6);
        }
        span:nth-of-type(2) {
          color: #0098d8;
          cursor: pointer;
        }
      }
    }
  }

  .praise {
    position: absolute;
    bottom: 10px;
    padding: 0px 10px;

    color: rgba(0, 0, 0, 0.6);
    // outline: 1px solid  red;
    span {
      display: inline-block;
      line-height: 30px;
      font-weight: 600;
      font-size: 15px;
      //   outline: 1px solid  red;
    }
    i {
      margin-left: 20px;
      font-size: 18px;
      cursor: pointer;
    }
  }
  // 默认状态
  .inputContent {
    //  outline: 1px solid red;
    //  border: 1PX solid #ccc;
    margin-top: 5px;
    .publish {
      padding: 5px 20px;
      margin-top: 10px;
      background: #7b8c9e;
      color: #fff;
    }
  }
  //  回复留言
  .replyMessage {
    // outline: 1px solid red;
    // height: 70px;
    padding: 5px;
    display: flex;
    img {
      width: 40px;
      height: 40px;
    }
    .replyContent {
      padding: 0px 10px;
      span:nth-of-type(2) {
        color: rgba(0, 0, 0, 1);
        font-size: 14px;
      }
      .time {
        color: rgba(0, 0, 0, 0.6);
        height: 20px;
        // margin: 0;
        span {
          cursor: pointer;
        }
      }
    }
  }
  // .replyMessageBox{

  // }
  //   回复留言的输入框
  .replyInput {
    margin-top: 10px;
    width: 60%;
    .publish {
      padding: 5px 10px;
      margin-top: 10px;
      background: #7b8c9e;
      color: #fff;
    }
    .replyCancel {
      padding: 5px 10px;
      margin-top: 10px;
      background: #7b8c9e;
      color: #fff;
    }
  }
}
.passwordBox {
  /* background: #b3c0d1; */
  width: 70%;
  margin: 0 auto;
  z-index: 99998 !important;
}

// 选择分享
.shareBox{
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  p{
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 40px;
    margin-top: 5px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
   p:hover{
    color:cadetblue;
    background: floralwhite;
    
   }

  
}

 .shareBtn{
    // border: 1px solid red;
    margin-top: 20px;
    display: flex;
    height: 30px;
    justify-content: right;
    .el-button{
        // border: 1px solid red;
        width: 80px;
    }
   }
   .bird{
    // border:1px solid red;
     color:#1d9bf0;
     font-size: 20px !important;
   
     
   }
   .facebook{
      color:#1d9bf0;
      font-size: 20px !important;
   
   }
   .Reddit{
     color:#ff4500;
     font-size: 20px !important;
   }
</style>