<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>请上传企业资料</span>
      </div>
    </template>
    <div class="">
      <el-form
          ref="formRef"
          :model="ruleForm"
          :rules="rules"
          label-width="145px"
          label-position="left">
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入企业名称" size="large" style="width: 343px"></el-input>
        </el-form-item>
        <el-form-item label="法人代表" prop="legalPerson">
          <el-input v-model="ruleForm.legalPerson" placeholder="请输入法人代表" size="large"
                    style="width: 343px"></el-input>
        </el-form-item>
        <el-form-item label="企业营业执照" prop="licenseImages">
          <image-upload v-model="ruleForm.licenseImages" :limit="1" :is-show-tip="false">
            <template #uploader-icon>
              <div style="text-align: center">
                <el-icon class="avatar-uploader-icon" size="32px">
                  <CirclePlusFilled/>
                </el-icon>
                <div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
                  仅支JPG，PNG，GIF，大小小于2M，最多1张
                </div>
              </div>
            </template>
          </image-upload>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
import { ref, computed, defineExpose } from 'vue'

const formRef = ref()

const ruleForm = ref({})

const rules = computed(() => {
  return {
    name: [{required: true, message: '请输入企业名称', trigger: 'blur'}],
    legalPerson: [{required: true, message: '请输入法人代表', trigger: 'blur'}],
    licenseImages: [{required: true, message: '请上传企业营业执照', trigger: 'change'}]
  }
})

defineExpose({formRef, ruleForm})

</script>

<style scoped lang="scss">
@import url('./base.scss');
</style>
