<template>
  <div>
    <div class="timeLines" style="margin-bottom: 14px">
      <div style="margin-left: 10px; margin-bottom: 18px; font-size: 16px; font-weight: 600">{{ lineTitle }}</div>
      <div class="ul_box">
        <ul class="timeline-wrapper">
          <li class="timeline-item" v-for="(t, index) in list" :key="index">
            <div class="timeline-box">
              <div class="out-circle">
                <div class="in-circle" :class="addinCircle(t.list)"></div>
              </div>
              <div class="long-line"></div>
            </div>
            <div style="margin-left: 25px; margin-bottom: 4px; font-size: 16px">{{ t.nodeRole }}</div>
            <div class="timeline-content" v-if="t.list">
              <div class="timeline-date" v-for="(item, index1) in t.list" :key="index1">
                <span style="display: inline-block; margin-bottom: 15px;color:rgb(6, 208, 239)">{{ item.userName }}</span>
                <div class="timeline-title">审核时间：{{ item.approvalTime }}</div>
                <div class="timeline-title">备注：{{ item.comment ? item.comment : '无' }}</div>
                <div class="timeline-desc">
                  审核状态：
                  <span v-show="item.status == 0" style="color: rgba(14, 116, 218, 1)">待审批</span>
                  <span v-show="item.status == 1" style="color: rgb(18, 164, 52)">已抄送</span>
                  <span v-show="item.status == 2" style="color: rgb(201, 46, 46)">已撤销</span>
                  <span v-show="item.status == 3" style="color: rgb(201, 46, 46)">已驳回</span>
                  <span v-show="item.status == 4" style="color: rgba(14, 116, 218, 1)">已同意</span>
                  <span v-show="item.status == 5" style="color: rgb(230, 150, 22)">待抄送</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CreateForm',
  props: {
    list: {
      type: Array,
      required: true,
    },
    lineTitle:String
  },
  dicts: ['apply_status'],
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        userId: null,

        applicationTime: null,

        returnTime: null,

        deptId: null,

        deptName: null,

        plateNumber: null,

        carId: null,

        driverId: null,

        driverName: null,

        isNonfixedPoint: null,

        startPlace: null,

        endPlace: null,

        applyStatus: 0,

        taskId: null,

        realReturnTime: null,

        remark: null,

        createTime: null,
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {},
      reverse: false,
    //   list: [],
    }
  },
  filters: {},
  created() {},
  computed: {
    // 监听agree颜色变化
    fontstyle() {
      return (icontent) => {
        // 使用JavaScript闭包，进行传值操作
        console.log(icontent)

        if (icontent == '1') {
          return { color: 'green' }
        } else {
          return { color: 'red' }
        }
      }
    },
  },
  watch: {},
  mounted() {},
  methods: {
    addinCircle(item) {
      if (item) {
        for (let index = 0; index < item.length; index++) {
          if (item[index].status == 0) {
            return 'in-circle in-circle1'
          } else if (item[index].status == 5) {
            return 'in-circle in-circle2'
          } else if (item[index].status == 1) {
            return 'in-circle in-circle4'
          } else if (item[index].status == 4) {
            return 'in-circle in-circle3'
          } else if (item[index].status == 2 || item[index].status == 2) {
            return 'in-circle in-circle5'
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
ul.timeline-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 时间线 */
.timeline-item {
  position: relative;

  .timeline-box {
    text-align: center;
    position: absolute;

    .out-circle {
      width: 16px;
      height: 16px;
      background: rgba(14, 116, 218, 0.1);
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      /*opacity: 0.1;*/
      border-radius: 50%;
      display: flex;
      align-items: center;

      .in-circle {
        width: 8px;
        height: 8px;
        margin: 0 auto;
        background: rgba(14, 116, 218, 1);
        border-radius: 50%;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      }
      .in-circle1 {
        background: #585a58 !important;
      }
      .in-circle2 {
        background: rgba(14, 116, 218, 1) !important;
      }
      .in-circle3 {
        background-color: rgb(218, 106, 14) !important;
      }
      .in-circle4 {
        background: rgb(18, 164, 52) !important;
      }
      .in-circle5 {
        background: rgb(201, 46, 46) !important;
      }
    }

    .long-line {
      width: 2px;
      height: 248px;
      background: rgba(14, 116, 218, 1);
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      opacity: 0.1;
      margin-left: 8px;
    }
    // .long-line:nth-last-child(1) {
    //   height: 0;
    // }
  }

  .timeline-content {
    box-sizing: border-box;
    margin-left: 20px;
    // height: 106px;
    padding: 0 0 0 20px;
    text-align: left;
    // margin-bottom: 30px;

    .timeline-title {
      font-size: 14px;
      word-break: break-all;
      margin-bottom: 16px;
      color: #333;
      font-weight: 500;
      /*display: inline;*/
    }

    .timeline-date {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      margin-bottom: 16px;
    }
    .timeline-desc {
      font-size: 14px;
      color: #999999;
    }
  }
}
.timeline-item:last-child {
  .long-line {
    height: 0;
    min-height: 0;
  }
}

.timeline-item:last-of-type .timeline-content {
  margin-bottom: 0;
}
</style>
