<template>
  <div class="apploval-opinion">
    <div class="ls-row">
      <div class="row-header title">
        <img class="icon-img"
             src="@/assets/images/icon/icon-msg.png" />
        <span>意见留言(<span style="color: #0077fa;" >{{ pagetotal}}</span>)
      </span></span>
      </div>
      <div class="row-content fc8CEE right">
        <div @click="handleMore">更多>></div>
      </div>
    </div>

    <div class="log-wrap"
         v-for="(item, index) in commentList"
         :key="index">
      <van-swipe-cell>
        <div class="log-item">
          <div class="img-wrap">
            <img :src="item.userImg" />
            <span>{{ item.creater }}</span>
          </div>
          <div class="text-wrap">
            <div class="text">{{ item.content }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <template #right
                  v-if="item.deleteButton">
          <van-button style="margin-left: 2px; height: 100%;font-size: 14px;"
                      square
                      type="warning"
                      text="删除"
                      @click="deleteData(item.id)" />
        </template>
      </van-swipe-cell>
    </div>

    <div class="text-content"
         v-show="!handle">
      <van-field v-model="param.content"
                 rows="5"
                 autosize
                 class="textarea"
                 type="textarea"
                 maxlength="300"
                 placeholder="请输入"
                 show-word-limit />
      <!-- 表情笑脸图标-->
      <!-- <img @click="isBrow(showBrow)"
           slot="reference"
           src="@/assets/images/brow.png"
           class="icon-smile" /> -->
      <div class="btn-wrap">
        <van-button type="info"
                    :disabled="publishProhibit"
                    native-type="submit"
                    @click="saveComment">
          <span class="iconfont icon-jijianfasong"></span>
          <span>发表</span>
        </van-button>
      </div>

    </div>
  </div>
</template>

<script>

import { Toast } from 'vant'
export default {
  name: 'ls-comment',
  components: {

  },
  props: { handle: Boolean },
  data () {
    return {
      pagetotal:0,
      msgBoard: false,
      showBrow: false,
      publishProhibit: false,
      param: {
        moduleId: 0,
        busId: '',
        busStatus: '',
        content: '',
        result: '',
        reviewerType: '',
        commentType: '1',
        status: 1
      },
      processId: '',
      opinionContent: '',
      commentList: [],
      count: 0,
      // 分页参数
      pagers: {
        currPage: 1,
        size: 3,
        pageOptions: [5, 10, 20, 30],
        totals: 0
      }

    }
  },
  methods: {
    // 移出
    mouseLeave () {
      this.showBrow = false
    },
    mouseenter () {
      this.showBrow = true
    },
    isBrow (isBrow) {
      if (isBrow) {
        this.showBrow = false
      } else {
        this.showBrow = true
      }
    },
    addEmoji (e) {
      this.param.content += e.native
    },
    // 获取 用户头像
    getUserImg (uid, index) {
      let that = this
      let commentList = this.commentList
      this.$axios.get({
        domain: 'ddingtUrl',
        url: 'dding.getUserImg',
        data: { uid },
        success: function (res) {
          if (res.errorCode === 200) {
            let userImg = res.data
            commentList[index].userImg = userImg
            that.commentList = commentList
          }
        }
      })
    },
    // 获取评论列表
    getComment (val) {
      let param = {
        currPage: this.pagers.currPage,
        pageSize: this.pagers.size,
        queryParam: {
          busId: val.busId,
          commentType: '1',
          reviewStatus: '',
          status: 1
        }
      }
    //  this.msgBoard = val.msgBoard
      this.param.busId = val.busId
      this.param.moduleId = val.moduleId
      this.$axios.post({
        domain: 'crmUrl',
        url: 'comment.commentByBusIdList',
        data: param,
        requestType: 'body',
        showLoad: false,
        success: function (res) {
          if (res.errorCode === 200) {
            let commentList = res.data.records
            this.pagetotal = res.data.total
            this.pagers.totals = res.data.total
            this.count = res.data.total
            if (commentList.length !== 0) {
              commentList.map((v, i) => {
                v.userImg = require('../assets/images/photo.png')
              })
            }
            this.commentList = commentList
            commentList.forEach((v, i) => {
              this.getUserImg(v.createrId, i)
            })
          } else {
            this.$toast.fail(res.body.msg || res.msg)
          }
        }.bind(this)
      })
    },

    // 新增评论 点新增还是没值
    saveComment () {
      this.publishProhibit = true
      if (!this.param.content) {
        this.$toast.fail({
          message: '请先输入评论',
          duration: 3000
        })
        setTimeout(() => {
          this.publishProhibit = false
        }, 3000)
      } else {
        this.$axios.post({
          domain: 'crmUrl',
          url: 'comment.saveComment',
          data: this.param,
          requestType: 'body',
          isShow:true,
          success: function (res) {
            if (res.errorCode === 200) {
              this.$toast.success('评论成功')
              this.param.content = ''
              this.getComment({ busId: this.param.busId, moduleId: this.param.moduleId})
            } else {
              this.$toast.fail(res.msg)
            }
            this.publishProhibit = false
          }.bind(this)
        })
      }
    },
    // 更多意见留言
    handleMore () {
      this.$router.push({ name: 'commentMore', query: { rowId: this.param.busId } })
    },
    deleteData (deleid) {
      let param = { id: deleid }
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除该数据?'
        })
        .then(() => {
          this.$axios.post({
            domain: 'crmUrl',
            url: 'comment.deleteByIdComment',
            data: param,
            requestType: 'body',
            success: function (res) {
              if (res.errorCode === 200) {
                Toast.success('删除成功')
                this.getComment({ busId: this.param.busId, moduleId: this.param.moduleId})
              } else {
                Toast.fail(res.msg)
              }
            }.bind(this),
            error: function (res) {
              Toast.fail(res.msg)
            }
          })
        })
        .catch(() => { })
    }
  }
}
</script>

