<script name="newModuleForm" setup>
import { fileFormatVerification, handleFileSuccess, handleFilePreview, fileTypes, fileDesc } from '@/utils/uploadAction.js'
import { onMounted, ref } from 'vue'
import store from '@/store'
const
  uploadUrl = store.dictStore.uploadUrl,
  props = defineProps({
    data: {
      type: Object,
      default: null
    }
  }),
  formData = ref({
    formList: []
  }),
  formRef = ref(),
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  }
onMounted(() => {
  formData.value = props.data
})
defineExpose({ validForm, formData })
</script>

<template>
  <el-form
    v-if="formData&&formData.formList?.length"
    ref="formRef"
    :model="formData"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
    @submit.prevent
  >
    <el-row :gutter="40">
      <el-col
        v-for="(eachForm,order) in props.data&&props.data.formList"
        :key="order"
        :span="12"
      >
        <el-form-item
          :label="eachForm.name"
          :prop="`formList[${order}].value`"
          :rules="[{
            required:eachForm.props.required,
            message:'请完善必填内容'
          }]"
        >
          <el-input
            v-if="eachForm.props.type === '输入'"
            v-model="formData.formList[order].value"
            placeholder="请输入"
            :maxlength="eachForm.props.maxLength"
          />
          <el-input-number
            v-else-if="eachForm.props.type === '数值输入'"
            v-model="formData.formList[order].value"
            placeholder="请输入"
            :min="eachForm.props.minNumber"
            :max="eachForm.props.maxNumber"
            :controls="false"
            @mousewheel.prevent
          />
          <el-radio-group v-else-if="eachForm.props.type === '单选'" v-model="formData.formList[order].value">
            <el-radio v-for="( radioOption,radioIndex ) in eachForm.props.options" :key="radioIndex" :label="radioOption.name">{{ radioOption.name }}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-else-if="eachForm.props.type === '多选'" v-model="formData.formList[order].value">
            <el-checkbox v-for="( checkboxOption,checkboxIndex ) in eachForm.props.options" :key="checkboxIndex" :label="checkboxOption.name">{{ checkboxOption.name }}</el-checkbox>
          </el-checkbox-group>
          <el-upload
            v-else
            v-model:file-list="formData.formList[order].value"
            class="w-full"
            :limit="eachForm.props.fileNumber"
            :action="uploadUrl"
            :on-success="res => handleFileSuccess(res, formData.formList[order].value, false)"
            :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
            :accept="fileTypes.map(i=>`.${i}`).join(',')"
            :on-preview="handleFilePreview"
          >
            <el-button type="primary" plain>选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持{{ fileDesc }}文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="less">
.el-upload-list{
  width: 100%;
}
</style>
