<template>
  <div class="my-right-content border-box">
    <nav-bread :menuData="menuData"></nav-bread>
    <div class="detail-content">
      <div class="detail-content-top">
        <div class="flex flex-wrap">
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">用户昵称：</div>
              <div class="item-value font-14 color-303133">{{ formData.nikeName || '--' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92 ">用户手机号：</div>
              <div class="item-value font-14 color-303133 p-1">{{ formData.phoneNumber || '--' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92 ">发生时间：</div>
              <div class="item-value font-14 color-303133 p-1">{{ formData.createTime | formatTimeStamp }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">企业：</div>
              <div class="item-value font-14 color-303133">{{ formData.enterpriseName || '--' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">部门/门店：</div>
              <div class="item-value font-14 color-303133">{{ formData.storeName ? '' : formData.groupName }} {{ formData.storeName }} {{ !formData.groupName && !formData.storeName ? '--' : '' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">微信：</div>
              <div class="item-value font-14 color-303133">{{ formData.wechatNumber || '--' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-24">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">问题类型：</div>
              <div class="item-value font-14 color-303133">
                <span v-if="formData.issueType == 0">功能异常</span>
                <span v-if="formData.issueType == 1">产品建议</span>
                <span v-if="formData.issueType == 2">安全问题</span>
                <span v-if="formData.issueType == 3">其他问题</span>
              </div>
            </div>
          </div>
          <div class="flex-1 m-b-24">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">问题描述：</div>
              <div class="item-value font-14 color-303133">{{ formData.issueDetail || '--' }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-24">
            <div class="flex flex-item">
              <div class="item-label font-14 color-606266 w-92">问题状态：</div>
              <div class="item-value font-14 color-303133">
                <span v-if="formData.issueStatus == 0" class="status-block status--block-default">未解决</span>
                <span v-if="formData.issueStatus == 1" class="status-block">待解决</span>
                <span v-if="formData.issueStatus == 2" class="status-block status-success">已解决</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 回复截图 -->
        <div class="issue-images flex m-b-60">
          <div class="item-label font-14 color-606266 w-92">问题截图：</div>
          <div class="issue-images-content flex">
            <img v-for="(item, index) in formData.issueImageList" :key="index + 'img'" :src="item" alt="img" />
          </div>
        </div>
      </div>
      <!-- 回复列表 -->
      <div class="reply-list">
        <div class="reply-title border-box font-14 color-303133">回复内容</div>
        <div class="reply-list-body">
          <div class="reply-content-body">
            <template v-for="(item, index) in replyList">
              <div class="flex flex-start relpy-cell" :key="index + 'reply'">
                <div class="reply-list-left">
                  <img :src="item.userImageUrl ? item.userImageUrl : nullImage" alt="" />
                </div>
                <div class="reply-list-right">
                  <div class="flex flex-column flex-space-between">
                    <div class="flex flex-space-between">
                      <div class="reply-user-name font-16 color-303133">{{ item.name }}</div>
                      <div class="reply-status">
                        <span v-if="item.issueStatus == 0" class="">【未解决】</span>
                        <span v-if="item.issueStatus == 1" class="">【待解决】</span>
                        <span v-if="item.issueStatus == 2" class="">【已解决】</span>
                      </div>
                    </div>
                    <div class="flex flex-space-between m-t-8">
                      <div class="reply-content font-14 color-606266">{{ item.message }}</div>
                      <div class="reply-date">{{ item.createTime | formatTimeStamp }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="reply-btn m-t-20">
            <el-button type="primary" @click="toReply">快速回复</el-button>
          </div>
        </div>
      </div>
    </div>
    <reply-dialog :editRow="editRow" :publishShow="publishShow" @hidePublishDialog="hidePublishDialog"> </reply-dialog>
  </div>
</template>
<script>
import navBread from '@/components/haoban/nav-bread.vue';
import replyDialog from '@/components/suggest/reply-dialog.vue';
import { getRequest } from '@/api/api';
export default {
  name: 'tableList',
  components: {
    navBread,
    replyDialog
  },
  data() {
    return {
      requestProject: 'gic-bizdict',
      menuData: [
        {
          name: '用户反馈',
          path: `/suggest?activeTab=${this.$route.query.activeTab}&name=${this.$route.query.name}&icon=${this.$route.query.icon}&code=${this.$route.query.code}&tabId=${this.$route.query.tabId}&tabCode=${this.$route.query.tabCode}`
        },
        {
          name: '反馈详情',
          path: ''
        }
      ],
      /* eslint-disable */
      nullImage: require('../../assets/images/reply_48_48.png'),
      formData: {
        issueId: '',
        userId: '',
        nikeName: '',
        userImageUrl: '',
        phoneNumber: '',
        enterpriseId: '',
        enterpriseName: '',
        storeGroupName: null,
        createTime: '',
        issueType: '',
        issueDetail: '',
        issueStatus: 0,
        issueTime: '',
        wechatNumber: '',
        storeId: null,
        groupId: '',
        storeName: null,
        groupName: '',
        contactPhone: null,
        issueImageList: []
      },
      loading: false,
      replyList: [],
      publishShow: false,
      editRow: {},
      currentPage: 1,
      pageSize: 20,
      total: 0,
      totalPage: 0,
      scrollBottom: null
    };
  },
  watch: {
    // 监听 scrollBottom 等于0 获取数据,否则不触发
    scrollBottom(val) {
      // console.log('我是watch监听的距离底部的距离', val);
      if (val !== 0) return false;
      // 判断当前页数大于最后一页 return false 加载完毕
      if (this.currentPage >= this.totalPage) {
        return false;
      }
      this.currentPage++;
      this.getReplyData();
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', 'platform_user_feedback');
    that.getData();
    that.getReplyData();
    document.querySelector('.reply-content-body').addEventListener('scroll', that.hanleScroll, true);
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    hanleScroll() {
      const that = this;
      /* console.log('滚动条距离顶部的距离', document.querySelector('.reply-content-body').scrollTop);
      console.log('监听的元素的高度', document.querySelector('.reply-content-body').clientHeight);
      console.log('监听元素的滚动条的高度', document.querySelector('.reply-content-body').scrollHeight); */
      that.scrollBottom = document.querySelector('.reply-content-body').scrollHeight - document.querySelector('.reply-content-body').clientHeight - document.querySelector('.reply-content-body').scrollTop;
    },
    /* *
     * 格式化时间戳
     */
    formatTime(data) {
      let date = new Date(data);
      let month = date.getMonth() + 1;
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      let newMonth = month < 10 ? '0' + month : month;
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return `${date.getFullYear()}-${newMonth}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /**
     * 快速回复
     */
    toReply() {
      const that = this;
      that.publishShow = true;
      that.editRow = that.formData;
    },
    hidePublishDialog(flag) {
      const that = this;
      if (!flag) {
        that.publishShow = false;
        that.editRow = {};
        return false;
      }
      that.publishShow = false;
      that.editRow = {};
      that.replyList = [];
      that.getReplyData();
    },
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getReplyData();
    },
    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getReplyData();
    },
    /**
     * 获取回复数据
     *
     */
    getReplyData() {
      const that = this;
      let para = {
        issueId: that.$route.query.issueId,
        currentPage: that.currentPage,
        pageSize: that.pageSize
      };
      getRequest(`/gic-platform-operation/feedback/message/${that.$route.query.issueId}`, para)
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.total = data.totalCount;
            that.totalPage = data.totalPage;
            if (data.result && data.result.length) {
              data.result.forEach(ele => {
                that.replyList.push(ele);
              });
            }
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error(error);
        });
    },
    /**
     * 获取数据
     *
     */
    getData() {
      const that = this;
      let para = {
        issueId: that.$route.query.issueId
      };
      getRequest(`/gic-platform-operation/feedback/${that.$route.query.issueId}`, para)
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.formData = data.result;
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error(error);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.detail-content {
  padding: 0 0 20px 0;
  .detail-content-top {
    padding: 20px 20px 0 20px;
  }
  .reply-list-body {
    padding: 0 20px;
  }
}
.p-1 {
  padding: 1px 0;
}
.m-b-24 {
  margin-bottom: 24px;
}
.w-92 {
  width: 92px;
}
.w-62 {
  width: 62px;
}
.flex {
  width: 100%;
}
.flex-1 {
  max-width: 33.333333%;
  min-width: 33.333333%;
}

.item-value {
  max-width: 295px;
  white-space: pre-wrap;
  word-break: break-all;
}
.flex-item {
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}
.issue-images-content {
  img {
    max-width: 200px;
    margin-right: 10px;
    border-radius: 2px;
  }
}
.reply-list {
  .reply-title {
    padding: 20px 0 20px 20px;
    border-bottom: 1px solid #e4e7ed;
  }
  .reply-content-body {
    max-height: 446px;
    overflow-y: auto;
  }
  .relpy-cell {
    padding: 20px 0;
    border-bottom: 1px solid #e4e7ed;
  }
  .reply-list-left {
    width: 48px;
    height: 48px;
    margin-right: 17px;
    border-radius: 2px;
    background: #ecf1f5;
    img {
      width: 48px;
      height: 48px;
      border-radius: 2px;
    }
  }
  .reply-list-right {
    width: calc(100% - 65px);
    height: 48px;
    .reply-content {
      max-width: 720px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .reply-status {
      font-size: 13px;
      color: #faad14;
    }
    .reply-date {
      color: #909399;
      font-size: 13px;
    }
  }
}
</style>
