<template>
  <el-form ref="ruleFormRef" :model="newFormInline" label-width="82px">
    <el-row :gutter="30">
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="国际化key" prop="key">
          <el-input
            v-model="newFormInline.key"
            placeholder="请输入国际化关键词~"
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="语言类型" prop="locale_id">
          <el-select
            v-model="newFormInline.locale_id"
            placeholder="请选择语言类型~"
            clearable
            class="w-full"
          >
            <el-option
              v-for="item in localeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="国际化值" prop="translation">
          <el-input
            v-model="newFormInline.translation"
            placeholder="请输入国际化值~"
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { LanguageInfo } from "types/system";
import { getLocaleListAPI } from "@/api/i18n";
import { message } from "@/utils/message";
const ruleFormRef = ref();
interface PropsInfo {
  title: string;
  key: string;
  locale_id: string;
  translation: string;
}

type ProsData = {
  formInline: PropsInfo;
};
const props = withDefaults(defineProps<ProsData>(), {
  formInline: () => ({
    title: "新增",
    key: "",
    locale_id: "",
    translation: ""
  })
});
const newFormInline = ref<PropsInfo>(props.formInline);
defineExpose({ newFormInline });
/**语言类型 */
const localeList = ref<LanguageInfo[]>([]);

/**
 * 获取语言类型
 */
const getLocaleList = async () => {
  const res = await getLocaleListAPI({
    page: 1,
    pageSize: 9999
  });
  if (res.success) {
    localeList.value = res.data.result;
  }
  message(res.msg, {
    type: res.success ? "success" : "error"
  });
};
onMounted(async () => {
  await getLocaleList();
});
</script>
