<template>
  <div>
    <div
      class="
        tw-flex tw-justify-between tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5
      "
    >
      <div style="color: #212534; font-size: 16px">报表默认说明</div>
      <div class="tw-flex tw-gap-2">
        <a-button type="primary" @click="handleOrgPorps">确定</a-button>
        <a-button @click="goBack">取消</a-button>
      </div>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <div v-for="(item, index) in Object.keys(orgPorps).sort()" :key="index">
        <div style="color: #3d404e; margin: 30px 0 10px 0">
          {{ codeToName(item) }}
        </div>
        <a-textarea
          v-model:value="orgPorps[item]"
          :autoSize="{ minRows: 3, maxRows: 5 }"
        ></a-textarea>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRootOrgSettings, saveOrgSetting } from "@/api/rootOrgPage";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { ORG_GLOSSARY } from "@/constants/constants";
import { goBack } from "@/utils/utils";
import { message } from "ant-design-vue";

const route = useRoute();
const orgId = +route.params.orgId;

let orgPorps = reactive<any>({});
// let orgPorps = reactive<typeof ORG_GLOSSARY>({} as any);

onMounted(async () => {
  const res = await getRootOrgSettings(orgId);
  console.log(res);
  // orgPorps = res.data;
  Object.assign(orgPorps, res.data);
});

async function handleOrgPorps() {
  await saveOrgSetting(orgId, orgPorps);
  void message.success({ content: "操作成功" });
}
function codeToName(item: any): any {
  return ORG_GLOSSARY[item as keyof typeof ORG_GLOSSARY];
}
// function codeToValue(item: any): any {
//   return orgPorps[item as keyof typeof ORG_GLOSSARY];
// }
</script>
