<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" class="item">
      <span class="label">{{ item.name }}</span>
      <el-switch
          v-model="item.active"
          active-text="启用"
          inactive-text="停用"
          @change="handleToggle()"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
import { update } from "@/api/public/basic";
import { ElMessage } from 'element-plus';
const props = defineProps({
  moduleA: {
    type: Object,
    default: () => ({})
  }
})
const route = useRoute()
const items = ref([
  { "name": "工时", "key": "workHour", "active": true },
  { "name": "材料", "key": "materials", "active": true },
  { "name": "燃料", "key": "fuel", "active": true },
  { "name": "动力", "key": "power", "active": true },
  { "name": "费用", "key": "costs", "active": true },
  { "name": "成果", "key": "achievements", "active": true },
  { "name": "设备管理", "key": "equipment", "active": true },
  { "name": "无形资产管理", "key": "intangible", "active": true },
  { "name": "建筑物管理", "key": "building", "active": true }]);
const handleToggle = async () => {
  console.log("items",items.value);
  await update(route.query.id, {
    module: JSON.stringify(items.value)
  }, 'i1XuaQDK9zw');
  ElMessage.success('模块设置已更新');
  setTimeout(() => {
    window.location.reload();
  }, 500);
};
onMounted(() => {
  items.value = props.moduleA
})
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.item:hover {
  background-color: #e0e0e0;
}

.label {
  font-size: 16px;
  color: #333;
}

/* 调整开关样式 */
:deep(.el-switch) {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}

:deep(.el-switch__label) {
  color: #333;
  font-size: 14px;
}

:deep(.el-switch__label.is-active) {
  color: #fff;
}
</style>
