<template>
  <div>
    <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button>
  </div>
  <div style="margin: 10px" id="printBox">
    <el-timeline>
      <el-timeline-item v-for="(operation,index) in operationList"
                        :key="index" :timestamp="operation.startTime"
                        :icon="operation.icon"
                        :color="operation.color"
                        size="large"
                        placement="top">
        <template #dot>
<!--          :style="{backgroundColor:operation.color}"-->
          <div style="background-color:#fff;width: 16px; height: 16px">
            <el-icon :color="operation.color" size="16px">
              <component :is="operation.icon"></component>
            </el-icon>
          </div>
        </template>
        <el-card>
          <div>
            当前节点: {{ operation.operationName }}
          </div>
          <div class="card">
            <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"
                 :style="{'flex-direction': isColumn?'column':'row'}">
              <div class="avatar-block" :style="{'margin-bottom': isColumn?'10px':'0'}">
                <name-circle :user="user" :type="operation.operation"/>
                <div class="name">
                  <div style="display: flex;align-items: center">
                    <el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
                             style="margin-right: 5px;">
                      <UserFilled/>
                    </el-icon>
                    <span class="name-style">{{ user.name }}</span>
                  </div>
                  <span>{{ user.jobActivityDesc }}</span>
                </div>
              </div>
              <div>
                <!--                <div class="remark">{{ operation.remark }}</div>-->
                <!--                <div>-->
                <!--                  <div>审批人：</div>-->
                <!--                  <div>{{ user.name }}</div>-->
                <!--                </div>-->
                <div v-if="user.auditOpinion">
                  <div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div>
                  <div class="username">
                    <span style="font-weight: bold">审批意见：</span>
                    <el-text v-text="user.auditOpinion" style="word-break: break-all">
                    </el-text>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
        <template #dot>
          <div style="background-color:#fff;width: 16px; height: 16px">
            <el-icon :color="timeline.color" size="16px">
              <component :is="timeline.icon"></component>
            </el-icon>
          </div>
        </template>
        <el-card style="font-size: 16px;font-weight: bold;">
          {{ timeline.context }}
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import NameCircle from "@/components/NameCircle.vue";

const props = defineProps({
  operationList: {
    type: Array,
    default: () => {
      return []
    }
  },
  state: {
    type: String,
    default: () => {
      return '1'
    }
  },
  isColumn: {
    type: Boolean,
    default: false
  },
  step: {
    type: String,
    default: ""
  }
})

const timeline = ref({
  color: '',
  icon: '',
  context: ''
})
const print = ref({
  id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！');
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },

})

const init = () => {
  switch (props.state) {
    case '1':
      timeline.value = {
        color: '#f78f5f',
        icon: 'MoreFilled',
        context: '审批进行中'
      }
      break
    case '4':
      if (props.step != 'report') {
        timeline.value = {
          color: '#0bbd87',
          icon: 'CircleCheckFilled',
          context: '审批通过'
        }
      } else {
        timeline.value = {
          color: '#f78f5f',
          icon: 'MoreFilled',
          context: '年度计划审批中'
        }
      }
      break
    case '2':
      timeline.value = {
        color: '#0bbd87',
        icon: 'CircleCheckFilled',
        context: '审批通过'
      }
      break
    case '3':
      timeline.value = {
        color: '#f56c6c',
        icon: 'CircleCloseFilled',
        context: '审核已驳回'
      }
      break
    case '5':
    case '6':
      timeline.value = {
        color: '#0bbd87',
        icon: 'CircleCheckFilled',
        context: '年度计划审批通过'
      }
      break
    default:
      break
  }
  // let operationListNew = []
  for (let i = 0; i < props.operationList?.length; i++) {
    props.operationList[i] = initOperationFun(props.operationList[i])
  }
}
//获取到对应附件的地址

const getAttachmentList = (attachments, image) => {
  let result = [];
  if (attachments) {
    for (let attachment of attachments) {
      if (attachment.isImage === image) {
        result.push(attachment)
      }
    }
  }
  return result;
}


