<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
            node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-model="queryParams.facsCategory" @tab-click="facsCategoryChange">
          <el-tab-pane label="产能设施" name="E"></el-tab-pane>
          <el-tab-pane label="储能设施" name="C"></el-tab-pane>
          <el-tab-pane label="输能设施" name="W"></el-tab-pane>
          <el-tab-pane label="用能设施" name="Z"></el-tab-pane>
        </el-tabs>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="设施子类" prop="facsSubtype">
            <el-select v-model="queryParams.facsSubCategory">
              <el-option v-for="item in facsSubCategoryOptions" :label="item.name" :value="item.code" :key="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="设施名称" prop="facsName">
            <el-input v-model="queryParams.facsName" placeholder="请输入设施名称" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['basecfg:emsfacs:add']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
              v-hasPermi="['basecfg:emsfacs:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
              v-hasPermi="['basecfg:emsfacs:remove']">删除</el-button>
          </el-col>

          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="facsList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="设施代码" align="center" prop="facsCode" />
          <el-table-column label="设施名称" align="center" prop="facsName" />
          <el-table-column label="设施分类" align="center" prop="facsCategoryName" />
          <el-table-column label="设施子类" align="center" prop="facsSubCategoryName" />
          <el-table-column label="启用状态" align="center" prop="enable">
            <template slot-scope="scope">
              <span
                :style="{
                    padding: '6px 12px',
                    borderRadius: '4px',
                    display: 'inline-block',
                    textAlign: 'center',
                    cursor: 'pointer',
                    color: scope.row.enable === 0 ? 'rgb(255,159,159)' : 'rgb(117,186,255)',
                    backgroundColor: scope.row.enable === 0 ? 'rgb(255,235,235)' : 'rgb(232,244,255)'}">

                {{ scope.row.enable === 0 ? '关闭' : '启用' }}
      </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
                详情</el-button>
              <el-button size="mini" type="text"  icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
                修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['basecfg:emsfacs:remove']">
                删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

        <!-- 添加或修改能源设施/系统对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body >
          <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
            <el-form-item label="归属区域" prop="refArea">
              <treeselect v-model="form.refArea" :options="areaOptions" :show-count="true" placeholder="请选择归属园区" />
            </el-form-item>
            <el-form-item label="设施代码" prop="facsCode">
              <el-input v-model="form.facsCode" placeholder="请输入设施代码" />
            </el-form-item>
            <el-form-item label="设施名称" prop="facsName">
              <el-input v-model="form.facsName" placeholder="请输入设施名称" />
            </el-form-item>
            <el-form-item label="设施分类" prop="facsCategory">
              <el-select v-model="form.facsCategory"  style="width:100%">
                <el-option v-for="item in facsCategoryOptions" :label="item.name" :value="item.code" :key="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="设施子类" prop="facsSubCategory">
              <el-select v-model="form.facsSubCategory" style="width:100%">
                <el-option v-for="item in facsSubCategoryOptions" :label="item.name" :value="item.code" :key="item.code" />
              </el-select>
            </el-form-item>

            <el-form-item label="设备模型" prop="facsModel">
              <el-select v-model="form.facsModel" style="width:100%" @change="handleModelChange">
                <el-option
                  v-for="item in modelList"
                  :label="item.modelName"
                  :value="item.modelCode"
                  :key="item.modelCode"
                />
              </el-select>
            </el-form-item>
            <!-- 这里可以展示属性名称和属性值 -->
            <div v-if="attrList.length > 0" class="attr-list-container">
              <h3 >模型属性:</h3>
              <ul>
                <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
                  <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}):</span>
                  <!-- 使用 el-input 组件允许用户编辑属性值 -->
                  <el-input
                    v-model="attrValuesMap[attr.attrKey]"
                    placeholder="点击编辑"
                    size="small"
                   @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])">
                  </el-input>
                </li>
              </ul>
            </div>

            <h3 class="attr-list-container"  v-if="attrList.length > 0">自定义属性
            <el-form-item label="" prop="attrList"  >
              <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px" key="'customAttrs'" >
                <el-table-column label="标识" align="center" prop="attrKey">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识" />
                  </template>
                </el-table-column>
                <el-table-column label="属性名" align="center" prop="attrName">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名" />
                  </template>
                </el-table-column>
                <el-table-column label="属性值" align="center" prop="attrValue" >
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot="header">
                    <div class="operateBtns"  @click="addCustomAttr" >
                      <span>添加</span><i class="el-icon-circle-plus-outline"></i>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            </h3>

            <el-form-item label="启用状态" prop="enable">
              <el-select v-model="form.enable" style="width:100%">
                <el-option v-for="item in enableOptions"
                           :label="item.name"
                           :value="item.code"
                           :key="item.code" />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>

      <!-- 详情弹框 -->
      <el-dialog :visible.sync="showDrawer" title="设施详情">
        <div v-if="curRow">
          <!-- 设备基本信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="section-title">设施基本信息</span>
            </div>
            <div>
              <p>设施代码：{{ curRow.facsCode }}</p>
              <p>设施名称：{{ curRow.facsName }}</p>
              <p>设施名称：{{ curRow.facsCategoryName }}</p>
              <p>设施子类：{{ curRow.facsSubCategoryName }}</p>
              <p>归属区域：{{ curRow.refAreaName}}</p>
            </div>
          </el-card>

          <!-- 属性信息 -->
          <el-card class="box-card" v-if="attrData.length > 0">
            <div slot="header" class="clearfix">
              <span class="section-title">属性定义</span>
            </div>
            <div v-for="(item, index) in attrData" :key="index">
              <p>属性名称:{{ item.attrName }}</p>
              <p>属性值：{{ item.attrValue }}</p>
              <p>属性单位：{{ item.attrUnit }}</p>
              <!-- 在每个条目之后添加横线，除了最后一个条目 -->
              <div v-if="index < attrData.length - 1" class="divider"></div>
            </div>
          </el-card>

          <!-- 能力信息 -->
          <el-card class="box-card" v-if="abilityData.length > 0">
            <div slot="header" class="clearfix">
              <span class="section-title">能力定义</span>
            </div>
            <div v-for="(item, index) in abilityData" :key="index">
              <p>能力名称：{{ item.abilityName }}</p>
              <p>能力键：{{ item.abilityKey }}</p>
              <p>能力参数：{{ item.abilityParam }}</p>
              <p>能力描述：{{ item.abilityDesc }}</p>
              <!-- 在每个条目之后添加横线，除了最后一个条目 -->
              <div v-if="index < abilityData.length - 1" class="divider"></div>
            </div>
          </el-card>

          <!-- 事件信息 -->
          <el-card class="box-card" v-if="eventData.length > 0">
            <div slot="header" class="clearfix">
              <span class="section-title">事件定义</span>
            </div>
            <div v-for="(item, index) in eventData" :key="index">
              <p>事件名称：{{ item.eventKey }}</p>
              <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
              <p>事件代码：{{ item.eventCode }}</p>
              <p>外部事件代码：{{ item.extEventCode }}</p>
              <!-- 在每个条目之后添加横线，除了最后一个条目 -->
              <div v-if="index < eventData.length - 1" class="divider"></div>
            </div>
          </el-card>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {
  listFacs,
  getFacs,
  delFacs,
  addFacs,
  updateFacs,
  getFacsCategorygetByCode,
} from '@/api/basecfg/emsfacs'
import { listAllFacsCategory } from '@/api/basecfg/facscategory'
import { areaTreeSelect } from '@/api/basecfg/area'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {getModelByCode, listAllModel, listModel} from '@/api/basecfg/objModel'
import {getObjAttr} from "@/api/basecfg/objAttribute";
import { addAttrValueBatch, getAttrValue, listAttrValue} from "@/api/basecfg/objAttributeValue";
export default {
  name: 'Facs',
  components: {Treeselect},
  data() {
    return {
      attrList: [], // 属性模板数组
      attrValues: [],
      attrValuesMap: {},

      showDrawer: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 能源设施/系统表格数据
      facsList: [],
      modelList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 区域名称
      areaName: undefined,
      // 区域树选项
      areaOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 设施分类列表
      facsCategoryOptions: undefined,
      facsSubCategoryOptions: undefined,
      enableOptions: [
        {code: 0, name: '关闭'},
        {code: 1, name: '启用'}
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        facsCode: null,
        facsName: null,
        facsCategory: 'E',
        facsSubCategory: null,
        enable: null,
        refArea: null,
        customAttrs: null
      },
      // 表单参数
      form: {
        id: null,
        facsCode: null,
        facsName: null,
        facsCategory: null,
        facsSubCategory: null,
        facsModel: null,
        enable: null,
        refArea: null,
        createTime: null,
        updateTime: null,
        customAttrs: [] // 自定义属性数组
      },
      // 表单校验
      rules: {
        facsCode: [{required: true, message: '设施代码不能为空', trigger: 'blur'}],
        facsName: [{required: true, message: '设施名称不能为空', trigger: 'blur'}],
        facsCategory: [{required: true, message: '设施分类不能为空', trigger: 'change'}],
        refArea: [{required: true, message: '归属区域代码不能为空', trigger: 'blur'}]
      },
      curRow: {},
      attrData: [],
      attrUnits:[],
      abilityData: [],
      eventData: [],
      attrForm: {
        attrName: '',
        attrValue: '',
        attrUnit: '',
        attrDesc: ''
      },
      abilityForm: {
        abilityName: '',
        abilityDesc: '',
        abilityParam: ''
      },
      eventForm: {
        eventName: '',
        eventCode: '',
        eventType: '',
        extEventCode: '',
        eventDesc: ''
      },
      subDialogShow: false,
      subTitle: '',
      subKey: 'attr',
      subMap: {
        attr: '属性',
        ability: '能力',
        event: '事件'
      }
    }
  },
  watch: {
    // 根据名称筛选区域树
    areaName(val) {
      this.$refs.tree.filter(val);
    },

  },
  created() {
    this.getList()
    this.getAreaTree('Area')
    this.getAllFacsCategory()
    this.getSubCategorygetByCode()
    this.getFacsModel()
    this.$set(this.form, 'customAttrs', []);


  },
  methods: {
    /** 查询能源设施/系统列表 */
    getList() {
      this.loading = true
      listFacs(this.queryParams).then(response => {
        this.facsList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = this.$options.data().form
      this.attrList = []; // 重置属性列表
      this.attrValuesMap = {}; // 重置属性值映射
      this.form.customAttrs = []; // 重置自定义属性
      this.resetForm('form')

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.refArea = null
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加能源设施'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getFacs(id).then(response => {
        this.form = response.data
        console.log('修改按钮展示的数据', this.form)
        this.open = true
        this.title = '修改能源设施'
      })
    },
     /** 提交按钮 */
    submitForm() {
      // 重置 attrList 和 form.customAttrs
      if (!this.attrList) {
        this.attrList = [];
      }
      if (!this.form.customAttrs) {
        this.form.customAttrs = [];
      }
      // 准备要发送的数据
      let dataToSubmit = [];
      // 添加模型属性数据
      this.attrList.forEach(attr => {
        const attrName=attr.attrName;
        const attrKey = attr.attrKey;
        const attrValue = this.attrValuesMap[attrKey];
        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey);
        if (existingIndex === -1) {
          // 如果attrKey不存在于dataToSubmit中，则添加
          dataToSubmit.push({
            modelCode: this.form.facsModel, // 这里填写模型代码
            objCode: this.form.facsCode, // 这里填写设备代码
            objType: 1, // 这里填写对象类型
            attrKey: attrKey,
            attrValue: attrValue,
            attrName: attrName

          });
        }
      });
       // 添加自定义属性数据
       this.form.customAttrs.forEach(customAttr => {
         const attrName= customAttr.attrName;
         const attrKey = customAttr.attrKey;
         const attrValue = customAttr.attrValue;
         const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey);
         if (existingIndex === -1) {
           // 如果attrKey不存在于dataToSubmit中，则添加
           dataToSubmit.push({
             modelCode: '', // 这里填写模型代码
             objCode: this.form.facsCode, // 这里填写设备代码
             objType: 1, // 这里填写对象类型
             attrKey: attrKey,
             attrValue: attrValue,
             attrName:attrName
           });
         }
       });

      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFacs(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            }).catch(error => {
              console.error('修改失败:', error);
              this.$message.error('修改失败');
            });

            if (dataToSubmit.length > 0) {
              addAttrValueBatch(dataToSubmit)
                .then(response => {
                  if (response.code === 200) {
                    this.$message.success('属性添加成功');
                  } else {
                    this.$message.error('属性添加失败');
                  }
                }).catch(error => {
                console.error('属性添加失败:', error);
                this.$message.error('属性添加失败');
              });
            } else {
             // this.$message.info('没有属性需要添加');
            }
          } else {
            addFacs(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            }).catch(error => {
              console.error('新增失败:', error);
              this.$message.error('新增失败');
            });

            if (dataToSubmit.length > 0) {
              addAttrValueBatch(dataToSubmit)
                .then(response => {
                  if (response.code === 200) {
                    this.$message.success('属性添加成功');
                  } else {
                    this.$message.error('属性添加失败');
                  }
                }).catch(error => {
                console.error('属性添加失败:', error);
                this.$message.error('属性添加失败');
              });
            } else {
              // this.$message.info('没有属性需要添加');
            }
          }
        }
      })
    },
    // 设配详情
    handleDetail(row) {
      this.showDrawer = true
      this.curRow = row
      console.log("data", this.curRow)
      this.subKey = this.$options.data().subKey
      getModelByCode(this.curRow.facsModel).then(response => {
        const code = response.data
        console.log("code", code)
        this.eventData = response.data.eventList
        this.abilityData = response.data.abilityList

      })

      getObjAttr(1, this.curRow.facsCode).then(response => {
        console.log("response值", response.data);
        const attrs = response.data.attrs;
        const attrValues = response.data.attrValues;

        // 合并 attrs 和 attrValues 数组
        const mergedData = attrValues.map(attrValue => {
          const attr = attrs.find(a => a.attrKey === attrValue.attrKey);
          return {
            ...attrValue,
            attrName: attr ? attr.attrName : attrValue.attrName,
            attrUnit: attr ? attr.attrUnit : ''
          };
        });
        this.attrData = mergedData;
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal
        .confirm('是否确认删除能源设施编号为"' + ids + '"的数据项？')
        .then(function () {
          return delFacs(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'ems/basecfg/emsfacs/export',
        {
          ...this.queryParams
        },
        `facs_${new Date().getTime()}.xlsx`
      )
    },
    /** 查询区域树结构 */
    getAreaTree(tier) {
      areaTreeSelect(tier).then(response => {
        this.areaOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.refArea = data.id
      this.handleQuery()
    },
    /** 获取设施分类 **/
    getAllFacsCategory() {
      listAllFacsCategory().then(response => {
        this.facsCategoryOptions = response.data
      })
    },
    getSubCategorygetByCode() {
      getFacsCategorygetByCode(this.queryParams.facsCategory).then(response => {
        this.facsSubCategoryOptions = response.data.subtypeList || [];
      })
    },
    facsCategoryChange() {
      this.queryParams.facsSubCategory = ''
      this.getSubCategorygetByCode()
      this.handleQuery()
    },


    /**自定义属性表格*/
    addCustomAttr() {
      // 添加一个新的自定义属性
      if (!Array.isArray(this.form.customAttrs)) {
        this.form.customAttrs = [];
      }
       this.form.customAttrs.push({
         attrKey: '',
         attrName: '',
         attrValue: ''
       });
       // 强制更新视图
      this.$forceUpdate();

  },
  deleteCustomAttr(index) {
    // 删除指定索引的自定义属性
    if (this.form.customAttrs.length > 0) {
      this.form.customAttrs.splice(index, 1);
    }
  },

  /**模型属性*/
  updateAttrValue(attrKey, newValue) {
    this.attrValuesMap[attrKey] = newValue;
  },

  getFacsModel() {
    listAllModel(1).then(response => {
      this.modelList = response.data;
      this.modelList.forEach(model => {
        console.log(model.modelCode);
      });
    });
  },
  handleModelChange(modelCode) {
    if (modelCode) {
      this.getModelByCode(modelCode);
      console.log("新增的界面进入",this.form.facsCode)
      this.getObjAttr(1, this.form.facsCode);
    }
  },
  getModelByCode(modelCode) {
    getModelByCode(modelCode).then(response => {
      // this.attrList = response.data.attrList;
      const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0);
      this.attrList = filteredAttrList;

    });
  },
  getObjAttr(objType, facsCode) {
    getObjAttr(objType, facsCode).then(response => {
      // const attrs = response.data.attrs;
      const attrs = response.data.attrs.filter(attr => attr.attrType === 0);
      console.log("attrs", attrs);
      const attrValues = response.data.attrValues || []; // 确保是一个数组
      console.log("attrValues", attrValues);

      // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
      const attrValuesMap = {};

      // 遍历 attrs 数组
      attrs.forEach(attr => {
        // 查找 attrValues 数组中是否有匹配的 attrKey
        const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey);
        // 如果找到匹配的 attrValue，更新 attrValuesMap
        if (attrValueObj) {
          attrValuesMap[attr.attrKey] = attrValueObj.attrValue;
        } else {
          // 如果没有找到匹配的 attrValue，则设置为 ' '
          attrValuesMap[attr.attrKey] = '';
        }
      });

      // 更新 attrValuesMap 到组件的数据中
      this.attrValuesMap = attrValuesMap;
      console.log("Updated attrValuesMap", this.attrValuesMap);


    });
  }
}

}
</script>

<style lang="scss" scoped>

.drawer-content {
  padding: 0 20px;
}

.divider {
  border-bottom: 2px solid #ebeef5;
  margin: 10px 0;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
}

.attr-list-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  font-weight: bold;
}

.attr-list-container h3 {
  font-weight: bold;
}

.attr-item {
  list-style-type: none;
  margin-bottom: 5px;
}

.attr-name {
  font-weight: bold;
}


</style>
