<!-- 委托方名录 基本信息 -->
<script name="CustomerInfoBasic" lang="ts" setup>
import type { FormInstance, UploadProps } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { ICustomerInfo } from './customer-info'
import { UploadFile } from '@/api/file'
import { failUpdateCustomerBasic, saveCustomerBasic, submitCustomerBasic, updateCustomerBasic } from '@/api/resource/customer'

const props = defineProps({
  operation: { type: String, default: '' },
})

const emit = defineEmits(['afterSaveDraft'])

const customerBasicInfo = ref<ICustomerInfo>({
  id: '',
  customerNo: '',
  customerName: '',
  deptId: '',
  contacts: '',
  mobile: '',
  phone: '',
  postalCode: '',
  address: '',
  file: '',
  remark: '',
})

const basicFormRef = ref()

// 验证手机
const phoneValidator = (rule: any, value: any, callback: any) => {
  const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (reg.test(value.trim()) === true || value.trim() === '') {
    callback()
  }
  else {
    callback(new Error('验证失败'))
  }
}

// 验证座机
const mobileValidator = (rule: any, value: any, callback: any) => {
  const reg = /^(0\d{2,3}(-)?\d{7,8})$/
  if (reg.test(value.trim()) === true) {
    callback()
  }
  else {
    callback(new Error('验证失败'))
  }
}

// 邮编校验
const postalCodeValidator = (rule: any, value: any, callback: any) => {
  const reg = /^[0-9]{6}$/
  if (reg.test(value.trim()) === true || value.trim() === '') {
    callback()
  }
  else {
    callback(new Error('验证失败'))
  }
}

const customerBasicRules = ref({
  deptId: [{ required: true, message: '委托方名称不能为空', trigger: 'blur' }],
  contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '座机电话不能为空', trigger: 'blur', validator: mobileValidator }],
  phone: [{ message: '请输入符合规范的手机号码', trigger: 'blur', validator: phoneValidator }],
  postalCode: [{ message: '邮政编码为6位数字', trigger: 'blur', validator: postalCodeValidator }],
  address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
}) // 表单验证规则

// 逻辑

// 保存至草稿箱
const addCustomerBase = () => {
  saveCustomerBasic(customerBasicInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      // 设置返回的委托方id和委托方编号
      customerBasicInfo.value.customerNo = res.data.customerNo
      customerBasicInfo.value.id = res.data.id
      emit('afterSaveDraft', res.data.id)
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}
// 编辑草稿箱（不走流程审批）
const updateCustomerBase = () => {
  updateCustomerBasic(customerBasicInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}

// 保存基本信息
const saveBasicForm = async () => {
  if (!basicFormRef) { return }

  await basicFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        if (props.operation === 'create') {
          addCustomerBase()
        }
        else if (props.operation === 'update') {
          updateCustomerBase()
        }
      })
    }
  })
}

// 提交委托方
const submitBasicForm = async () => {
  submitCustomerBasic({
    formId: 'zyglwtfml',
    id: customerBasicInfo.value.id,
  })
}

defineExpose({
  saveBasicForm,
  submitBasicForm,
})
</script>

<template>
  <app-container>
    <el-form ref="basicFormRef" :model="customerBasicInfo" :rules="customerBasicRules" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="24">
        <!-- 第一行 第一列 -->
        <el-col :span="6">
          <el-form-item label="委托方编号">
            <el-input v-model="customerBasicInfo.customerNo" placeholder="委托方编号，保存后自动生成" :readonly="true" :disabled="props.operation === 'detail'" />
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="customerBasicInfo.phone" placeholder="请输入手机号码" :clearable="true" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第二列 -->
        <el-col :span="6">
          <el-form-item label="委托方名称" prop="deptId">
            <dept-select v-model="customerBasicInfo.deptId" placeholder="请选择委托方" :disabled="props.operation !== 'create'" style="width: 100%;" />
          </el-form-item>

          <el-form-item label="邮编" prop="postalCode">
            <el-input v-model="customerBasicInfo.postalCode" placeholder="请输入邮政编码" :clearable="true" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第三列 -->
        <el-col :span="6">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="customerBasicInfo.contacts" placeholder="请输入联系人，必填项" :clearable="true" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第四列 -->
        <el-col :span="6">
          <el-form-item label="座机电话" prop="mobile">
            <el-input v-model="customerBasicInfo.mobile" placeholder="请输入座机（区号-号码）" :clearable="true" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="24">
        <!-- 第一列 -->
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="customerBasicInfo.address" placeholder="请输入地址" :clearable="true" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="customerBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :clearable="true" :rows="2" :disabled="props.operation === 'detail'" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="附件">
            <el-upload>
              <el-button type="primary">
                上传
              </el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </app-container>
</template>