const initOperationFun = (operation) => {
  let state = operation.state
  let type = operation.operation
  //创建节点
  if (type === 'CREATE') {
    operation["icon"] = "CircleCheckFilled"
    operation["color"] = "#0bbd87"
  }
  if (type === 'OPINION') {
    //审批通过
    if (state === 'AGREE' || state === 'AUTO_PASS') {
      operation["icon"] = "CircleCheckFilled"
      operation["color"] = "#0bbd87"
      operation["remark"] = "  已同意"
    }
    if (state === 'PASS') {
      operation["icon"] = "SemiSelect"
      operation["color"] = "#c0c4cc"
    }
    //审批处理中
    if (state === 'RUNNING') {
      operation["icon"] = "Loading"
      operation["color"] = "#f78f5f"
      operation["remark"] = "  处理中"
    }
    //回退
    if (state === 'ROLLBACK') {
      // operation["icon"] = "RefreshLeft"
      // operation["color"] = "#f78f5f"
      operation["icon"] = "CircleCloseFilled"
      operation["color"] = "#f56c6c"
      operation["remark"] = "  回退成功"
    }
    //拒绝操作
    if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
      operation["icon"] = "CircleCloseFilled"
      operation["color"] = "#f56c6c"
      operation["remark"] = "  拒绝"
    }
  }
  //抄送
  if (type === 'CC') {
    operation["icon"] = "Promotion"
    operation["color"] = "#3395f8"
    operation["remark"] = "  抄送成功"
  }
  //评论
  if (type === 'COMMENT') {
    //评论
    if (state === 'COMMENT') {
      operation["icon"] = "ChatDotRound"
      operation["color"] = "#0bbd87"
      operation["remark"] = "  添加了评论"
    }
  }
  //触发器发送http请求
  if (type === 'TRIGGER_WEBHOOK') {
    operation["icon"] = "Share"
    if (state === 'SUCCESS') {
      operation["color"] = "#0bbd87"
      operation["remark"] = "  成功"
    } else if (state === 'RUNNING') {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  请求中"
    } else {
      operation["color"] = "#f56c6c"
      operation["remark"] = "  失败"
    }
  }

  //触发器发送邮件
  if (type === 'TRIGGER_EMAIL') {
    operation["icon"] = "Message"
    if (state === 'SUCCESS') {
      operation["color"] = "#0bbd87"
      operation["remark"] = "  成功"
    } else if (state === 'RUNNING') {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  发送中"
    } else {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  发送中"
    }
  }
  return operation;
}
init()
</script>

<style lang="scss" scoped>
:deep(.el-timeline-item__dot) {
  margin-left: -3px;
}
:deep .el-card__body, .el-main {
  padding: 10px;
}

.card {
  display: flex;
  flex-direction: column;
  font-size: 15px;

  > div:first-child {
    display: flex;
  }

  .avatar_name {
    padding: 10px 0;
    display: flex;
    margin-right: 5px;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .avatar-block {
      display: flex;

      .name {
        width: 130px;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-right: 20px;

        .name-style {
          color: #2a99ff;
        }

        > span:last-child {
          margin-top: 5px;
          color: #909399;
        }
      }

    }

    > div:nth-child(2) {
      display: flex;
      flex-direction: column;
      color: #8a8a8a;

      .remark {
        font-weight: bold;
      }

      > div {
        margin-bottom: 5px;
      }

      > div:nth-child(2) {
        //display: flex;
        margin-top: -5px;
      }
    }
  }
}


.el-timeline-item__node {
  position: absolute;
  bottom: 20px;
  right: 1px;
}

.username {
  margin-top: 10px;
  background: #f5f5f5;
  padding: 12px;
}

@media print {
  //:deep .el-timeline-item__node--large > .el-icon {
  //  color: $iconColor !important;
  //}
}
</style>
