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

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

const emit = defineEmits(['afterSaveDraft', 'commitSuccess'])

// 是否可以编辑
const fieldsEditable = ref<boolean>(false)
const keyFieldsEditable = ref<boolean>(false)

const customerLocationDictInChild = ref<Array<IDictType>>([])

const customerBasicInfo = ref<ICustomerInfo>({
  id: '',
  customerNo: '',
  customerName: '',
  deptId: '',
  customerLocation: '',
  customerLocationName: '',
  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' }],
  customerLocation: [{ required: true, message: '委托方所在地不能为空，请选择', trigger: ['change', '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 getCustomerBasicInCache = () => {
  customerBasicInfo.value = JSON.parse(sessionStorage.getItem('customerInfo')!)
}

// 设置字段是否可以编辑
const setFieldsEditable = (editable: boolean, keyEditable: boolean) => {
  fieldsEditable.value = editable
  keyFieldsEditable.value = keyEditable
}

// 保存至草稿箱
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 () => {
  ElMessageBox.confirm(`是否提交审批单 ${customerBasicInfo.value.customerNo}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    submitCustomerBasic({
      formId: 'zyglwtfml',
      id: customerBasicInfo.value.id,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success(`审批单 ${customerBasicInfo.value.customerNo} 提交成功`)
        emit('commitSuccess', customerBasicInfo.value)
      }
      else {
        ElMessage.error(`审批单 ${customerBasicInfo.value.customerNo} 提交失败：${res.message}`)
      }
    })
  })
}

// 保存并提交审批单
const saveAndSubmitBasicForm = async () => {
  if (!basicFormRef) { return }
  await basicFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      updateCustomerBasic(customerBasicInfo.value).then((res) => {
        if (res.code === 200) {
          // 提示保存成功
          submitBasicForm()
        }
        else {
          // 提示失败信息
          ElMessage.error(`保存失败：${res.message}`)
        }
      })
    }
  })
}

// 监听 显示中文 立即监听
watch(() => customerBasicInfo.value.customerLocation, (newVal) => {
  if (customerLocationDictInChild.value.length === 0) {
    customerLocationDictInChild.value = JSON.parse(sessionStorage.getItem('customerLocationDict')!)
  }
  const targetList = customerLocationDictInChild.value.filter(item => item.value === newVal)
  if (targetList.length > 0) {
    customerBasicInfo.value.customerLocationName = targetList[0].name
  }
  else {
    customerBasicInfo.value.customerLocationName = ''
  }
}, { immediate: true })

defineExpose({
  getCustomerBasicInCache,
  setFieldsEditable,
  saveBasicForm,
  submitBasicForm,
  saveAndSubmitBasicForm,
})
</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="!keyFieldsEditable" />
          </el-form-item>
          <el-form-item label="座机电话" prop="mobile">
            <el-input v-model="customerBasicInfo.mobile" placeholder="请输入座机（区号-号码）" :clearable="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第二列 -->
        <el-col :span="6">
          <el-form-item label="委托方名称" prop="deptId">
            <dept-select v-model="customerBasicInfo.deptId" placeholder="请选择委托方" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="customerBasicInfo.phone" placeholder="请输入手机号码" :clearable="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第三列 -->
        <el-col :span="6">
          <el-form-item label="委托方所属地" prop="customerLocation">
            <el-select v-model="customerBasicInfo.customerLocation" placeholder="请选择委托方所在地" style="width: 100%;" :clearable="true">
              <el-option v-for="dict in customerLocationDictInChild" :key="dict.id" :label="dict.name" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="邮编" prop="postalCode">
            <el-input v-model="customerBasicInfo.postalCode" placeholder="请输入邮政编码" :clearable="true" />
          </el-form-item>
        </el-col>

        <!-- 第一行 第四列 -->
        <el-col :span="6">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="customerBasicInfo.contacts" placeholder="请输入联系人，必填项" :clearable="true" />
          </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" />
          </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" />
          </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>