<template>
  <div class="uploader-cert">
    <el-input v-model="inputUrl" :placeholder="placeholder" disabled>
      <template #append>
        <el-upload action :http-request="uploadFile" :show-file-list="false" accept=".pem, .crt">
          <el-button type="primary">{{ t('common.uploadCert') }}</el-button>
        </el-upload>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: 'UploaderCert',
};
</script>
<script setup>
import adminApi from '@/app/admin/api';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const emit = defineEmits(['updateValue']);
const props = defineProps(['url', 'placeholder']);

const inputUrl = ref(props.url);
watch(
  () => props.url,
  () => {
    inputUrl.value = props.url;
  },
);

async function uploadFile(file) {
  let formData = new FormData();
  formData.append('file', file.file);
  const { code, data } = await adminApi.file.upload({}, formData);
  if (code == '200') {
    emit('updateValue', data.path);
  }
}
</script>
