<template>
  <div class="my-right-content border-box">
    <nav-bread :menuData="menuData"></nav-bread>
    <div class="detail-content">
      <el-form ref="form" :model="formData" label-width="110px">
        <div class="flex flex-wrap">
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">用户昵称：</div>
              <div class="item-value font-14 color-303133">{{ formData.nikeName }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">用户手机号：</div>
              <div class="item-value font-14 color-303133">{{ formData.phoneNumber }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">发生时间：</div>
              <div class="item-value font-14 color-303133">{{ formData.createTime | formatTimeStamp }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">企业：</div>
              <div class="item-value font-14 color-303133">{{ formData.enterpriseName }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">部门/门店：</div>
              <div class="item-value font-14 color-303133">{{ formData.groupName }} {{ formData.storeName }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-20">
            <div class="flex">
              <div class="item-label font-14 color-606266">微信：</div>
              <div class="item-value font-14 color-303133">{{ formData.wechatNumber }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-24">
            <div class="flex">
              <div class="item-label font-14 color-606266">问题类型：</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">
              <div class="item-label font-14 color-606266">问题描述：</div>
              <div class="item-value font-14 color-303133">{{ formData.issueDetail }}</div>
            </div>
          </div>
          <div class="flex-1 m-b-24">
            <div class="flex">
              <div class="item-label font-14 color-606266">问题状态：</div>
              <div class="item-value font-14 color-303133">
                <span v-if="formData.issueStatus == 0" class="">未解决</span>
                <span v-if="formData.issueStatus == 1" class="">待解决</span>
                <span v-if="formData.issueStatus == 2" class="">已解决</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 回复截图 -->
        <div class="issue-images flex m-b-60">
          <div class="item-label font-14 color-606266">问题截图：</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 class="reply-list">
          <div class="reply-title font-14 color-303133">回复内容</div>
          <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" 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 class="pagination block text-right" v-if="replyList.length != 0">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
          </div>
        </div>
      </el-form>
      <div class="reply-btn">
        <el-button type="primary" @click="toReply">快速回复</el-button>
      </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: ''
        }
      ],
      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
    };
  },
  mounted() {
    const that = this;
    that.$emit('showTab', 'platform_user_feedback');
    that.getData();
    that.getReplyData();
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /* *
     * 格式化时间戳
     */
    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.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.replyList = data.result || [];
          } 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: 24px;
}
.m-b-24 {
  margin-bottom: 24px;
}
.flex {
  width: 100%;
}
.flex-1 {
  max-width: 33.333333%;
  min-width: 33.333333%;
}
.item-label {
  min-width: 70px;
}
.item-value {
  max-width: 295px;
  white-space: pre-wrap;
  word-break: break-all;
}
.issue-images-content {
  img {
    max-width: 200px;
    margin-right: 10px;
    border-radius: 2px;
  }
}
.reply-list {
  .reply-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d6e0f0;
  }
  .relpy-cell {
    padding: 20px 0;
    border-bottom: 1px solid #d6e0f0;
  }
  .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>
