<template>
  <Dialog
    showFooter
    v-model="visible"
    show-cancel-button
    show-confirm-button
    :confirm-closable="false"
    :diaTitle="$t('工况库.导入Excel')"
    :width="500"
  >
    <template #default>
      <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
        <el-form-item prop="fileList" :label="$t('工况库.模板')">
          <el-upload
            v-model:file-list="form.fileList"
            class="upload"
            :limit="1"
            accept=".xls,.xlsx"
            ref="uploadRef"
            :auto-upload="false"
            :on-change="onUploadChangeFun"
          >
            <el-button type="primary">{{ $t('知识库.上传') }}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('工况库.导入类型')" prop="importExcelType">
          <el-radio-group v-model="form.importExcelType">
            <el-radio value="add">{{ $t('工况库.新增为新任务模板库') }}</el-radio>
            <!-- <el-radio value="cover">{{ $t('工况库.覆盖当前任务模板库') }}</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="form.importExcelType === 'add'"
          :label="$t('工况库.工况库名称')"
          prop="poolName"
        >
          <el-input v-model="form.poolName"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="onCancelFun">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="onConfirmFun">{{ $t('通用.确定') }}</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import type { FormInstance, FormRules, UploadProps } from 'element-plus';
import type { Pool } from './types';

interface Props {
  modelValue: boolean;
  poolList?: Array<Pool>;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  poolList: () => [],
});

const emits = defineEmits(['update:modelValue', 'confirm']);
const form = ref<{
  fileList: any[];
  file: any | null;
  importExcelType: string;
  poolName: string;
}>({
  fileList: [],
  file: null,
  importExcelType: 'add',
  poolName: '',
});

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      resetFun();
    }
  }
);

const resetFun = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value.resetFields();
  uploadRef.value?.clearFiles();
};
const formRef = ref<FormInstance>();
const uploadRef = ref();
interface RuleForm {
  fileList: any[] | null;
  importExcelType: string;
  poolName: string;
}
const rules = reactive<FormRules<RuleForm>>({
  fileList: [{ required: true, message: '请上传Excel文件', trigger: 'blur' }],
  importExcelType: [{ required: true, message: '请选择导入类型', trigger: 'blur' }],
  poolName: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (props.poolList && props.poolList.length > 0) {
          const isExist = props.poolList.some((item: Pool) => item.poolName === value);
          if (isExist) {
            callback(new Error('名称已存在'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});
const onUploadChangeFun: UploadProps['onChange'] = (uploadFile: any, uploadFiles: any[]) => {
  form.value.fileList = uploadFiles;
  form.value.file = uploadFile.raw || uploadFile; // 用于上传
};
const onCancelFun = () => {
  visible.value = false;
};
const onConfirmFun = async () => {
  if (!formRef.value) {
    return;
  }
  await formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.fileList && form.value.fileList.length > 0) {
        form.value.file = form.value.fileList[0];
      }
      emits('confirm', form.value);
    }
  });
};
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.upload {
  width: 100%;
}
:deep(ul.el-upload-list) {
  display: block;
  width: 100%;
}
</style>
