<template>
  <div class="status_list flex flex-wrap">
    <div
      v-for="(item, index) in status_list"
      :key="index"
      class="status_item flex"
    >
      <div
        class="status_item_color mr-8"
        :style="{
          background: `${item.statusColor}`,
          color: color,
        }"
      ></div>
      <div class="status_item_name">{{ item.statusName }}</div>
    </div>
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "EquipmentStatusLegend",
  props: {
    color: {
      type: String,
      default: "#666",
    },
  },
  data() {
    return {
      status_list: [],
    };
  },
  mounted() {
    this.getStatus();
  },
  methods: {
    // 获取状态数据
    getStatus() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp-status/list-drop`)
        .then((res) => {
          this.status_list = res.data?.data || [];
        });
    },
  },
};
</script>
<style lang="less" scoped>
.status_list {
  .status_item {
    height: 100%;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    margin-right: 36px;
    .status_item_color {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      margin-right: 8px;
    }
  }
}
</style>
