<template>
  <el-col :span="18" style="padding-left: 20px; overflow: auto">
    <el-timeline reverse>
      <template v-for="(item, i) in list">
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-if="item.handleStatus == 2">
          <el-card>
            <p class="timeline-cell">发起人：{{ item.userName }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else-if="item.handleStatus == 3">
          <el-card>
            <p class="timeline-cell">撤回节点：{{ item.nodeName }}</p>
            <p class="timeline-cell">撤回人员：{{ item.userName }}</p>
            <p class="timeline-cell">撤回原因：{{ item.handleOpinion }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else-if="item.handleStatus == 4">
          <el-card>
            <el-row>
              <el-col :span="18">
                <p class="timeline-cell">审核节点：{{ item.nodeName }}</p>
              </el-col>
              <el-col :span="6">
                <p class="timeline-cell" style="text-align: right">
                  <el-link :underline="false" type="danger">流程终止</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{ item.userName }}</p>
            <p class="timeline-cell">执行动作：终止</p>
            <p class="timeline-cell">终止原因：{{ item.handleOpinion }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else-if="item.handleStatus == 5">
          <el-card>
            <el-row>
              <el-col :span="18">
                <p class="timeline-cell">审核节点：{{ item.nodeName }}</p>
              </el-col>
              <el-col :span="6">
                <p class="timeline-cell" style="text-align: right">
                  <el-link :underline="false" type="primary">流程委派</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{ item.userName }}</p>
            <p class="timeline-cell">执行动作：委派</p>
            <p class="timeline-cell">委派人员：{{ item.operatorName }}</p>
            <p class="timeline-cell" v-if="item.handleOpinion">委派意见：{{ item.handleOpinion }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else-if="item.handleStatus == 6">
          <el-card>
            <el-row>
              <el-col :span="18">
                <p class="timeline-cell">审核节点：{{ item.nodeName }}</p>
              </el-col>
              <el-col :span="6">
                <p class="timeline-cell" style="text-align: right">
                  <el-link :underline="false" type="primary">流程加签</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{ item.userName }}</p>
            <p class="timeline-cell">执行动作：加签</p>
            <p class="timeline-cell">加签人员：{{ item.operatorId }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else-if="item.handleStatus == 7">
          <el-card>
            <el-row>
              <el-col :span="18">
                <p class="timeline-cell">审核节点：{{ item.nodeName }}</p>
              </el-col>
              <el-col :span="6">
                <p class="timeline-cell" style="text-align: right">
                  <el-link :underline="false" type="primary">流程转办</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">执行人员：{{ item.userName }}</p>
            <p class="timeline-cell">执行动作：转办</p>
            <p class="timeline-cell">转办人员：{{ item.operatorName }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="item.handleTime | toDate()" placement="top" :key="i" v-else>
          <el-card>
            <el-row>
              <el-col :span="18">
                <p class="timeline-cell">审核节点：{{ item.nodeName }}</p>
              </el-col>
              <el-col :span="6">
                <p class="timeline-cell" style="text-align: right">
                  <el-link :underline="false" type="success" v-if="item.handleStatus == 1">审核通过 </el-link>
                  <el-link :underline="false" type="danger" v-else>审核拒绝</el-link>
                </p>
              </el-col>
            </el-row>
            <p class="timeline-cell">审核人员：{{ item.userName }}{{ item.status == 1 ? '(加签)' : '' }}</p>
            <p class="timeline-cell" v-if="item.handleOpinion">审核意见：{{ item.handleOpinion }}</p>
            <p class="timeline-cell" v-if="item.signImg">审核签名：<img :src="item.signImg" class="signImg" /></p>
          </el-card>
        </el-timeline-item>
      </template>
      <el-timeline-item :timestamp="endTime | toDate()" placement="top" v-if="endTime">
        <el-card>
          <p class="timeline-cell">流程结束</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-col>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: [] },
    endTime: { type: Number, default: 0 }
  },
  name: 'recordList'
}
</script>
