<template>
  <Dialog
    v-model="visible"
    show-footer
    diaTitle="新增参数对象"
    :width="400"
    @close="closeFun"
  >
    <template #default>
      <el-form :model="formData" labelWidth="auto">
        <el-form-item label="参数库名称" >
          <el-input v-model="formData.parameterLibraryName" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="formData.parameterLibraryCategoryName" disabled></el-input>
        </el-form-item>
        <el-form-item label="参数对象名称">
          <el-input v-model="formData.parameterLibraryCategoryObjectName" ></el-input>
        </el-form-item>
        <el-form-item label="参数文件">
          <el-tooltip
            placement="top"
            content="例：[{'parameterName': 'parameterName','parameterValue': 'parameterValue', 'unit': 'unit', 'description': 'description'}]"
          >
            <div class="tip">参数对象上传的JSON文件格式必须遵守格式要求，否则无法解析！</div>
          </el-tooltip>
          <el-tag v-if="formData.fileName" closable @close="deleteParamFile"> {{ formData.fileName }}</el-tag>
          <el-upload
            v-else
            :show-file-list="false"
            :before-upload="beforeUploadFun"
            accept=".json"
          >
            <el-button type="primary">上传参数文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeFun">取消</el-button>
        <el-button type="primary" @click="onConfirmFun">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import { ElMessage } from 'element-plus';

const emits = defineEmits(['close', 'createFn']);
const props = defineProps(['libTypeInfo']);
const visible = ref(true);
const formData = reactive<any>({
  parameterLibraryName: '',
  parameterLibraryCategoryName: '',
  parameterLibraryCategoryObjectName: '',
  file: {},
  fileName: '',
});

const closeFun = () => {
  emits('close');
};

const onConfirmFun = () => {
  if (!formData.parameterLibraryCategoryObjectName) {
    ElMessage.warning('请输入参数类型名称！');
    return;
  } else if (!formData.fileName) {
    ElMessage.warning('请请上传对应参数文件');
    return;
  } else {
    emits('createFn', formData);
  }
};

const beforeUploadFun = (file: any) => {
  formData.file = file;
  formData.fileName = file.name;
};

const deleteParamFile = () => {
  formData.fileName = '';
  formData.file = {};
};

onMounted(() => {
  if (props.libTypeInfo) {
    formData.parameterLibraryName = props.libTypeInfo.libName;
    formData.parameterLibraryCategoryName = props.libTypeInfo.name;
    formData.parameterLibraryId = props.libTypeInfo.libId;
    formData.parameterLibraryCategoryId = props.libTypeInfo.id;
  }
});
</script>

<style lang="scss" scoped>
.upload {
  width: 100%;
}
.dialog-footer {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tip {
  padding-bottom: 10px;
  font-size: 12px;
  line-height: 14px;
  color: var(--el-text-color-secondary);
}
</style>
