<template>
  <div class="ls-remark" style="padding-top: 5px;">
    <div class="leave-word-box">
      <div class="visit-people">
        <div class="title" style="margin-right: 10px;"><span>浏览记录</span></div>
        <div class="item" v-for="(domto, index) in accessList" :key="index">
          <el-popover placement="top-start" :title="domto.accessName" width="200" trigger="hover" :content="domto.createTime">
            <img v-show="domto.userImg" slot="reference" :src="domto.userImg" />
          </el-popover>
        </div>

        <div class="more" @click="browseRecords"><i class="el-icon-more"></i></div>
      </div>

      <div class="leave-word" v-for="(items, index) in commentList" :key="index">
        <img v-show="items.userImg" :src="items.userImg" />

        <div class="content-wrap">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div>
              <b class="name">{{ items.creater }}</b>
              <span class="time">{{ items.createTime }}</span>
            </div>
            <div><el-button v-if="items.deleteButton" @click="deleteData(items.id)" size="small" type="text" icon="el-icon-delete">删除</el-button></div>
          </div>
          <div class="content dbubble-text">{{ items.content }}</div>
        </div>
      </div>
      <span class="c6062 total">
        共&nbsp;
        <b class="c357F">{{ pagetotal }}</b>
        &nbsp;条留言
      </span>
      <el-pagination @current-change="currentChange" :page-size="pagers.size" :current-page="pagers.currPage" layout="prev, pager, next" :total="pagers.totals"></el-pagination>
    </div>
    <div class="remark-input" v-show="!button">
      <!-- <p class="title">意见留言</p> -->
      <div style="display: flex;">
        <el-input type="textarea" v-model="param.content" :autosize="{ minRows: 2, maxRows: 3 }" maxlength="300" show-word-limit placeholder="请输入您的意见" clearable></el-input>
        <img slot="reference" src="@/assets/img/public/brow.png" style="width: 26px; height: 16px; padding-left:10px;cursor:pointer" @click="isBrow(showBrow)" />
        <el-button @click="submitForm" type="primary" size="small" style="margin-left: 15px;">确认发表</el-button>
      </div>

      <div v-show="showBrow" style="position: absolute;right: 128px; top: -145px;" @mouseleave="mouseLeave">
        <picker :include="['people']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />
      </div>
    </div>
  </div>
</template>

