<template>
  <div class="setting-config">
    <a-spin :spinning="loading">
      <div class="config-box" v-if="settingList">
        <template v-if="settingList && settingList.length > 0">
          <div class="config-wrap">
            <!-- 左侧设置菜单 -->
            <div class="config-left">
              <a-menu
                mode="inline"
                v-model:selectedKeys="selectedKeys"
                class="setting-menu"
              >
                <a-menu-item
                  v-for="item in settingList"
                  :key="item.key"
                  @click="handleMenuClick(item.key)"
                >
                  {{ item.title }}
                </a-menu-item>
              </a-menu>
            </div>

            <!-- 右侧配置表单 -->
            <div class="config-right">
              <a-spin :spinning="detailLoading">
                <div v-if="currentSetting && currentSetting.settingInfo">
                  <div class="config-title">
                    <span>
                      {{ currentSetting.settingInfo.title }}
                      <small v-if="currentSetting.settingInfo.desc">
                        ({{ currentSetting.settingInfo.desc }})
                      </small>
                    </span>
                  </div>
                  <div v-if="!!currentSetting.settingInfo.readme">
                    <a-alert :message="currentSetting.settingInfo.readme" banner />
                  </div>
                  <div class="config-form">
                    <a-form
                      ref="formRef"
                      :model="editModel"
                      @submit.prevent
                      layout="vertical"
                    >
                      <a-form-item>
                        <IViewForm
                          ref="configFormRef"
                          v-model="editModel.settingValue"
                          model-format="json"
                          :config="configFormJson"
                          :read-only="false"
                        />
                      </a-form-item>

                      <a-form-item>
                        <a-button
                          type="primary"
                          :loading="submitLoading"
                          :disabled="submitLoading || detailLoading"
                          @click="handleSubmit"
                        >
                          保存
                        </a-button>
                      </a-form-item>
                    </a-form>
                  </div>
                </div>
                <a-empty
                  v-else-if="!detailLoading"
                  :description="detailErrorMsg || '请选择左侧配置项'"
                  style="margin-top: 60px"
                >
                  <!-- <a-button
                    v-if="detailErrorMsg && currentSettingKey"
                    @click="fetchSettingDetail"
                    size="small"
                  >
                    重新加载
                  </a-button> -->
                </a-empty>
              </a-spin>
            </div>
          </div>
        </template>
        <a-empty v-else description="暂无可配置选项">
          <a-button @click="refresh" size="small"> 刷新列表 </a-button>
        </a-empty>
      </div>
      <a-empty v-else-if="!loading" :description="errorMsg" style="margin-top: 60px">
        <a-button v-if="errorMsg" @click="refresh"> 重新加载 </a-button>
      </a-empty>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { showErrorTips, showSuccessTips } from "@/iview/utils/messageTips";
import { apiRequest } from "@/iview/utils/request";
import IViewForm from "@/iview/IViewForm.vue";

// 响应式变量
const loading = ref(false);
const errorMsg = ref(null);
const settingList = ref(null);
const detailLoading = ref(false);
const detailErrorMsg = ref(null);
const currentSetting = ref(null);
const currentSettingKey = ref("");
const selectedKeys = ref([]);
const submitLoading = ref(false);

// 编辑表单模型
const editModel = reactive({
  settingKey: "",
  settingValue: "{}",
});

// 表单引用
const formRef = ref(null);
const configFormRef = ref(null);

// 表单配置字段列表
const configFormFields = computed(() => {
  if (
    !currentSetting.value ||
    !currentSetting.value.settingInfo ||
    !currentSetting.value.settingInfo.fields
  ) {
    return [];
  }

  // 处理特殊的条件显示逻辑
  const processedFields = currentSetting.value.settingInfo.fields.map((field) => {
    // 克隆字段以避免修改原始数据
    const processedField = { ...field };
    // 处理条件逻辑 - 保留原始的条件表达式
    // CustomFormEditor组件会根据表达式动态处理显示/隐藏逻辑
    return processedField;
  });

  return processedFields;
});

// 表单配置JSON
const configFormJson = computed(() => {
  return JSON.stringify({
    fields: configFormFields.value,
  });
});

// 处理菜单点击事件
const handleMenuClick = (key) => {
  currentSettingKey.value = key;
  selectedKeys.value = [key];
  fetchSettingDetail();
};

