<script setup lang="ts">
import { reactive, ref, toRaw } from 'vue'
import { ElMessage, type FormProps, type UploadFile, type FormRules, type FormInstance } from 'element-plus'
import { type complaintData, delFileById, getDict, saveComplaint } from '@/views/complaint/type'

const labelPosition = ref<FormProps['labelPosition']>('right')
const fileList = ref([])
const complaintFormRef = ref<FormInstance>();
const dickArr = ref<any>([]);
const dickMap = new Map();
const complaintForm = reactive<complaintData>({
  name: '',
  phone: '',
  remark: '',
  title: '',
  type: '',
  content:'',
  unifiedSocialCreditCode:'',
  enterpriseName:'',
  files:[],
  card:''
})
const upload = reactive<any>({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_URL + '/commonFile/uploadFile',
})
const handleRemove =async (file:any)=>{
  const res = await delFileById(file.response.data.id);
  if(res.code == 200){
    ElMessage.success('删除成功')
    complaintForm.files = complaintForm.files.filter(item=>item.id != file.response.data.id)
  }
}
const handleSuccess = (res:any)=>{
  complaintForm.files.push(res.data)
  if(res.code == 200){
    ElMessage.success('上传成功')
  }
}
const uploadComplaint = (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await saveComplaint(toRaw(complaintForm));
      if(res.code == 200){
        ElMessage.success(res.msg)
        complaintFormRef.value?.resetFields()
      }
    }
  })
}
const rules = reactive<FormRules>({
  type: [
    { required: true, message: '请选择投诉类型', trigger: 'change' },
  ],
  title:[
    { required: true, message: '请输入投诉标题', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  enterpriseName:[
    { required: true, message: '请输入企业名称', trigger: 'blur' }
  ],
  unifiedSocialCreditCode:[
    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
    { min: 15, max: 18, message: '长度在 15-18 个字符', trigger: 'blur' },
  ],
  content:[
    { required: true, message: '请输入投诉内容', trigger: 'blur' }
  ],
  card:[
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    {
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '请输入正确的身份证号',
      trigger: 'blur',
    },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
})
const resetForm = (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  formEl.resetFields()
}
const init =async ()=>{
  let res = await getDict('crm_complaint_category');
  dickArr.value = res.data;
  dickArr.value.forEach((item:any)=>{
    let k = item.dictValue;
    let v = item.dictLabel;
    dickMap.set(k,v)
  })
}
init();

</script>

<template>
  <div class="complaintContainer pb-30px">
    <div class="w-912px mr-a ml-a">
<!--      <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 class="text-30px text-black line-height-30px font-weight-bold text-center">提交投诉</div>
      <div style="margin: 20px" />
      <el-form
        :label-position="labelPosition"
        label-width="auto"
        :model="complaintForm"
        style="max-width: 912px"
        :rules="rules"
        ref="complaintFormRef"
      >
        <el-form-item label="投诉类型" prop="type">
          <!--          <el-input v-model="form.type" placeholder="请输入投诉类型" />-->
          <el-select v-model="complaintForm.type" placeholder="请输入投诉类型">
            <el-option
              v-for="dict in dickArr"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="complaintForm.title" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="complaintForm.name" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="complaintForm.phone" />
        </el-form-item>
        <el-form-item label="身份证号" prop="card">
          <el-input v-model="complaintForm.card" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
          <el-input v-model="complaintForm.unifiedSocialCreditCode" />
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="complaintForm.enterpriseName" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="complaintForm.content" type="textarea" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="complaintForm.remark" />
        </el-form-item>
        <el-form-item label="图片文件" prop="files">
          <el-upload
            ref="uploadRef"
            v-model:file-list="fileList"
            :action="upload.url"
            list-type="picture-card"
            :multiple="true"
            accept=".jpg, .png"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :headers="upload.headers"
            :data="{moduleName:'投诉模块'}"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>


        </el-form-item>
        <el-button type="primary" @click="uploadComplaint(complaintFormRef)">提交投诉</el-button>
        <el-button @click="resetForm(complaintFormRef)">重置</el-button>
      </el-form>
    </div>
  </div>
</template>

<style scoped>

</style>