<script setup lang="ts">
import { getDict, type messageData, saveMessage } from '@/views/message/type'
import { reactive, ref, toRaw, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { saveComplaint } from '@/views/complaint/type'
  const dickArr = ref<{dictValue:string,dictLabel:string}[]>([{dictLabel:'',dictValue:''}]);
  const dickMap = ref();
  const messageFormRef = ref();

  const messageForm = reactive<messageData>({
    card: '',
    content: '',
    enterpriseName: '',
    name: '',
    phone: '',
    type: 'personal_message',
    unifiedSocialCreditCode: ''
  })
  const unifiedSocialCreditCodeRuleValid = (rule: any, value: any, callback: any) => {
    if(messageForm.type == 'personal_message') callback();
    if (value == '') {
      callback(new Error('请输入企业统一社会信用代码'))
    }
    if (value.length != 15 && value.length != 18) {
      callback(new Error('请输入正确的企业统一社会信用代码'))
    }
    callback()
  }
const enterpriseNameRuleValid = (rule: any, value: any, callback: any) => {
  if(messageForm.type == 'personal_message') callback();
  if (value === '') {
    callback(new Error('请输入企业名称'))
  }
  callback()
}
  const rules = reactive<FormRules<typeof messageForm>>({
    type: [
      { required: true, message: '请选择投诉类型', trigger: 'change' }
    ],
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', 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' }
    ],
    unifiedSocialCreditCode: [
      { required: true, message: '请输入企业统一社会信用代码', trigger: 'blur' },
      { validator: unifiedSocialCreditCodeRuleValid, trigger: 'blur' }
    ],
    enterpriseName: [
      { required: true, message: '请输入企业名称', trigger: 'blur' },
      { validator: enterpriseNameRuleValid, trigger: 'blur' }
    ]
  })
  const uploadMessage = (formEl:FormInstance | undefined)=>{
    // console.log(messageForm)
    // console.log(formEl)
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        const res = await saveMessage(toRaw(messageForm));
        if(res.code == 200){
          ElMessage({
            message: res.msg,
            type: 'success'
          })
          formEl.resetFields()
        }else {
          ElMessage({
            message: res.msg,
            type: 'error'
          })
        }
      }
    })
  }
  const resetForm = (formEl: FormInstance | undefined)=>{
    if (!formEl) return
    formEl.resetFields()
  }
  const init =async ()=>{
    let res = await getDict('message_type');
    dickArr.value = res.data;
    dickMap.value = dickArr.value.reduce((acc:any,cur:{dictValue:string,dictLabel:string})=>{
      acc.set(cur.dictValue,cur.dictLabel);
      return acc;
    },new Map());
  }
  init();
</script>

<template>
  <div class="messageContainer pb-30px">
    <div class="w-912px ml-a mr-a">
      <div class="text-30px text-black line-height-30px font-weight-bold text-center">向我们提交留言</div>
      <div style="margin: 20px" />
      <el-form
        label-width="auto"
        :model="messageForm"
        style="max-width: 912px"
        :rules="rules"
        ref="messageFormRef"
      >
        <el-form-item label="投诉类型" prop="type">
          <!--          <el-input v-model="form.type" placeholder="请输入投诉类型" />-->
          <el-select v-model="messageForm.type" placeholder="请输入投诉类型" :default-first-option="true">
            <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="name">
          <el-input v-model="messageForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="messageForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="身份证号" prop="card">
          <el-input v-model="messageForm.card" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" v-if="messageForm.type == 'company_message'" >
          <el-input v-model="messageForm.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName" v-if="messageForm.type == 'company_message'">
          <el-input v-model="messageForm.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="messageForm.content" type="textarea" rows="8" placeholder="请输入留言内容" />
        </el-form-item>
        <el-button type="primary" @click="uploadMessage(messageFormRef)">提交投诉</el-button>
        <el-button @click="resetForm(messageFormRef)">重置</el-button>
      </el-form>
    </div>
  </div>
</template>

<style scoped>

</style>