<template>
  <div>
    <el-dialog
      :title="title"
      v-model="open"
      :loading="loading"
      width="880px"
      append-to-body
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="算子名称">
          {{ form.operator_name }}
        </el-form-item>
        <el-form-item label="算子类型">
          {{ form.oper_main_type_name
          }}<el-tag effect="plain">
            {{ form.oper_sub_type_name }}
          </el-tag>
        </el-form-item>
        <el-form-item label="适配硬件" prop="cmpt_hardware_type">
          <el-select
            v-model="form.cmpt_hardware_type"
            placeholder="请选择适配硬件类型"
            style="width: 100%"
          >
            <el-option v-for="item in listOpt" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="程序版本" prop="program_version">
          <el-input
            v-model="form.program_version"
            type="number"
            placeholder="请输入程序版本"
          />
        </el-form-item>
        <!--整数@input="filterInput"-->
        <el-form-item label="程序文件" prop="program_file_name">
          <el-upload
            ref="uploadRef"
            :action="uploadUrl"
            :headers="headersObject"
            v-model:file-list="fileList"
            class="upload-demo"
            :data="uploadData"
            :on-exceed="handleFileExceed"
            :before-upload="beforeUpload"
            :on-success="uploadsuccess"
            :auto-upload="true"
            :limit="1"
            accept="application/x-gzip"
          >
            <!--el-upload-accept 多个以逗号隔开application/x-tar-->
            <el-button type="primary"
              ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
              >选择文件</el-button
            >
            <template #tip>
              <div class="el-upload__tip">
                请上传大小不超过 <strong style="color: red">10M</strong>，格式为
                <strong style="color: red">gz</strong> 的文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="calculateParam">
import ConstApi from "@/api/const";
import OperatorApi from "@/api/operator";
import { TOKEN_KEY } from "@/enums/CacheEnum";

const open = ref(false); // 表单数据
const form = ref({}); // 表单数据
const title = ref("添加算子程序"); // 标题
const formRef = ref(ElForm); // 表单
const loading = ref(false); //  加载状态
const fileList = ref([]); //  文件列表
const uploadRef = ref(""); // 上传组件
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/operators/programs/upload"); // 上传组件
const uploadData = reactive({
  program_file_name: null,
  file_content: null,
});

// 上传请求头
const headersObject = reactive({
  Authorization: localStorage.getItem(TOKEN_KEY),
});

// 基础数据列表
let listOpt = ref([]);

// 校验规则
const rules = reactive({
  cmpt_hardware_type: [
    { required: true, message: "适配硬件不能为空", trigger: "change" },
  ],
  program_version: [{ required: true, message: "程序版本不能为空", trigger: "blur" }],
  program_file_name: [{ required: true, message: "程序文件不能为空", trigger: "blur" }],
});

const emit = defineEmits(["myQuery"]);

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      OperatorApi.addPrograms(form.value)
        .then((res) => {
          if (res.data.code == 0) {
            emit('myQuery');
            ElMessage.success("保存成功");
            cancel();
          }
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}, 3000);

// 文件上传前置方法
function beforeUpload(file) {
  uploadData.program_file_name = file.name;
  uploadData.file_content = file;
}

// 文件超出限制
function handleFileExceed() {
  ElMessage.warning("已达到上传文件限制,请删除后继续上传！");
}

//上传成功
function uploadsuccess(res,file){
  form.value.program_file_name = res.data.program_file_name;
  formRef.value.validateField("program_file_name");
}

function filterInput(event) {
  // 使用正则表达式过滤非整数字符
  form.value.program_version = event.replace(/\D/g, '');
}

/** 返回默认页面 */
function cancel() {
  open.value = false;
}

// 初始化选项列表
const initPageData = () => {
  ConstApi.cmptHardwareType().then((res) => {
    listOpt.value = res.data.data.cmpt_hardware_type_list || [];
  });
};

// 充值表单
function resetForm() {
  form.value.operator_id = null;
  form.value.operator_name = null;
  form.value.oper_main_type_name = null;
  form.value.oper_sub_type_name = null;
  form.value.cmpt_hardware_type = null;
  form.value.program_version = null;
  fileList.value = [];
}

/** 页面初始化 */
function show(data) {
  if (form.value.operator_id != data.operator_id) {
    resetForm();
    initPageData();
    form.value.operator_id = data.operator_id;
    form.value.operator_name = data.operator_name;
    form.value.oper_main_type_name = data.oper_main_type_name;
    form.value.oper_sub_type_name = data.oper_sub_type_name;
  }
  open.value = true;
}

/** 子组件默认包含是私有 */
defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.el-tag--plain {
  margin-left: 10px;
}
</style>
