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

const collapseData = ref([])
const activeName = 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">
    <div class="app-container__body">
      <IconTitle :icon="pageIcon" title="系统参数" />
      <div class="box">
        <div class="line"></div>
        <div class="content">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="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-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  .box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #fff;
    .line {
      width: 100%;
      height: 2px;
      border-radius: 5px 5px 0px 0px;
      background: linear-gradient(
        90deg,
        rgba(33, 103, 217, 1) 0%,
        rgba(17, 200, 250, 1) 34.03%,
        rgba(33, 103, 217, 1) 64.58%,
        rgba(48, 128, 255, 1) 100%
      );
    }
    .content {
      padding: 28px 30px;
      flex: 1;
      overflow: hidden;
      :deep(.el-tabs--top){
        height: 100%;
        .el-tab-pane{
          height: 100%;
        }
      }
      :deep(.el-tabs__content){
        flex: 1;
        overflow: hidden;
      }
      .contentActive {
        height: 100%;
        .item {
          display: flex;
          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;
          }
        }
      }
    }
  }
}
</style>