<script>
import { Picker } from 'emoji-mart-vue';
export default {
  name: 'ls-remark',
  components: {
    Picker
  },
  created() {},
  mounted() {},
  methods: {
    // 移出
    mouseLeave() {
      this.showBrow = false;
    },
    isBrow(isBrow) {
      if (isBrow) {
        this.showBrow = false;
      } else {
        this.showBrow = true;
      }
    },
    addEmoji(e) {
      this.param.content += e.native;
    },

    currentChange(val) {
      this.pagers.currPage = val;
      this.reviewerData();
      this.$emit('query');
    },
    deleteData(deleid) {
      let param = { id: deleid };
      this.$confirm('确定是否删除此条评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$ajax.post({
            domain: 'crmUrl',
            url: 'comment.deleteByIdComment',
            data: JSON.stringify(param),
            success: function(res) {
              if (res.errorCode === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.reviewerData();
              } else {
                this.$message.error(res.msg);
              }
            }.bind(this),
            error: function(res) {
              this.$message.error(res.msg);
            }.bind(this)
          });
        })
        .catch(() => {});
    },
    handleClose() {
      this.remark = '';
    },
    browseRecords() {},
    //获取评论列表
    reviewerData() {
      this.timeObtain();
      this.getSaleUserInfo();
      var that = this;
      let paramdata = {
        currPage: this.pagers.currPage,
        pageSize: this.pagers.size,
        queryParam: {
          busId: that.detailStatus.busId,
          commentType: '1',
          reviewStatus: '',
          status: '1',
          latestTime: this.latestTime
        }
      };
      this.$ajax.post({
        domain: 'crmUrl',
        url: 'comment.commentByBusIdList',
        data: JSON.stringify(paramdata),
        success: function(res) {
          if (res.errorCode === 200) {
            this.commentList = res.data.records;
            this.pagetotal = res.data.total;
            this.pagers.totals = res.data.total;
            this.commentList.forEach((item, index) => {
              this.getUserImg(item.createrId, index, 'remark');
            });
          } else {
            this.$message.error(res.msg);
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.msg);
        }.bind(this)
      });
    },
    //新增浏览记录
    addsaveAccess() {
      this.timeObtain();
      var that = this;
      let param = {
        busId: this.detailStatus.busId,
        status: '1',
        latestTime: this.latestTime
      };
      this.$ajax.post({
        domain: 'crmUrl',
        url: 'access.saveAccess',
        data: JSON.stringify(param),
        success: function(res) {
          if (res.errorCode === 200) {
          } else {
            this.$message.error(res.msg);
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.msg);
        }.bind(this)
      });
    },
    //获取浏览记录列表
    accessByBusIdData() {
      this.timeObtain();
      var that = this;
      let param = {
        busId: that.detailStatus.busId,
        status: '1',
        latestTime: this.latestTime
      };
      this.$ajax.post({
        domain: 'crmUrl',
        url: 'access.accessByBusIdList',
        data: JSON.stringify(param),
        success: function(res) {
          if (res.errorCode === 200) {
            this.accessList = res.data;
            this.accessList.forEach((item, index) => {
              this.getUserImg(item.accessUid, index, 'record');
            });
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.msg);
        }.bind(this)
      });
    },
    //获取当前时间
    timeObtain() {
      let dateTime;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      this.latestTime = dateTime;
    },
    //获取 用户头像
    getUserImg(uid, index, type) {
      this.$ajax.get({
        domain: 'ddingtUrl',
        url: 'dding.getUserImg',
        data: { uid },
        success: function(res) {
          if (res.errorCode === 200) {
            if (type === 'remark') {
              this.$set(this.commentList[index], 'userImg', res.data);
            } else {
              this.$set(this.accessList[index], 'userImg', res.data);
            }
          }
        }.bind(this),
        error: function(res) {
          this.$message({
            type: 'error',
            message: res.body.msg || res.msg
          });
        }.bind(this)
      });
    },
    //获取当前登录人
    getSaleUserInfo() {
      this.$ajax.post({
        domain: 'crmUrl',
        url: 'visit.getSaleUserInfo',
        data: {},
        requestType: 'body',
        showLoad: false,
        success: function(res) {
          if (res.errorCode === 200) {
            let data = res.data;
            if(this.detailStatus.moduleId === 3104){
              this.loginUser = data.userName
            }else{
              this.loginUser = data.uid
            }
            // if(this.loginUser === this.detailStatus.superiorUid){
            //    if(this.detailStatus.status==='readed'||this.detailStatus.status==='finish'){
            //      this.msgBoard = true
            //    }else{
            //      this.msgBoard = false
            //    }
            // }
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.body.msg || res.msg);
        }.bind(this)
      });
    },
    //新增评论 点新增还是没值
    submitForm() {
      if (!this.param.content) {
      } else {
        var that = this;
        this.timeObtain();
        this.param = {
          busId: that.detailStatus.busId,
          moduleId: that.detailStatus.moduleId,
          commentType: '1',
          content: that.param.content,
          reviewStatus: 'dealing',
          status: '1',
          latestTime: this.latestTime
        };

        this.$ajax.post({
          domain: 'crmUrl',
          url: 'comment.saveComment',
          data: JSON.stringify(that.param),
          success: function(res) {
            if (res.errorCode === 200) {
              this.$message({
                message: '评论成功',
                type: 'success'
              });
              this.clearData();
              this.reviewerData();
              this.accessByBusIdData();
              this.$emit('refreshPage'); //触发自定义事件 用于刷新页面
            } else {
              that.$message.error(res.msg);
            }
          }.bind(that),
          error: function(res) {
            that.$message.error(res.msg);
          }
        });
      }
    },
    clearData() {
      this.param.content = '';
    }
  },
  props: {
    pager: {
      //分页参数，传递过来时，使用 .sync修饰
      type: Object,
      default: () => {
        return {
          currPage: 1,
          total: 10
        };
      }
    },
    button:{
      type: Boolean,
      default:false
    },
    detailStatus: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    pager: {
      handler: function(newVal, oldVal) {
        this.$emit('update', this.pagers);
      },
      deep: true
    },
    detailStatus: {
      handler: function(val) {
      //  this.addsaveAccess();
        this.reviewerData();
        this.accessByBusIdData();
      },
      deep: true
    }
  },
  data() {
    return {
      showBrow: false,
      msgBoard: true,
      superiorUid:'',
      loginUser:'',
      status:'',
      //分页参数
      pagers: {
        currPage: 1,
        size: 5,
        pageOptions: [5, 10, 20, 30],
        totals: 0
      },
      pagetotal: 0,
      param: {
        busId: '',
        busStatus: '',
        content: '',
        createTime: '',
        creater: '',
        result: '',
        reviewerType: '',
        status: 'Y'
      },
      commentList: [],
      accessList: []
    };
  }
};
</script>
<style scoped lang="scss">
.ls-remark {
  .title {
    color: #0077fa;
    font-weight: bold;
    margin: 15px 0;
  }

  .btns-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
  }

  .leave-word-box {
    padding: 10px;
    border: 1px solid #ebeef5;
    position: relative;

    .leave-word {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px dotted #dcdfe6;

      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        align-self: flex-start;
      }

      > .content-wrap {
        flex: 1;
        padding-left: 20px;

        .time {
          font-size: 12px;
          color: #666;
          margin-left: 10px;
        }

        .content {
          padding-top: 10px;
        }
      }
    }
    .total {
      position: absolute;
      bottom: 18px;
      left: 16px;
    }
  }
  .remark-input {
    margin-top: 10px;
    position: relative;
  }
  .visit-people {
    display: flex;
    align-items: center;
    border-bottom: 1px dotted #dcdfe6;

    img,
    .more {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    .more {
      background-color: #edeef5;
      text-align: center;
      line-height: 30px;
      &:hover {
        cursor: pointer;
      }
    }

    .item {
      text-align: center;
      margin-right: 5px;
      &:hover {
        cursor: pointer;
      }

      .name {
        padding: 5px 0;
      }

      .time {
        font-size: 12px;
        color: #666;
      }
    }
  }
  .el-pagination {
    margin: unset;
    padding-top: 10px;
  }
}
.dbubble-text {
  display: inline-block;
  color: #303030;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 145px;
  color: #ffffff !important;
  // border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}
</style>
