<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-01-15 11:05:37
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-16 09:53:50
 * @FilePath: /huaxin-web/src/components/MySteps/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-steps :active="active">
      <el-step v-for="item in stepsData" :key="item.title">
        <template v-slot:title>
          <div>{{ item.title }}</div>
        </template>
        <template v-slot:description>
          <div class="flex t">
            <span class="mr">{{ item.a[0] }}</span>
            <span class="">{{ item.a[1] || "-" }}</span>
          </div>
          <div class="flex c">
            <span class="mr">{{ item.b[0] }}</span>
            <span class="">{{ item.b[1] || '-' }} </span>
          </div>
        </template>
      </el-step>
      <!-- <el-step
        title="已整改待处理"
        description="这是一段很长很长很长的描述性文字"
      ></el-step> -->
      <!-- <el-step title="已处理" description="这段就没那么长了"></el-step> -->
    </el-steps>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    stepsData: {
      type: Array,
      default: () => {
        return [
          // {
          //   title: "发现隐患",
          //   a: ["安检员", "小龙"],
          //   b: ["上班时间", "2024-1-10 14:40:50"],
          // },
          // {
          //   title: "已整改待复核",
          //   a: ["整改人", "韩寅生"],
          //   b: ["整改时间", "2024-1-10 14:40:50"],
          // },
          // {
          //   title: "已处理",
          //   a: ["复核人", "韩寅生"],
          //   b: ["复核时间", "2024-1-10 14:40:50"],
          // },
        ];
      },
    },
    active: {
      type: [String , Number],
      default: 1,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-step.is-horizontal .el-step__line {
    height: 4px;
    top: 6px;
    background: #eeeeee;
  }
  .el-step__head.is-process {
    color: #999999;
    border-color: #999999;
  }
  .el-step__icon.is-text {
    border-radius: 50%;
    border: none;
    color: rgba(0, 0, 0, 0);
    background: #eeeeee;
  }
  .el-step__icon {
    width: 16px;
    height: 16px;
  }
  .el-step__title {
    font-size: 14px;
  }
  .el-step__title.is-process {
    font-weight: bold;
    color: #999999;
  }
  .el-step__title.is-finish {
    color: #226aed;
  }
  .el-step__description {
    color: #3d3d3d;
  }
  .el-step__head.is-finish {
    // background: #226AED;
    // color:#226AED;
    // border-color:#226AED;
    .el-step__icon {
      background: #226aed;
    }
    .el-step__line {
      color: #226aed;
      border-color: #226aed;
      border-width: 2px !important;
    }
  }
  .el-step__line-inner {
    border-width: 2px !important;
  }
}
.mr {
  margin-right: 6px;
  width: 50px;
  text-align: right;
}
.t {
  font-size: 14px;
}
.c {
  color: #666666;
  font-size: 12px;
}
</style>
