<template>
  <div>
    <ul  v-if="mm" class="card-list">
      <li v-for="item in list" :key="item.id" class="card-item">
        <div class="card">
          <div class="card-header">
            <i class="el-icon-loading" style="color: rgba(60,52,182,0.63)"></i>
            <span class="code">{{ item.code }}</span>
          </div>
          <div class="card-content">
            <p class="name">故障码描述：{{ item.name }}</p>
            <p class="status">可用状态：{{ item.status }}</p>
          </div>
          <div class="card-footer">
            <el-button @click="doEdit(item.id)">编辑信息</el-button>
            <el-button @click="doDelete(item.id)">删除信息</el-button>
          </div>
        </div>
      </li>
    </ul>
    <ul v-else class="list">
      <li v-for="item in list" :key="item.id" class="list-item">
        <span>ID: {{ item.id }}</span>
        <span>Code: {{ item.code }}</span>
        <span>Name: {{ item.name }}</span>
        <span>Status: {{ item.status }}</span>
      </li>
    </ul>
    <button @click="faultCodeQuery">查询</button>
  </div>
</template>

<script>
import { qFaultCode } from "@/api/fault";
import Layout from "@/layout/index.vue";

export default {
  name: "Fault",
  components: { Layout },
  data() {
    return {
      mm: true, // 默认为卡片风格，为false时切换成列表风格
      list: []
    };
  },
  methods: {
    // 故障码查询
    faultCodeQuery() {
      qFaultCode().then(res => {
        this.list = res.data;
      });
    },
    doEdit(id) {
      // 编辑角色逻辑
    },
    doDelete(id) {
      // 删除角色逻辑
    }
  },
  created() {
    this.faultCodeQuery();
  }
};
</script>

<style scoped lang="scss">
/* 样式设置 */
.card-list,
.list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.card-item {
  flex: 0 0 25%; /* 每行显示4个卡片 */
  margin: 10px;

}

.card {
  border: 1px solid #e55e5e;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s; /* 添加过渡效果 */
  background-color: #550c81;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-content {
  margin-top: 10px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
}

.code {
  color: #9771e0;
}

.name {
  color: #fd6c00;
}

.status {
  color: #00ff6d;
}

.list-item {
  /* 列表项样式 */
}
.card:hover {
  background-color: #0005c0; /* 鼠标悬浮时的背景色 */
}
</style>
