<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 style="display: flex;">
            <div v-for="(user,index) in operation.userInfo" :key="index">
              <el-avatar style="margin-right: 5px;" size="large"
                         :src="user.avatar"></el-avatar>
              <div v-if="!$slots.dot && operation.userInfo.length > 1"
                   class="el-timeline-item__node" :style="{
                      backgroundColor: user.color
                    }">
                <i v-if="user.icon"
                   class="el-timeline-item__icon"
                   :class="user.icon"
                ></i>
              </div>
            </div>
            <div style="margin-left: 10px;">
              <div style="color: #c0bebe">{{ operation.operationName }}</div>
              <div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
            </div>
          </div>
          <template v-if="operation.operation === 'comment' || operation.operation === 'refuse'">
            <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
              <div>
                {{ operation.comment.context }}
              </div>
              <div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
                <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
                  <el-image
                      style="width: 100px; height: 100px"
                      :src="item.url"
                      :preview-src-list="[item.url]">
                  </el-image>
                </template>
                <div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
                  <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>
                </div>
              </div>
            </div>
          </template>
        </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>

export default {
  name: "OperationRender",
  props: {
    operationList: {
      type: Array,
      default: () => {
        return []
      }
    },
    state: {
      type: String,
      default: () => {
        return '1'
      }
    }
  },
  data() {
    return {
      timeline: {},

    }
  },
  created() {
    console.log(this.operationList)
    this.init()
  },
  methods: {
    init() {
      switch (this.state) {
        case '1':
          this.timeline = {
            color: '#f78f5f',
            icon: 'el-icon-more',
            context: '审批进行中'
          }
          break
        case '2':
          this.timeline = {
            color: '#0bbd87',
            icon: 'el-icon-check',
            context: '审批通过'
          }
          break
        case '3':
          this.timeline = {
            color: '#f56c6c',
            icon: 'el-icon-close',
            context: '审核已驳回'
          }
          break
        case '4':
          this.timeline = {
            color: '#0bbd87',
            icon: 'el-icon-check',
            context: '审批通过'
          }
          break
        default:
          break
      }
      // let operationListNew = []
      console.log(this.operationList.length, "sdjshjdhasjds")
      for (let i = 0;i<this.operationList.length;i++) {
        let operationNew = this.initOperationFun(this.operationList[i])
        console.log(operationNew, "sdjshjdhasjds")
        let userList = []
        for (let user of operationNew.userInfo) {
          let userNew = this.initUser(user)
          userList.push(userNew)
        }
        console.log(userList, "userList")
        operationNew.userInfo = userList
        // operationListNew.push(operationNew)
        // this.operationList.push(operationNew)
        this.operationList[i] = operationNew
      }
      console.log(this.operationList, "operationListNew")
    },
    //获取到对应附件的地址
    getAttachmentList(attachments, image) {
      let result = [];
      for (let attachment of attachments) {
        if (attachment.isImage === image) {
          result.push(attachment)
        }
      }
      return result;
    },
    initUser(user) {
      let state = user.state
      //创建节点
      if (state === 'create') {
        this.$set(user, "icon", "el-icon-check")
        this.$set(user, "color", "#0bbd87")
      }
      //审批通过
      if (state === 'agree') {
        this.$set(user, "icon", "el-icon-check")
        this.$set(user, "color", "#0bbd87")
      }
      //审批处理中
      if (state === 'process') {
        this.$set(user, "icon", "el-icon-loading")
        this.$set(user, "color", "#f78f5f")
      }
      //拒绝后评论
      if (state === 'refuse') {
        this.$set(user, "icon", "el-icon-close")
        this.$set(user, "color", "#f56c6c")
      }
      if (state === 'pass'){
        this.$set(user, "icon", "el-icon-more")
        this.$set(user, "color", "#c0c4cc")
      }
      return user;
    },
    initOperationFun(operation) {
      console.log("开始处理内容了")
      let state = operation.state
      let type = operation.operation
      //创建节点
      if (state === 'create') {
        this.$set(operation, "icon", "el-icon-check")
        this.$set(operation, "color", "#0bbd87")
        this.$set(operation, "remark", operation.userInfo.name)
      }
      //审批通过
      if (state === 'agree') {
        this.$set(operation, "icon", "el-icon-check")
        this.$set(operation, "color", "#0bbd87")
        this.$set(operation, "remark", operation.userInfo.name + '  (已同意)')
      }
      if (state === 'pass'){
        this.$set(operation, "icon", "el-icon-more")
        this.$set(operation, "color", "#c0c4cc")
      }
      //审批处理中
      if (state === 'process') {
        this.$set(operation, "icon", "el-icon-loading")
        this.$set(operation, "color", "#f78f5f")
        this.$set(operation, "remark", operation.userInfo.name + '  (处理中)')
      }
      //抄送
      if (type === 'cc') {
        this.$set(operation, "icon", "el-icon-s-promotion")
        this.$set(operation, "color", "#3395f8")
        this.$set(operation, "remark", operation.userInfo.name + '  (抄送成功)')
      }
      //评论
      if (state === 'comment') {
        this.$set(operation, "icon", "el-icon-chat-dot-round")
        this.$set(operation, "color", "#0bbd87")
        this.$set(operation, "remark", operation.userInfo.name + '  (添加了评论)')
      }
      //拒绝后评论
      if (state === 'refuse' && type === 'comment') {
        this.$set(operation, "icon", "el-icon-chat-dot-round")
        this.$set(operation, "color", "#f56c6c")
        this.$set(operation, "remark", operation.userInfo.name + '  (填写拒绝理由)')
      }
      //拒绝操作
      if (state === 'refuse' && type === 'opinion') {
        this.$set(operation, "icon", "el-icon-close")
        this.$set(operation, "color", "#f56c6c")
        this.$set(operation, "remark", operation.userInfo.name + '  (拒绝)')
      }
      return operation;
    },
  }
}
</script>

<style scoped>

/deep/ .el-card__body, .el-main {
  padding: 10px;
}

</style>
