<template>
  <div>
    <!--流程流转记录-->
    <el-card style="overflow: auto;height: 600px">
      <el-col :span="24">
        <div>
          <div style="width:50%;float:left;">
            <span class="el-icon-picture-outline">流程图</span>
            <flow :xmlData="xmlData" :taskData="taskData"></flow>
          </div>
          <div style="width:50%;;float:left;border-left: 1px solid blue">
            <el-timeline>
              <el-timeline-item v-for="(item,index ) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)" :color="setColor(item.finishTime)">
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                  <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start">
                    <div>
                      <label v-if="item.taskUserInfos" style="font-weight: normal;margin-right: 30px;">实际办理：
                        <span v-for="(items, index ) in item.taskUserInfos" :key="index">{{ items.assigneeName }},</span>
                        <!-- <el-tag type="info" size="mini">{{item.deptName}}</el-tag>-->
                      </label>
                      <label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理：{{ item.candidate }}</label><br>
                      <label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{ item.createTime }}</label><br>
                      <label v-if="item.finishTime" style="font-weight: normal">办理时间： </label>
                      <label style="color:#8a909c;font-weight: normal">{{ item.finishTime }}</label><br>
                    </div>
                    <div>
                      <label v-if="item.duration" style="font-weight: normal">耗时：</label>
                      <label style="color:red;font-weight: normal">{{ item.duration }}</label>
                    </div>
                  </div>
                  <div>
                    <p v-if="item.comment">
                      <el-tag type="success" v-if="item.comment.type === '1'"> {{ item.comment.comment }}</el-tag>
                      <el-tag type="warning" v-if="item.comment.type === '2'"> {{ item.comment.comment }}</el-tag>
                      <el-tag type="danger" v-if="item.comment.type === '3'"> {{ item.comment.comment }}</el-tag>
                      <el-tag type="success" v-if="item.comment.type === '4'"> {{ item.comment.comment }}</el-tag>
                      <el-tag type="danger" v-if="item.comment.type === '7'"> {{ item.comment.comment }}</el-tag>
                      <el-tag type="danger" v-if="item.comment.type === '6'"> {{ item.comment.comment }}</el-tag>
                    </p>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
    </el-card>
  </div>
</template>
<script>
import flow from '@C/flow/flow'

export default {
  name: 'flowRecords',
  components: {
    flow
  },
  props: {
    xmlData: {
      type: String,
      default: ''
    },
    taskData: {
      type: Array,
      default: () => []
    },
    flowRecordList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  created() {
  },
  methods: {
    setIcon(val) {
      if (val) {
        return 'el-icon-check'
      } else {
        return 'el-icon-time'
      }
    },
    setColor(val) {
      if (val) {
        return '#2bc418'
      } else {
        return '#b3bdbb'
      }
    }
  }
}
</script>
<style scoped>
.el-tag {
  white-space: normal;
  height: auto;
  line-height: 20px;
}
</style>
