<template>
  <div class="am-main-view d-flex flex-column">
    <!--标题-->
    <div class="d-flex align-items-center justify-content-between py-2">
      <title-text>审批路径</title-text>
      <div class="d-flex align-items-center am-text-btn" @click="isShowOption = !isShowOption">
        <div class="d-flex flex-column">
          <i class="el-icon-d-arrow-left mr-1" :class="{ 'am-up': isShowOption, 'am-down': !isShowOption }" />
        </div>
        {{ isShowOption ? "收起" : "展开" }}
      </div>
    </div>
    <!--审批路径-->
    <div class="d-block pb-3">
      <table class="am-time-line">
        <tr v-for="(item, index) of approveLogs" v-bind:key="index">
          <td :class="index < approveLogs.length - 1 ? 'am-view-line' : 'am-view-none-line'" align="center" valign="top">
            <div :class="index === 0 ? 'am-view-node' : 'am-view-none-end'"></div>
          </td>
          <td>
            <div class="d-flex align-items-center justify-content-between hlh-40-dhcc am-mt-f5">
              <div class="d-flex">
                <span class="text-99-dhcc font-size-16-dhcc">{{ item.nodeName }}</span>
                <span class="text-99-dhcc font-size-16-dhcc ml-3">{{ item.userName }}</span>
                <!--                <span class="text-99-dhcc font-size-16-dhcc ml-3">部门暂缺</span>-->
                <span class="text-99-dhcc font-size-16-dhcc ml-3">{{ item.time }}</span>
              </div>
              <!--              <div v-if="index !== 0 && isShowComment" class="d-flex align-items-center am-text-btn" @click="openComments(index)">-->
              <!--                <i class="el-icon-chat-dot-round mr-1" />-->
              <!--                评论-->
              <!--              </div>-->
            </div>
            <div
              :class="{
                'am-show-view': isShowOption,
                'am-hide-view': !isShowOption
              }"
            >
              <div v-if="index !== 0" class="am-text-area">
                <div :innerHTML="item.opinion">{{ item.opinion }}</div>
                <div v-if="item.files" class="d-flex">
                  <div>图标&nbsp;&nbsp;&nbsp;</div>
                  <div class="d-flex flex-column flex-1-dhcc">
                    显示文件的组件
                  </div>
                </div>
              </div>
            </div>
            <div
              :class="{
                'am-show-view': isShowOption,
                'am-hide-view': !isShowOption
              }"
            >
              <div v-if="item.flowComments && !approveLogs[index].addFlag" class="am-content-div am-bg-color">
                <div v-for="(comment, index) of item.flowComments" v-bind:key="index">
                  <div class="d-flex justify-content-between px-2">
                    <span class="mx-1">{{ comment.commentText }}</span>
                    <span v-if="index === item.flowComments.length - 1 && true" class="am-text-btn am-clr-red mx-1">删除</span>
                  </div>
                  <div v-if="comment.files" class="d-flex flex-column">
                    显示附件
                  </div>
                </div>
              </div>
              <div v-if="approveLogs[index].addFlag || false" class="am-content-div am-bg-color">
                <div class="am-modal-content-view d-flex flex-column">
                  <div class="d-flex ml-2 mt-2">
                    <div class="flex-1-dhcc mr-3">
                      <template>
                        <input v-model="comments" class="am-text-area form-control-sm w-100 mb-0" placeholder="写评论" />
                      </template>
                    </div>
                  </div>
                  <upload-files-row class="ml-4" />
                  <!--  底部区域  -->
                  <div class="modal-footer">
                    <span size="mini" type="primary" class="am-btn-g">保存</span>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import TitleText from "@/views/TitleText.vue";
import { Button } from "element-ui";
import UploadFilesRow from "@/views/UploadFilesRow.vue";
import { DataInput, DataOutput } from "@/model";
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/code.enum";
import processOperationApi from "@/constants/api/ebtrust-project/process-operation.api";
/**
 * @Description: 审批路径页面
 * @author LiuBo
 * @date 2021/1/28
 * @time 14:35
 */
