<template>
  <ele-page>
    <el-card>
      <el-button
        class="ele-btn-icon"
        :icon="Refresh"
        @click="reload()"
        :loading="configLoading"
      >
        刷新
      </el-button>
      <el-button
        type="danger"
        class="ele-btn-icon"
        :icon="Refresh"
      >
        同步配置
      </el-button>
    </el-card>
    <ele-card :body-style="{ paddingTop: '8px' }" v-loading="configLoading">
      <template #header>
        <ele-tabs
          type="tag"
          v-model="configGroup"
          :items="groupItems"
          @tabChange="reload()"
        />
      </template>
      <el-form
        ref="formRef"
        :model="form"
        label-position="top"
        @submit.prevent=""
      >
        <config-form-list :config-list="configList" v-if="configList.length > 0" />
      </el-form>
    </ele-card>
  </ele-page>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {Refresh} from "@element-plus/icons-vue"
import {listConfig} from "@/api/system/config";
import {getSysConfig, strToBind, strToOption} from "@/utils/sys-config";
import {useFormData} from "@/utils/use-form-data";
import type {Config} from "@/api/system/config/model";
import ConfigFormList from "./components/config-form-list.vue";

defineOptions({name: 'SystemConfigSet'});

/** 表单数据 */
const [form, resetFields, assignFields] = useFormData<Config>({});
const configList = ref([]);
const configLoading = ref(false);
/** 搜索 */
const reload = () => {
  configLoading.value = true;
  listConfig({group: configGroup.value, limit: 999}).then((data) => {
    const configs = data.filter(d => d.type !== 'hidden');

    configList.value = configs.map(d=>{
      // 解析vBind属性到item
      d.bind = strToBind(d.type, d.vBind);
      d.options = strToOption(d.type, d.options);

      if(d.type =='card' || d.type == 'collapse'){
        d.children = [
          {
            "id": 6,
            "pid": 0,
            "name": "test_password",
            "title": "系统密码",
            "group": "base",
            "type": "password",
            "value": "123456",
            "options": "",
            "tips": "",
            "sort": 100,
            "status": 1,
            "vBind": null,
            "createTime": "2025-08-22 16:50:23",
            "updateTime": "2025-08-22 16:50:23",
            "deleteTime": null
          },
          {
            "id": 4,
            "pid": 0,
            "name": "test_textarea",
            "title": "测试配置",
            "group": "base",
            "type": "textarea",
            "value": "测试配置",
            "options": "",
            "tips": "",
            "sort": 100,
            "status": 1,
            "vBind": null,
            "createTime": "2025-08-22 15:40:19",
            "updateTime": "2025-08-22 16:40:31",
            "deleteTime": null
          },
          {
            "id": 3,
            "pid": 0,
            "name": "test_text",
            "title": "站点名称",
            "group": "base",
            "type": "text",
            "value": "Ele Admin Plus",
            "options": "",
            "tips": "站点名称显示在<header>的title上",
            "sort": 100,
            "status": 1,
            "vBind": null,
            "createTime": "2025-08-22 14:11:22",
            "updateTime": "2025-08-22 16:50:32",
            "deleteTime": null
          }
        ];
        for(let a in d.children){
          d.children[a].bind = strToBind(d.children[a].type, d.children[a].vBind);
          d.children[a].options = strToOption(d.children[a].type, d.children[a].options);
        }
      }
      return d;
    });
    configLoading.value = false;
  });
};

const groupItems = ref([]);
const configGroup = ref("");
onMounted(async () => {
  // 配置分组
  const group = [];
  const {valueData} = await getSysConfig("config_group");
  for (const name in valueData) {
    group.push({name: name, label: valueData[name]})
  }
  groupItems.value = group
  if (group.length > 0) {
    configGroup.value = group[0].name
  }
  reload();
})
</script>
