<template>
  <BasicModal
    :title="<% if (enableTranslation) { %>t('layout.header.dropdownChangeApi')<% } else { %>'t$t('layout.header.dropdownChangeApi')$t$'<% } %>"
    v-bind="$attrs"
    @register="register"
    @ok="handelSubmit"
    @cancel="handelCancel"
  >
    <BasicForm @register="registerForm">
      <template #api="{ model, field }">
        <RadioGroup v-model:value="model[field]">
          <Radio :style="radioStyle" :value="key" v-for="(val, key) in addresses" :key="key"
          >{{ key }}: {{ val }}</Radio
          >
        </RadioGroup>
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { Radio } from 'ant-design-vue';
<%_ if (enableTranslation) { _%>
import { useI18n } from '@/hooks/web/useI18n';
<%_ } _%>
import { BasicModal, useModalInner } from '@begcode/components';
import { BasicForm, useForm } from '@begcode/components';
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import type { ApiAddress } from '#/store';
const appStore = useAppStore();
const RadioGroup = Radio.Group;
<%_ if (enableTranslation) { _%>
const { t } = useI18n();
<%_ } _%>
const [register, { closeModal }] = useModalInner(async () => {
  initData();
});
// perf 能读取所有.env.xxx文件最好, 另外key与--mode XXX最好相同
const addresses = ref({
  development: 'http://www.a.com',
  test: 'http://www.b.com',
  prod: 'http://www.c.com',
});
const radioStyle = ref({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
const [registerForm, { validateFields, setFieldsValue }] = useForm({
  showActionButtonGroup: false,
  schemas: [
    {
      field: 'api',
      label: <% if (enableTranslation) { %>t('layout.header.dropdownChangeApi')<% } else { %>'t$t('layout.header.dropdownChangeApi')$t$'<% } %>,
      colProps: {
        span: 24,
      },
      defaultValue: import.meta.env.MODE || 'development', // 当前环境
      required: true,
      // component: 'Input',
      slot: 'api',
    },
  ],
});
const handelSubmit = async () => {
  const values = await validateFields();
  appStore.setApiAddress({
    key: values.api,
    val: addresses.value[values.api],
  });
  location.reload();
};
const handelCancel = () => {
  closeModal();
};
const initData = () => {
  const { key = '' } = appStore.getApiAddress as ApiAddress;
  if (key) {
    setFieldsValue({
      api: key,
    });
  }
};
</script>
<style lang="less"></style>