@Component({
  name: "ApprovalPath",
  components: { UploadFilesRow, TitleText, "el-button": Button }
})
export default class ApprovalPath extends Vue {
  approveLogs: any[] = []; // 审批意见列表
  isShowComment = true; // 是否允许评论
  isShowOption = true; // 是否收起起审批细节
  comments = ""; // 评论
  /**
   * @Description: 打开评论
   * @author LiuBo
   * @date 2021/1/31
   * @time 21:06
   */
  openComments(idx: number) {
    if (!this.isShowOption) {
      this.isShowOption = true;
    }
    this.approveLogs.forEach((value: any, index) => {
      if (idx === index) {
        value.addFlag = !value.addFlag;
      } else {
        value.addFlag = false;
      }
    });
  }
  mounted(): void {}
  /**
   * @Description: 初始化参数并填充
   * @author guoxuhui
   * @date 2021-03-09
   * @time 15:35
   */
  initData(taskInfo: any, instId: string, taskId: string): void {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: instId
      }
    });
    apiService.general(processOperationApi.approval.selectApprovalRecords, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        const data: any = dataOutput.data;
        const bpmTaskOpinionList: any[] = data.bpmTaskOpinionList;
        const approveLogs: any[] = [];
        bpmTaskOpinionList.forEach(value => {
          if (value.status !== "awaiting_check") {
            if (value.completeTime) {
              value.completeTime = value.completeTime.replace("T", "  ");
            }
            approveLogs.push({
              nodeId: value.taskKey,
              nodeName: value.taskName,
              userId: value.auditor,
              userName: value.auditorName,
              time: value.completeTime,
              opinion: value.opinion
            });
          }
        });
        this.approveLogs = approveLogs;
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
}
</script>

<style scoped lang="scss">
/**字体按钮*/
.am-text-btn {
  font-size: 14px;
  color: #2858d6;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
}
/**------------------时间轴样式start------------------*/
.am-time-line {
  width: 98%;
  margin-top: 15px;
  font-size: 14px;
  & > tr {
    line-height: 40px;
  }
}
.am-mt-f5 {
  margin-top: -5px;
}
.am-up {
  transform: rotate(90deg);
  transition: 0.3s;
}
.am-down {
  transform: rotate(270deg);
  transition: 0.3s;
}
/**连线样式：原理。使用给td设置背景图片的方式实现连接线*/
.am-view-line {
  width: 60px;
  vertical-align: top;
  position: relative;
}
/**最后一个节点无连线*/
.am-view-none-line {
  vertical-align: top;
  width: 40px;
  position: relative;
}
/**节点小圆点*/
.am-view-node {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-image: url("../../assets/img/icon-approvel-end.png");
  background-position: center center;
  background-size: 20px;
}
.am-view-line > div:after {
  content: "";
  width: 1px;
  z-index: 3;
  height: calc(100% - 18px);
  background-image: url("../../assets/img/icon-line.png");
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: center 0;
  position: absolute;
  left: 50%;
  top: 25px;
}
.am-view-none-end {
  background-image: url("../../assets/img/icon-approvel-pass.png");
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  background-color: #ffffff;
}
/**隐藏文件状态区域*/
.am-hide-view {
  max-height: 0;
  min-height: 0;
  transition: 0.4s;
  overflow: hidden;
}
/**显示文件状态区域*/
.am-show-view {
  max-height: 300px;
  min-height: 20px;
  transition: 0.6s;
}

.am-text-area {
  border: solid 1px #eeeeee;
  min-height: 40px;
  margin-bottom: 20px;
  padding: 0 10px;
  &:focus {
    border: 1px #409eff solid;
    outline: 0;
  }
}
.am-content-div {
  border: 1px solid #e8e8e8;
  position: relative;
  margin: 10px 0 5px;
  &:before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #cccccc;
    position: absolute;
    left: 25px;
    top: -10px;
    margin-top: -10px;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: #ffffff;
    position: absolute;
    left: 26px;
    top: -9px;
    margin-top: -9px;
  }
}
.am-clr-red {
  color: #ff0000;
}

.am-modal-content-view {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.am-btn-g {
  display: flex;
  min-width: 50px;
  height: 25px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: #409eff;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  &:active {
    opacity: 0.7;
  }
}

.am-bg-color {
  background-color: rgba(251, 251, 251, 1);
}

::v-deep .am-text-area p {
  margin-bottom: 0 !important;
  line-height: 1.8 !important;
}
</style>
