<script setup lang="ts">

import { ref , reactive} from 'vue'
import { ElMessage, type FormInstance, type FormProps, type FormRules } from 'element-plus'
import { delImgById, saveSelfReport } from '@/views/creditServices/type'
import SmallSearch from '@/components/SmallSearch.vue'
import NewDynamics from '@/components/NewDynamics.vue'
import { downloadFile } from '@/utils/request'

const labelPosition = ref<FormProps['labelPosition']>('left')
const selfReportRef = ref<FormInstance>();
const uploadFilesList = ref<any>([]);
const selfReportForm = ref({
  contactInformation: '',
  contacts: '',
  enterpriseName: '',
  unifiedSocialCreditCode:'',
  complainantIdNumber:'',
  files:uploadFilesList.value
})
const rules = reactive<FormRules<typeof  selfReportForm.value>>({
  contactInformation: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入正确的联系电话', trigger: 'blur' }
  ],
  contacts: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
    { min: 2, max: 10, message: '请输入正确的联系人', trigger: 'blur' }
  ],
  enterpriseName: [
    { required: true, message: '请输入企业名称', trigger: 'blur' }
  ],
  complainantIdNumber:[
    { required: true,validator:(rule: any, value: any, callback: any)=>{
        if (value == '') {
          callback(new Error('请输入身份证'))
        }
        if (!/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)$/.test(value)) {
          callback(new Error('请输入正确的身份证'))
        }
        callback()
      }, trigger: 'blur' }
  ],
  unifiedSocialCreditCode: [
    { required: true,validator:(rule: any, value: any, callback: any)=>{
        if (value == '') {
          callback(new Error('请输入统一社会信用代码'))
        }
        if (!/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/.test(value)) {
          callback(new Error('请输入正确的统一社会信用代码'))
        }
        callback()
      }, trigger: 'blur' }
  ]
})
const submitReportForm = ()=>{
  selfReportRef.value?.validate( async (valid) => {
    if (valid) {
      const res = await saveSelfReport(selfReportForm.value);
      if(res.code == 200){
        ElMessage.success(res.msg);
        canSelfReport.value = false;
        reset()
      }
    }
  })
}
const reset = ()=>{
  selfReportRef.value?.resetFields();
  uploadFilesList.value = [];
  fileList.value = [];
  canSelfReport.value = true;
}
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + '/commonFile/uploadFile',
})
const handleRemove = async (uploadFile:any) => {
  const res = await delImgById(uploadFile.response.data.id);
  if(res.code == 200){
    ElMessage.success('删除成功');
    uploadFilesList.value = uploadFilesList.value.filter((item:any) => item.id != uploadFile.response.data.id);
  }
}

const handleFileSuccess = (q:any)=>{
  ElMessage.success('上传成功');
  uploadFilesList.value.push(q.data);
}
const fileList = ref([]);
const canSelfReport = ref<boolean>(true);
const BASE_URL = import.meta.env.VITE_APP_BASE_URL;

</script>

<template>
  <div class="serviceContainer">
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      你所在的位置：<span class="cursor-pointer">首页</span> > <span class="color-#006eff">企业自主上报</span>
    </div>
    <div class="flex justify-between w-912px mr-a ml-a">
      <div class="w-603px pl-24px pr-24px pt-30px text-black bg-white">
        <div>
          <el-button class="float-right" @click="downloadFile(BASE_URL+'/owSelfReporting/downloadTemplateWord','企业自主上报模版.doc')" type="success">下载上报模版</el-button>
          <div>企业自主上报信息</div>
          <div>
<!--            <el-radio-group v-model="labelPosition" aria-label="label position">-->
<!--              <el-radio-button value="left">Left</el-radio-button>-->
<!--              <el-radio-button value="right">Right</el-radio-button>-->
<!--              <el-radio-button value="top">Top</el-radio-button>-->
<!--            </el-radio-group>-->
            <div style="margin: 20px" />
            <el-form
              :label-position="labelPosition"
              label-width="auto"
              :model="selfReportForm"
              ref="selfReportRef"
              style="max-width: 600px"
              :rules="rules"
            >
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="selfReportForm.contacts" />
              </el-form-item>
              <el-form-item label="联系方式" prop="contactInformation">
                <el-input v-model="selfReportForm.contactInformation" />
              </el-form-item>
              <el-form-item label="身份证号" prop="complainantIdNumber">
                <el-input v-model="selfReportForm.complainantIdNumber" />
              </el-form-item>
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input v-model="selfReportForm.enterpriseName" />
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
                <el-input v-model="selfReportForm.unifiedSocialCreditCode" />
              </el-form-item>
              <el-upload
                ref="uploadRef"
                v-model:file-list="fileList"
                :action="upload.url"
                :on-remove="handleRemove"
                :multiple="true"
                accept=".doc, .docx, .png, .jpg, .pdf"
                :on-success="handleFileSuccess"
                :data="{moduleName:'上报模块'}"
              >
                <el-button type="primary">上传附件</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传doc docx png jpg pdf文件
                  </div>
                </template>
              </el-upload>
              <el-button @click="submitReportForm" type="primary" :disabled="!canSelfReport">上报</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form>
          </div>
        </div>
      </div>
      <div class="w-294px">
        <SmallSearch />
        <NewDynamics />
      </div>
    </div>
  </div>
</template>

<style scoped>
.serviceContainer {
  background-color: #ecf0f9;
}
</style>
