<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/lib';
import { onMounted, reactive } from 'vue';
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
import { changeValue } from '@/api/system/config';
import { CACHE_LOCAL_I18N } from '@/constants/cache-keys-constants';
import { localSet } from '@/utils/cache-local-utils';
const appStore = useAppStore();
const { t, optionsLocale } = useI18n();

type StateType = {
  edite: boolean;
  loading: boolean;
  open: boolean;
  default: string;
};

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

/**进入可编辑 */
function fnEdit(v: boolean) {
  state.edite = v;
  if (!v) {
    state.open = appStore.i18nOpen;
    state.default = appStore.i18nDefault;
  }
}

/**提交保存 */
function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.system.setting.sysOfficialUrlTipContent'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
      state.loading = true;
      Promise.all([
        changeValue({ key: 'sys.i18n.open', value: `${state.open}` }),
        changeValue({ key: 'sys.i18n.default', value: `${state.default}` }),
      ])
        .then(resArr => {
          // 不判断
          message.success(t('views.system.setting.saveSuccess'), 3);
          appStore.i18nOpen = state.open;
          appStore.i18nDefault = state.default;
          localSet(CACHE_LOCAL_I18N, state.default);
          fnEdit(false);
        })
        .finally(() => {
          state.loading = false;
          hide();
        });
    },
  });
}

onMounted(() => {
  state.open = appStore.i18nOpen;
  state.default = appStore.i18nDefault;
});
</script>

<template>
  <a-row :gutter="16">
    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
      <a-form v-if="state.edite">
        <a-form-item :label="t('views.system.setting.i18nOpen')">
          <a-switch
            :checked-children="t('common.switch.open')"
            :un-checked-children="t('common.switch.shut')"
            v-model:checked="state.open"
          ></a-switch>
        </a-form-item>
        <a-form-item :label="t('views.system.setting.i18nDefault')">
          <a-select v-model:value="state.default" style="width: 100px">
            <a-select-option
              v-for="opt in optionsLocale"
              :key="opt.value"
              :value="opt.value"
            >
              {{ opt.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <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>
        </a-form-item>
      </a-form>

      <template v-else>
        <a-form-item :label="t('views.system.setting.i18nOpen')">
          <a-switch
            :disabled="true"
            :checked-children="t('common.switch.open')"
            :un-checked-children="t('common.switch.shut')"
            v-model:checked="state.open"
          ></a-switch>
        </a-form-item>
        <a-form-item :label="t('views.system.setting.i18nDefault')">
          <a-select
            v-model:value="state.default"
            style="width: 100px"
            :disabled="true"
          >
            <a-select-option
              v-for="opt in optionsLocale"
              :key="opt.value"
              :value="opt.value"
            >
              {{ opt.label }}
            </a-select-option>
          </a-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.i18nInstruction') }}
        </a-typography-paragraph>
      </a-typography>
    </a-col>
  </a-row>
</template>

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