<template>
  <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">
        <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"/>
                <div class="name">
                  <span>{{ user.name }}</span>
                  <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">
        <el-card style="font-size: 16px;font-weight: bold;">
          {{ timeline.context }}
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
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
  }
})

const timeline = ref()

const init = () => {
  switch (props.state) {
    case '1':
      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 '4':
      timeline.value = {
        color: '#0bbd87',
        icon: 'CircleCheckFilled',
        context: '审批通过'
      }
      break
    default:
      break
  }
  // let operationListNew = []
  for (let i = 0; i < props.operationList?.length; i++) {
    let operationNew = initOperationFun(props.operationList[i])
    let userList = []
    if (operationNew.userInfo) {
      for (let user of operationNew.userInfo) {
        let userNew = initUser(user, operationNew.operation)
        userList.push(userNew)
      }
      operationNew.userInfo = userList
    }
    // operationListNew.push(operationNew)
    // this.operationList.push(operationNew)
    props.operationList[i] = operationNew
  }
}
//获取到对应附件的地址

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

const initUser = (user, type) => {
  let state = user.state
  //创建节点
  if (state === 'CREATE') {
    user["icon"] = 'CircleCheckFilled'
    user["color"] = "#0bbd87"
  }
  //审批通过
  if (state === 'AGREE' || state === 'AUTO_PASS') {
    user["icon"] = 'CircleCheckFilled'
    user["color"] = "#0bbd87"
  }
  if (type === "CC") {
    user["icon"] = "Promotion"
    user["color"] = "#3395f8"
  }
  //审批处理中
  if (state === 'RUNNING') {
    user["icon"] = 'Loading'
    user["color"] = "#f78f5f"
    user["class"] = 'is-loading'
  }
  //拒绝后评论
  if (state === 'REFUSE') {
    user["icon"] = 'Close'
    user["color"] = "#f56c6c"
  }
  if (state === 'PASS') {
    user["icon"] = 'MoreFilled'
    user["color"] = "#c0c4cc"
  }
  return user;
}

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["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-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;

        > span:first-child {
          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 {
  //width: 90px;
  margin-top: 10px;
  background: #f5f5f5;
  padding: 12px;
  //overflow: hidden;

  //.el-tooltip__trigger {
  //  width: 90px;
  //  text-align: center;
  //  //padding-top: 2px;
  //  //text-align: center;
  //  text-overflow: ellipsis;
  //  white-space: nowrap;
  //  overflow: hidden
  //}
}
</style>
