<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/es';
import { onMounted, reactive, toRaw } from 'vue';
import useI18n from '@/hooks/useI18n';
import { listMenu } from '@/api/system/menu';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getConfigKey, changeValue } from '@/api/system/config';
import { parseDataToTree } from '@/utils/parse-tree-utils';
import { MENU_TYPE_BUTTON } from '@/constants/menu-constants';
const { t } = useI18n();

type StateType = {
  edite: boolean;
  loading: boolean;
  open: boolean;
  default: string;
  options: any[];
};

let state: StateType = reactive({
  edite: false,
  loading: false,
  open: false,
  default: '',
  options: [],
});

/**提交保存 */
function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.system.setting.homeTip'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
      state.loading = true;
      changeValue({ key: 'sys.homePage', value: state.default })
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success(t('views.system.setting.saveSuccess'), 3);
            fnEdit(false);
          } else {
            message.error(res.msg, 3);
          }
        })
        .finally(() => {
          state.loading = false;
          hide();
        });
    },
  });
}

/**进入可编辑 */
function fnEdit(v: boolean) {
  state.edite = v;
  state.open = v;
}

onMounted(() => {
  listMenu(toRaw({ statusFlag: '1', visibleFlag: '0' })).then(res => {
    if (res.code === RESULT_CODE_SUCCESS) {
      const data: any[] = [];
      const randD = (item: any) => {
        if (item.menuType == MENU_TYPE_BUTTON) {
          return undefined;
        }
        const tmp: any = {
          label: item.menuName,
          value: item.component || item.menuPath,
          disabled: !item.component,
        };

        const children: any = [];
        if (Array.isArray(item.children) && item.children.length > 0) {
          for (const child of item.children) {
            const v = randD(child);
            if (v) {
              children.push(v);
            }
          }
        }
        if (children.length > 0) {
          tmp.children = children;
        }

        return tmp;
      };
      const arr = parseDataToTree(res.data, 'menuId');
      for (const v of arr) {
        const item = randD(v);
        if (item) {
          data.push(item);
        }
      }
      Object.assign(state.options, data);
    }
  });

  //获取当前系统设置的首页路径 111为configID
  getConfigKey('sys.homePage').then(res => {
    if (res.code === RESULT_CODE_SUCCESS && res.data) {
      state.default = res.data;
    }
  });
});
</script>

<template>
  <a-row>
    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
      <template v-if="state.edite">
        <a-form-item :label="t('views.system.setting.home')">
          <a-tree-select
            v-model:value="state.default"
            show-search
            style="width: 240px"
            :tree-data="state.options"
            tree-default-expand-all
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :placeholder="t('common.selectPlease')"
          ></a-tree-select>
        </a-form-item>

        <a-button type="primary" @click="fnSave">
          {{ t('views.system.setting.saveSubmit') }}
        </a-button>
        <a-button style="margin-left: 10px" @click="fnEdit(false)">
          {{ t('common.cancel') }}
        </a-button>
      </template>
      <template v-else>
        <a-form-item :label="t('views.system.setting.home')">
          <a-tree-select
            v-model:value="state.default"
            :disabled="true"
            style="width: 240px"
            :tree-data="state.options"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :placeholder="t('common.selectPlease')"
          ></a-tree-select>
        </a-form-item>

        <a-button type="dashed" @click="fnEdit(true)">
          {{ t('common.editText') }}
        </a-button>
      </template>
    </a-col>
    <a-col :lg="12" :md="12" :xs="24">
      <a-typography>
        <a-typography-paragraph>
          {{ t('views.system.setting.homeInstruction') }}
        </a-typography-paragraph>
      </a-typography>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped></style>
