<template>
  <!--  <div>-->
  <!--    <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button> id="printBox"-->
  <!--  </div>-->
  <div style="margin: 10px">
    <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': isColumn?'0 0 10px 18px':'0'}">
                <name-circle :user="user" :type="operation.operation"/>
                <div class="name-block" :style="{'margin': isColumn?'0 0 0 30px':'0 20px 0 10px'}">
                  <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 v-if="user.isAgent" style="display: flex;" :style="{'margin': isColumn?'10px 0':'0'}">
                <div>
                  <name-circle :user="user" :showIcon="true" :user-name="user.agentUserName" :type="operation.operation"/>
                  <span style="color: #909399;font-size: 14px">（代理审批）</span>
                </div>
                <div class="name-block">
                  <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.agentUserName }}</span>
                  </div>
                  <span>{{ user.agentCompanyName }}</span>
                </div>
              </div>
              <div class="auditOpinion">
                <div v-if="user.auditOpinion">
                  <div style="margin-bottom: 10px;color: #909399">{{ user.operationTime||'2024-09-22 12:16:29' }}</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 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' ||state === 'ROLLBACK') {
      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;
    }

    .name-block {
      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;
      }
    }
    .avatar-block {
      display: flex;

      .agent-style {
        color: #909399;
        font-size: 15px;
      }

    }

    .auditOpinion {
      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>