// 获取配置详情
const fetchSettingDetail = async () => {
  if (!currentSettingKey.value) return;

  detailErrorMsg.value = null;
  detailLoading.value = true;

  try {
    // 调用真实接口获取配置详情
    const res = await apiRequest("api.system.global.setting.detail", {
      settingKey: currentSettingKey.value,
    });
    currentSetting.value = res;
    // 初始化编辑表单
    editModel.settingKey = currentSettingKey.value;
    editModel.settingValue = res.settingValue;
  } catch (err) {
    detailErrorMsg.value =
      (err && err.msg) || (err && err.message) || "连接服务器失败，请检查网络";
    currentSetting.value = null;
  } finally {
    detailLoading.value = false;
  }
};

// 获取配置列表
const refresh = async () => {
  errorMsg.value = null;
  loading.value = true;
  try {
    // 调用真实接口获取配置列表
    const res = await apiRequest("api.system.global.setting.list", {});
    // 过滤掉隐藏的设置项
    settingList.value = (res || []).filter((item) => !item.hidden);
    if (settingList.value.length > 0) {
      // 默认选中第一项
      currentSettingKey.value = settingList.value[0].key;
      selectedKeys.value = [currentSettingKey.value];
      fetchSettingDetail();
    }
  } catch (err) {
    errorMsg.value =
      (err && err.msg) || (err && err.message) || "连接服务器失败，请检查网络";
  } finally {
    loading.value = false;
  }
};

// 提交表单
const handleSubmit = async () => {
  try {
    // 如果有表单校验，进行校验
    if (configFormRef.value) {
      await configFormRef.value.validate();
    }
    submitLoading.value = true;
    // 调用真实接口保存配置
    await apiRequest("api.system.global.setting.edit", {
      settingKey: editModel.settingKey,
      settingValue: editModel.settingValue,
    });
    showSuccessTips("保存成功");
    // 重新获取配置详情，确保数据最新
    await fetchSettingDetail();
  } catch (err) {
    showErrorTips(err);
  } finally {
    submitLoading.value = false;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  refresh();
});
</script>

<style scoped>
.setting-config {
  margin-top: 0;
  height: 100%;
  min-height: 300px;
}

.config-box {
  width: 100%;
  height: 100%;
}

.config-wrap {
  display: flex;
  flex-direction: row;
  gap: 18px;
  min-height: 300px;
}

.config-left {
  width: 210px;
  flex: 0 0 210px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef6ff 0%, #ffffff 72%);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  padding: 0 10px;
}

.config-left-header {
  padding: 18px 18px 12px;
  /* background: linear-gradient(135deg, #eef6ff 0%, #ffffff 72%); */
}

.config-left-title {
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
}

.config-left-desc {
  margin-top: 4px;
  color: #8c96a8;
  font-size: 12px;
  line-height: 1.5;
}

.setting-menu {
  padding: 8px;
  border-right: none;
  background: transparent;
  border-inline-end: none !important;
}

.config-right {
  flex: 1;
  min-height: 300px;
  min-width: 0;
}

.config-panel {
  overflow: hidden;
  min-height: 300px;
  background: #ffffff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
}

.config-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 70%);
}

.config-title-text {
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.config-title-desc {
  margin-top: 6px;
  color: #8c96a8;
  font-size: 13px;
  line-height: 1.6;
}

.config-readme {
  margin: 0 24px 4px;
}

.config-form {
  padding: 20px 24px 6px;
  position: relative;
}

.config-btns {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.config-empty {
  padding: 20px 0;
}

@media screen and (min-width: 769px) {
  .setting-config,
  .config-box,
  .config-wrap,
  .config-left,
  .config-right,
  .config-panel {
    min-height: calc(100vh - 220px);
  }
}

/* 修复表单叠加问题 */
:deep(.ant-form) {
  display: block;
  width: 100%;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.custom-form-editor) {
  display: block;
  width: 100%;
}

:deep(.ant-form-item-control) {
  display: block;
  flex: 1 1 auto !important;
}

:deep(.ant-form-item-control-input) {
  min-height: unset !important;
  width: 100%;
}

:deep(.ant-textarea-wrapper) {
  width: 100%;
}

:deep(.ant-input-textarea) {
  height: auto;
}

:deep(.setting-menu .ant-menu-item) {
  height: 40px;
  margin: 4px 0;
  border-radius: 10px;
  color: #475569;
}

:deep(.setting-menu .ant-menu-item-selected) {
  color: #1677ff;
  font-weight: 600;
  background: rgba(22, 119, 255, 0.1);
}

:deep(.config-readme .ant-alert) {
  border: none;
  border-radius: 10px;
  background: #f6faff;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .config-wrap {
    flex-direction: column;
  }

  .config-left {
    width: 100%;
    flex: none;
    border: none;
  }

  .config-right {
    padding: 0;
  }

  .config-btns {
    justify-content: flex-end;
  }

}
</style>
