<script>
import AiDetail from "@/components/AiDetail.vue";
import AiSelect from "@/components/AiSelect.vue";
import {engines, languages} from "@/view/media/i18n";

export default {
  name: "imageTranslate",
  components: {AiSelect, AiDetail},
  data() {
    return {
      form: {},
    }
  },
  computed: {
    languages: () => Object.entries(languages).map(([k, v]) => ({dictName: v, dictValue: k})),
    engines: () => Object.entries(engines).map(([k, v]) => ({dictName: v, dictValue: k})),
  }
}
</script>

<template>
  <ai-list class="imageTranslate">
    <ai-title slot="title" title="图片翻译" isShowBottomBorder/>
    <template #content>
      <el-form size="mini" label-width="120px">
        <el-collapse>
          <el-collapse-item title="翻译参数" name="1">
            <el-form-item label="翻译引擎">
              <ai-select v-model="form.translator" :select-list="engines"/>
            </el-form-item>
            <el-form-item label="翻译语言">
              <ai-select v-model="form.targetLang" :select-list="languages"/>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </template>
  </ai-list>
</template>

<style scoped lang="scss">
.imageTranslate {
}
</style>
