<!-- 历史评论信息 -->
<template>
  <div v-if="historyProcessInstanceDescriptions != undefined">
    <a-list
      v-for="(historyProcessInstanceDescription, index) in historyProcessInstanceDescriptions"
      :key="historyProcessInstanceDescription.id"
      item-layout="vertical"
    >
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <a-space>
              <a-typography-title :level="4" class="history-title">
                {{ $t("lang.historyApproveComment.title") }}
              </a-typography-title>
              <a-tag color="warning">
                {{ index + 1 }} / {{ abandonCount || 0 }}
              </a-tag>
              <a-tag v-if="historyProcessInstanceDescription.approvalHistory" color="error">
                <template #icon><close-circle-outlined /></template>
                {{ historyProcessInstanceDescription.approvalHistory.documentStatusChangeReason }}
              </a-tag>

              <a-tag color="success">
                <template #icon><clock-circle-outlined /></template>
                {{ historyProcessInstanceDescription.startTime }}-{{ historyProcessInstanceDescription.endTime }}
              </a-tag>
            </a-space>
          </template>
        </a-list-item-meta>

        <a-list item-layout="horizontal" :split="false">
          <!-- 提交人信息 -->
          <a-list-item>
            <a-list-item-meta>
              <template #avatar>
                <antd-auth-image
                  :is-preview="false"
                  :width="64"
                  :height="64"
                  :auth-src="
                    Common.getThumbnailImageSrc(
                      'com.leanwo.prodog.base.model.User',
                      historyProcessInstanceDescription.startUserImageUrl
                    )
                  "
                />
              </template>
              <template #title>
                {{ historyProcessInstanceDescription.startUserName }}
                <a-tag color="red">{{ $t("lang.approveComment.submitUser") }}</a-tag>
              </template>
              <template #description>
                <div class="comment-group">
                  <div class="comment-item">
                    <div class="time-info">{{ historyProcessInstanceDescription.startTime }}</div>
                    <span class="comment-text">{{ $t("lang.approveComment.submitApprove") }}</span>
                  </div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>

          <!-- 审批流程 -->
          <template v-if="historyProcessInstanceDescription.historicTaskInstanceDescriptions">
            <a-list-item 
              v-for="historicTaskInstanceDescription in historyProcessInstanceDescription.historicTaskInstanceDescriptions"
              :key="historicTaskInstanceDescription.id"
            >
              <a-list-item-meta>
                <template #avatar>
                  <antd-auth-image
                    :is-preview="true"
                    :width="64"
                    :height="64"
                    :auth-src="
                      Common.getThumbnailImageSrc(
                        'com.leanwo.prodog.base.model.User',
                        historyProcessInstanceDescription.assigneeImageUrl
                      )
                    "
                  />
                </template>
                <template #title>
                  {{ historicTaskInstanceDescription.assigneeName }}
                  <a-tag color="blue">
                    {{ historicTaskInstanceDescription.name }}({{ getTaskCompleteType(historicTaskInstanceDescription.completeReason) }})
                  </a-tag>
                </template>
                <template #description>
                  <div v-if="historicTaskInstanceDescription.comments">
                    <div 
                      v-for="commentItem in historicTaskInstanceDescription.comments"
                      :key="commentItem.id"
                      class="comment-item"
                    >
                      <div class="time-info">{{ commentItem.time }}</div>
                      <span class="comment-text">{{ commentItem.message }}</span>
                    </div>
                  </div>
                  <approve-task-attachment-view 
                    :enable-delete="false" 
                    :attachments="historicTaskInstanceDescription.attachments"
                  />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-list-item>
    </a-list>
    <loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import AntdAuthImage from '../widget/AntdAuthImage.vue';
import { Notify } from 'pc-component-v3';
import ApproveTaskAttachmentView from './ApproveTaskAttachmentView.vue';
import { CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    AntdAuthImage,
    ApproveTaskAttachmentView,
    CheckCircleOutlined, SyncOutlined, ClockCircleOutlined,
    CloseCircleOutlined,
  },

  props: {
    processInstanceId: {
      type: String,
      default: null,
    },
    recordId: {
      type: Number,
      default: null,
    },
  },

  emits: ['saveData'],

  data: function () {
    this.Common = Common;
    return {
      historyProcessInstanceDescriptions: null,
      abandonCount: 0,
      className: 'WorkFlow',
      loading: false,
    };
  },

  watch: {
    recordId: function (currentValue, oldValue) {
      this.refreshDebounce();
    },
    processInstanceId: function (currentValue, oldValue) {
      this.refreshDebounce();
    },
  },

  mounted: function () {
    var _self = this;
    this.refreshDebounce = Common.debounce(() => _self.refresh(), 1000);
    this.refreshDebounce();
  },

  methods: {

    /**
     * 刷新流程信息
     */
    refresh: function () {
      var _self = this;

      _self.historyProcessInstanceDescriptions = null;
      _self.abandonCount = 0;

      if (_self.recordId == null) {
        return;
      }

      _self.loading = true;
      $.ajax({
        url: Common.getApiURL(
          'WorkflowResource/listAbandonHistoryProcessInstanceDescription',
        ),
        type: 'GET',
        dataType: 'json',
        data: {
          excludeProcessInstanceId: _self.processInstanceId,
          recordId: _self.recordId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading = false;
          if (data.errorCode == 0) {
            _self.historyProcessInstanceDescriptions = data.datas;
            _self.abandonCount = data.total;
          } else {
            _self.historyProcessInstanceDescriptions = null;
            _self.abandonCount = 0;
            Notify.error('历史审批记录查询失败', data.errorMessage, false);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 获取评论的图片
     * @param  {[type]} imageUrl [description]
     * @return {[type]}          [description]
     */
    getCommentImageSrc: function (imageUrl) {
      console.log(imageUrl);
      var realImageUrl = Common.getImageSrc(
        this.className,
        'thumbnail/' + imageUrl,
      );
      return realImageUrl;
    },

    /**
     * 打开图片附件的功能
     * @param  {[type]} imageName [description]
     * @return {[type]}           [description]
     */
    openImageAttachment: function (imageName) {
      if (imageName == undefined) {
        return;
      }
      var fullPath = Common.getImageSrc(this.className, imageName);
      window.open(fullPath);
    },


    getTaskCompleteType: function(completeReason){
      if(completeReason == 'APPROVE'){
        return '审批通过';
      }else if(completeReason == 'REJECT'){
        return '审批不通过';
      }else if(completeReason == 'WITHDRAW'){
        return '撤销';
      }else{
        return '未处理';
      }
    },
  },
};
</script>
<style scoped>
.history-title {
  margin-right: 16px;
  margin-bottom: 0px;
  font-size: 16px;
  font-weight: 500;
}

.time-info {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.comment-text {
  margin-bottom: 0px;
  color: rgba(0, 0, 0, 0.85);
}

.comment-item {
  border-bottom: none;
}

.comment-item:last-child {
  border-bottom: none;
}

.ant-list-item-meta-avatar {
  margin-right: 16px;
}

.ant-list-split .ant-list-item {
  border-block-end: none;
}
:deep(.ant-list){
  margin-top: 16px;
}
:deep(.ant-list .ant-list-item){
  padding: 0 !important;
}
:deep(.ant-list .ant-list-item .ant-list-item-meta){
  margin-bottom: 6px !important;
}
:deep(.ant-list-vertical .ant-list-item .ant-list-item-meta .ant-list-item-meta-title){
  margin-bottom: 4px !important;
}
</style>