<style type="text/css" scoped lang="scss">
.apploval-opinion {
  background-color: #fff;
  margin: 20px 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;

  .log-wrap {
    padding: 20px 20px 0;

    .log-item {
      background: #f9f9f9;
      border-radius: 10px;
      flex: 1;
      display: flex;
      padding: 20px;
      padding-top: 25px;

      .img-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 68px;
          height: 68px;
          border-radius: 50%;
        }
      }
      .text-wrap {
        flex: 1;
        padding-left: 20px;
        word-break: break-word;
        .text {
          color: #666;
          font-size: 24px;
          line-height: 40px;
        }
        .time {
          color: #999999;
          font-size: 22px;
        }
      }
    }
  }

  .text-content {
    display: flex;
    position: relative;

    .icon-smile {
      width: 50px;
      height: 40px;
      padding-left: 10px;
      cursor: pointer;
      position: absolute;
      bottom: 15px;
      left: 12px;
      z-index: 99;
    }
    .textarea {
      border: none;
    }

    .btn-wrap {
      width: 200px;
      padding: 10px;
      margin-right: 10px;

      .van-button {
        height: 100%;
        width: 100%;
        background: #ecf5ff;
        border-radius: 5px;
        color: #008cee;
        border: none;
        font-size: 28px;
        text-align: center;

        .van-button__content {
          .van-button__text {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            width: 100%;
          }
        }
      }
    }
    .emoji-mart-wrap {
      position: absolute;
      top: 250px;
      z-index: 100;
      left: 50%;
      transform: translateX(-50%);
      height: 300px;
      overflow-y: auto;
      border: 2px solid #e9e9e9;
      .emoji-mart {
        height: 100%;
      }
    }
    .emoji-mart {
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
        sans-serif;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      color: #ffffff !important;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      background: #fff;
    }
  }
}
</style>
