<script setup name="License">
import { onMounted, ref, toRefs } from 'vue'
import { queryAll } from '@/api/systemConfig/systemParam.js'

const collapseData = ref([])
const collapseValue = ref([1])

// 获取数据
const getQueryAll = async () => {
  const { data } = await queryAll({})
  initData(data)
}

const initData = (data) => {
  collapseData.value = Object.entries(data).map(([category, config]) => ({
    category,
    list: Object.entries(config).map(([key, value]) => ({
      key,
      value
    }))
  }));
}

onMounted(() => {
  getQueryAll()
})
</script>

<template>
  <div class="app-container scroller">
    <PageTitle>
      <template #title>系统参数</template>
    </PageTitle>
    <div class="app-container__body">
      <el-collapse v-model="collapseValue" accordion>
        <el-collapse-item :title="item.category" :name="index + 1" v-for="(item, index) in collapseData" :key="index">
          <div class="contentActive">
            <div style="overflow: auto; height: 100%; padding: 20px 0px;">
              <div class="item" v-for="(property, index) in item.list" :key="index">
                <div class="key">{{ property.key }}</div>
                <div class="value">{{ property.value }}</div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  .contentActive {
    height: 400px;
    .item {
      display: flex;
      height: 32px;
      color: #7a8495;
      .key {
        padding-left: 5px;
        width: 300px;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-weight: 700;
        box-sizing: border-box;
      }
      .value {
        flex: 1;
        line-height: 32px;
      }
    }
  }
  :deep(.el-collapse-item__wrap){
    border: none;
  }
  :deep(.el-collapse-item){
    margin-bottom: 6px;
  }
  :deep(.el-collapse-item__header) {
    height: 32px;
    padding-left: 20px;
    background: #7a8495;
    color: #fff;
  }
  :deep(.el-collapse-item__header.is-active) {
    background: #2c9ef7;
  }
}
</style>