<template>
  <div class="box">
    <div v-for="(item, index) in test" :key="index" class="li-line">
      <!-- 开始 -->
      <div v-if="item.key === 'start'" class="start-li">
        <span class="li-title">{{ item.text }}</span>
        <div>
          <span></span>
        </div>
      </div>
      <!-- 用户任务 -->
      <div v-else-if="item.key == 'user'" class="li-normal">
        <div class="li-normal_top">
          <i class="li-line"><b></b></i>
          <div>
            {{ item.text }}
          </div>
        </div>
      </div>
      <!-- 网关 -->
      <demo v-else-if="item.key == 'gateway'" :data="item.children"></demo>
      <!-- 结束 -->
      <div v-if="item.key === 'end'" class="start-li end-li">
        <div>
          <i class="li-line"><b></b></i>
          <span></span>
        </div>
        <span class="li-title" style="margin-left: 10px">
          {{ item.text }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
  import demo from './demo.vue'
  export default {
    name: 'Login',
    components: {
      demo,
    },
    data() {
      return {
        test: [
          { text: '开始', key: 'start' },
          { text: '用户任务1', key: 'user' },
          { text: '用户任务2', key: 'user' },
          { text: '用户任务3', key: 'user' },
          { text: '用户任务4', key: 'user' },
          { text: '用户任务5', key: 'user' },
          { text: '用户任务6', key: 'user' },
          { text: '用户任务7', key: 'user' },
          {
            text: '网关',
            key: 'gateway',
            children: [
              {
                text: '第一条分支12',
                key: 'gateLine',
                children: [
                  { text: '用户任务1', key: 'user' },
                  { text: '用户任务2', key: 'user' },
                ],
              },
              {
                text: '第二条分支',
                key: 'gateLine',
                children: [{ text: '用户任务', key: 'user' }],
              },
              {
                text: '第三条分支',
                key: 'gateLine',
                children: [
                  { text: '用户任务', key: 'user' },
                  {
                    text: '网关',
                    key: 'gateway',
                    children: [
                      {
                        text: '第一条分支',
                        key: 'gateLine',
                        children: [
                          { text: '用户任务1', key: 'user' },
                          { text: '用户任务2', key: 'user' },
                        ],
                      },
                      {
                        text: '第二条分支',
                        key: 'gateLine',
                        children: [{ text: '用户任务', key: 'user' }],
                      },
                      {
                        text: '第三条分支',
                        key: 'gateLine',
                        children: [{ text: '用户任务', key: 'user' }],
                      },
                    ],
                  },
                ],
              },
              {
                text: '第四条分支',
                key: 'gateLine',
                children: [{ text: '用户任务', key: 'user' }],
              },
              {
                text: '第五条分支',
                key: 'gateLine',
                children: [{ text: '用户任务', key: 'user' }],
              },
              {
                text: '第六条分支',
                key: 'gateLine',
                children: [{ text: '用户任务', key: 'user' }],
              },
            ],
          },
          { text: '用户任务8', key: 'user' },
          { text: '结束', key: 'end' },
        ],
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .li-line {
      .start-li {
        display: flex;
        align-items: center;
        > span {
          margin-right: 15px;
        }
        > div {
          display: flex;
          align-items: center;
          > span {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid #999;
            border-radius: 50%;
          }
        }
      }
      .li-normal {
        .li-normal_top {
          display: flex;
          align-items: center;
          > div {
            border: 1px solid #999;
            border-radius: 5px;
            text-align: center;
            font-size: 18px;
            color: #333;
            width: 150px;
            padding: 7px 0;
          }
        }
        .li-normal_card {
          background-color: #f5f7f9;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          width: 150px;
          padding: 10px;
          margin-top: 10px;
          .li-normal_card_top {
            font-weight: bold;
            color: #333;
          }
          .li-normal_card_users {
            label {
              font-weight: bold;
              color: #333;
            }
            > div {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
            .li-normal_card_users_btn {
              text-align: right;
            }
          }
        }
        &.li-unable {
          .li-normal_top {
            > div {
              border: 1px dashed #999;
            }
          }
        }
      }
      .li-title {
        font-size: 18px;
        color: #333;
      }
      .li-line {
        display: inline-block;
        width: 90px;
        height: 2px;
        background: #999;
        position: relative;
        b {
          position: absolute;
          width: 10px;
          height: 2px;
          background: #999;
          transform: rotate(45deg);
          right: 0;
          top: -4px;
        }
      }
      &.active {
        .li-title {
          color: #5ab9f6;
          font-weight: bold;
        }
        .li-line {
          background: #5ab9f6;

          b {
            background: #5ab9f6;
          }
        }
        .start-li > div {
          > span {
            border: 4px solid #5ab9f6;
          }
        }
        .li-normal {
          .li-normal_top {
            > div {
              border: 1px solid #5ab9f6;
              color: #5ab9f6;
              font-weight: bold;
            }
          }
        }
      }
      &.first-child {
        padding-left: 181px;
      }
    }
  }
</style>
