<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-12
	描述：追踪日志
-->

<template>
  <div>
    <div v-for="item in recordComments" :key="item.id" class="media">
      <div class="media-body">
        <div class="comment">
          <AntdAuthImage
            :auth-src="getImgSrc(item.imageName)" class="media-object thumbnail m-image" :width="64"
            :height="64" :is-preview="false"
          />
          <div class="comment-detail">
            <div class="common">
              <span class="media-heading">
                {{ item.createdName }}
              </span>
              <a-tag
                v-if="item.carbonCopyUserIds != null && item.carbonCopyUserIds.length > 0"
                class="comment-user-tag"
              >
                发送给:
                {{
                  item.carbonCopyUserIds
                }}
              </a-tag>

              <a-tag color="default">
                <template #icon>
                  <clock-circle-outlined />
                </template>
                {{ item.created }}
              </a-tag>
            </div>
            <div class="common">
              <span class="common-title">{{ item.theme }}</span>
              <!-- eslint-disable-next-line -->
              <div id="content-editor-view" class="common-content" v-html="item.content" />
            </div>
            <div v-if="item.attachments != '' && item.attachments != undefined" class="common">
              <div v-for="file in split(item.attachments)" :key="file" class="files" @click="download(file)">
                <!-- <a><FileTextOutlined style="margin-right: 12px" />{{ file }}</a> -->
                <svg
                  id="mx_n_1708679906318" t="1708679906318" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4949" width="16" height="16"
                >
                  <path
                    d="M516.373333 375.978667l136.576-136.576a147.797333 147.797333 0 0 1 208.853334-0.021334 147.690667 147.690667 0 0 1-0.042667 208.832l-204.8 204.778667v0.021333l-153.621333 153.6c-85.973333 85.973333-225.28 85.973333-311.253334 0.021334-85.994667-85.973333-85.973333-225.216 0.149334-311.36L431.146667 256.362667a21.333333 21.333333 0 0 0-30.165334-30.165334L162.069333 465.066667c-102.805333 102.826667-102.826667 269.056-0.149333 371.733333 102.613333 102.613333 268.970667 102.613333 371.584 0l153.6-153.642667h0.021333l0.021334-0.021333 204.778666-204.778667c74.325333-74.325333 74.346667-194.858667 0.021334-269.184-74.24-74.24-194.88-74.24-269.162667 0.042667l-136.576 136.554667-187.626667 187.626666a117.845333 117.845333 0 0 0-0.106666 166.826667 118.037333 118.037333 0 0 0 166.826666-0.106667l255.850667-255.829333a21.333333 21.333333 0 0 0-30.165333-30.165333L435.136 669.973333a75.370667 75.370667 0 0 1-106.496 0.106667 75.178667 75.178667 0 0 1 0.128-106.496l187.605333-187.605333z"
                    fill="#3D3D3D" p-id="4950"
                  />
                </svg>
                <a style="margin-left: 12px"> {{ file }}</a>
              </div>
            </div>
          </div>
        </div>
        <a-divider />
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { DownloadService } from 'pc-component-v3';
import AntdAuthImage from '../../widget/AntdAuthImage.vue';
import { FileTextOutlined } from '@ant-design/icons-vue';
import {
  ClockCircleOutlined,
} from '@ant-design/icons-vue';

export default {
  components: {
    DownloadService,
    AntdAuthImage,
    FileTextOutlined,
    ClockCircleOutlined,
  },
  props: {
    recordId: {
      type: String,
      default: null,
    },
  },

  data: function () {
    return {
      recordComments: [],
      className: 'com.leanwo.prodog.system.model.CurdWindowComment',
      uuid: '',
      userClassName: 'com.leanwo.prodog.base.model.User',
    };
  },

  watch: {
    recordId: function (curVal, oldVal) {
      if (curVal != undefined) {
        this.getCurdComment();
      } else {
        this.recordComments = [];
      }
    },
  },

  mounted: function () {
    this.uuid = this.$route.params.uuid;
    if (this.recordId != undefined) {
      this.getCurdComment();
    }
  },
  methods: {
    // 获取图片路径
    getImgSrc: function (imageName) {
      var _self = this;
      if (imageName == undefined || imageName == '') {
        return '/static/assets/client-base-v4/image/no-image.png';
      }
      return Common.getThumbnailImageSrc(_self.userClassName, imageName);
    },
    /**
     * 根据追踪表Id获取评论
     * @author GuoZhiBo 20171201
     */
    getCurdComment: function () {
      var _self = this;
      _self.recordComments = [];
      $.ajax({
        url: Common.getApiURL(
          'CurdWindowCommentResource/queryCurdWindowComment',
        ),
        type: 'get',
        dataType: 'json',
        async: false,
        data: {
          recordId: _self.recordId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.recordComments = data;
          _self.$nextTick(() => {
            Common.downloadByA('#content-editor-view');
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 将字符串以”，“进行分割成字符串
     * @author GuoZhiBo 20171201
     */
    split: function (items) {
      if (items != null && items != '') {
        return items.split(',');
      } else {
        return null;
      }
    },
    /**
     * 下载文件
     * @param  {String} fileName 文件名
     * @return {void}
     */
    download: function (fileName) {
      var _self = this;
      DownloadService.fileDownload(_self.className, fileName);
    },
  },
};
</script>

<style scoped>
.comment {
  display: flex;
}

.comment-detail {
  margin-left: 24px;
}

.comment-detail p {
  margin-bottom: 0px !important;
  font-size: 14px;
}

.comment-user {
  font-size: 12px;
}

.comment-user-tag {
  font-size: 12px;
  margin: 0 10px 0 5px;
}

.ant-divider-horizontal {
  margin: 6px 0;
}

.common-title {
  font-weight: bold;
}

:deep .common-content p {
  margin-bottom: 0;
}

.files {
  display: flex;
  align-items: center;
  justify-self: start;
}
</style>