<template>
  <div id="file-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-form :model="form" ref="formRef" label-width="auto">
          <el-form-item label="佐证资料" prop="file">
            <component :is="CUpload" :limit="limit" :url="url" :list="form.file" @change="onChange" style="width: 100%"></component>
          </el-form-item>
          <el-col :span="24" class="btn" v-if="!noEdit">
            <el-button type="primary" @click="onSubmit()">确定</el-button>
            <el-button type="danger" @click="toReset()">取消</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import CUpload from '@/components/c-upload.vue';
import type { Ref } from 'vue';
import { ref, toRefs } from 'vue';
import type { FormInstance } from 'element-plus';
interface dataItem {}
let limit: Ref<number> = ref(6);
// let url: Ref<string> = ref('/files/freeLabel/outcome/upload');
const formRef = ref<FormInstance>();
// #region 参数传递
const props = defineProps({
  form: { type: Object, default: () => {} },
  noEdit: { type: Boolean, default: () => false },
  url: { type: String, default: () => '/files/freeLabel/upload' },
});
const { form } = toRefs(props);
const { noEdit } = toRefs(props);
const { url } = toRefs(props);
// #endregion

const emit = defineEmits(['onSubmit', 'resetForm']);
const onChange = (e: { model: string; value: Array<dataItem> }) => {
  const { model, value } = e;
  form.value[model] = value;
};
const onSubmit = () => {
  emit('onSubmit', form.value);
};
// 重置
const toReset = () => {
  form.value = { file: [] };
  emit('resetForm');
};
</script>
<style scoped>
.btn {
  text-align: center;
}
</style>
