<!-- 供方名录 可编辑基本信息 -->
<script name="SupplierInfoBasicForEdit" lang="ts" setup>
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { ISupplierInfo } from './supplier-interface'
import { mailboxValidator, phoneValidator, postalCodeValidator, websiteValidator } from './supplier-interface'
import { UploadFile } from '@/api/file'
import type { IDictType } from '@/commonInterface/resource-interface'
import { failUpdateSupplierBasic, saveSupplierBasic, submitSupplierBasic, updateSupplierBasic } from '@/api/resource/supplier'
import useUserStore from '@/store/modules/user'

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

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

const userInfo = useUserStore()
const operationName = ref('')
const updateTime = ref('')

// 关键字段是否可以编辑
const keyFieldsDisable = ref<boolean>(true)

// 供方类型字典值
const supplierTypeDict = ref<Array<IDictType>>([])
const labCodeDict = ref<IDictType[]>([])
const groupCodeDict = ref<IDictType[]>([])

const supplierInfo = ref<ISupplierInfo>({
  id: '',
  labCode: '',
  groupCode: '',
  supplierNo: '',
  supplierName: '',
  briefName: '',
  supplierType: '',
  supplierTypeName: '',
  taxNumber: '',
  bankAccount: '',
  bankName: '',
  bankAccountNumber: '',
  director: '',
  phone: '',
  postalCode: '',
  fax: '',
  mailbox: '',
  website: '',
  companyAddress: '',
  supplierContent: '',
  minioFileName: '',
  remark: '',
  approvalStatus: '',
  approvalStatusName: '',
  processId: '',
  taskId: '',
  createUserName: '',
  createTime: '',
})

const fileNameList = ref<Array<UploadUserFile>>([])

const basicFormRef = ref()

const supplierBasicRules = ref({
  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
  groupCode: [{ required: true, message: '部门不能为空，请选择', trigger: ['change', 'blur'] }],
  supplierName: [{ required: true, message: '供方名称不能为空', trigger: 'blur' }],
  supplierType: [{ required: true, message: '供方类型不能为空，请选择', trigger: ['change', 'blur'] }],
  supplierContent: [{ required: true, message: '服务和供应内容不能为空', trigger: 'blur' }],
  phone: [{ required: true, trigger: 'blur', validator: phoneValidator }],
  postalCode: [{ message: '邮政编码为6位数字', trigger: 'blur', validator: postalCodeValidator }],
  companyAddress: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
  mailbox: [{ message: '请输入规范的邮箱', trigger: 'blur', validator: mailboxValidator }],
  website: [{ message: '请输入规范的网址', trigger: 'blur', validator: websiteValidator }],
}) // 表单验证规则

// 逻辑
// 查询人员基本信息 从缓存中直接取
const getSupplierBasicInCache = () => {
  supplierInfo.value = JSON.parse(sessionStorage.getItem('supplierInfo')!)
}

// 设置字段是否可以编辑
const setFieldsDisable = (editable: boolean) => {
  keyFieldsDisable.value = editable
}

// 保存至草稿箱
const addSupplierBase = () => {
  saveSupplierBasic(supplierInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      // 设置返回的供方id和供方编号
      supplierInfo.value.supplierNo = res.data.supplierNo
      supplierInfo.value.id = res.data.id
      // 返回保存后生成的id
      emit('afterSaveDraft', res.data.id)
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}
// 编辑草稿箱（不走流程审批）
const updateSupplierBase = () => {
  updateSupplierBasic(supplierInfo.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') {
          addSupplierBase()
        }
        else if (props.operation === 'update') {
          updateSupplierBase()
        }
      })
    }
  })
}

// 提交供方审批
const submitBasicForm = async () => {
  ElMessageBox.confirm(`是否提交审批单 ${supplierInfo.value.supplierNo}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    submitSupplierBasic({
      formId: 'zyglhggfml',
      id: supplierInfo.value.id,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success(`审批单 ${supplierInfo.value.supplierNo} 提交成功`)
        emit('commitSuccess', supplierInfo.value)
      }
      else {
        ElMessage.error(`审批单 ${supplierInfo.value.supplierNo} 提交失败：${res.message}`)
      }
    })
  })
}

// 保存并提交审批单 重新进入流程审批
const failUpdateSubmitBasicForm = async () => {
  if (!basicFormRef) { return }
  await basicFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      failUpdateSupplierBasic(supplierInfo.value).then((res) => {
        if (res.code === 200) {
          // 提示保存成功
          ElMessage.success(`审批单 ${supplierInfo.value.supplierNo} 提交成功`)
          emit('commitSuccess', supplierInfo.value)
        }
        else {
          // 提示失败信息
          ElMessage.error(`审批单 ${supplierInfo.value.supplierNo} 提交失败：${res.message}`)
        }
      })
    }
  })
}

const getFileListNames = () => {
  supplierInfo.value.minioFileName = ''
  fileNameList.value.forEach((file) => {
    supplierInfo.value.minioFileName += `${file.name},`
  })
  supplierInfo.value.minioFileName = supplierInfo.value.minioFileName?.substring(0, supplierInfo.value.minioFileName.length - 1)
}

// 上传请求
const uploadFile: any = (file: any) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      ElMessage.success('上传成功')
      fileNameList.value.pop() // 手动将选择文件时添加的数据去掉
      fileNameList.value.push({
        name: res.data[0],
        status: 'success',
      })

      getFileListNames()
      loading.close()
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('上传失败')
  })
}

// 删除已上传的文件
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  getFileListNames()
}

// 监听 显示中文 立即监听
watch(() => supplierInfo.value.supplierType, (newVal) => {
  labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
  groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
  supplierTypeDict.value = JSON.parse(sessionStorage.getItem('bizSupplierType')!)

  if (supplierTypeDict.value.length > 0) {
    const targetList = supplierTypeDict.value.filter(item => item.value === newVal)
    if (targetList.length > 0) {
      supplierInfo.value.supplierTypeName = targetList[0].name
    }
    else {
      supplierInfo.value.supplierTypeName = ''
    }
  }
}, { immediate: true })

// 监听 显示中文 立即监听
watch(() => props.operation, (newVal) => {
  if (newVal === 'create') { operationName.value = '新建' }
  else if (newVal === 'update') { operationName.value = '编辑' }

  updateTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
}, { immediate: true })

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

<template>
  <el-form ref="basicFormRef" :model="supplierInfo" :rules="supplierBasicRules" label-position="right" label-width="110" border stripe>
    <el-row v-show="props.operation !== 'detail'" :gutter="24" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-form-item label="变更类型">
          <el-input v-model="operationName" :disabled="true" />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="操作部门">
          <el-input v-model="userInfo.deptName" :disabled="true" />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="编辑人">
          <el-input v-model="userInfo.name" :disabled="true" />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="编辑时间">
          <el-input v-model="updateTime" :disabled="true" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <!-- 第一行 第一列 -->
      <el-col :span="6">
        <el-form-item label="实验室" prop="labCode">
          <el-select v-model="supplierInfo.labCode" placeholder="请选择实验室" tabindex="1" :disabled="keyFieldsDisable" style="width: 100%;">
            <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="供方名称" prop="supplierName">
          <el-input v-model="supplierInfo.supplierName" :clearable="true" tabindex="4" placeholder="请输入供方名称" :disabled="keyFieldsDisable" />
        </el-form-item>
        <el-form-item label="税号">
          <el-input v-model="supplierInfo.taxNumber" :clearable="true" tabindex="8" placeholder="请输入税号" />
        </el-form-item>
        <el-form-item label="邮编" prop="postalCode">
          <el-input v-model="supplierInfo.postalCode" tabindex="12" placeholder="请输入邮政编码" :clearable="true" />
        </el-form-item>
      </el-col>

      <!-- 第一行 第二列 -->
      <el-col :span="6">
        <el-form-item label="部门" prop="groupCode">
          <el-select v-model="supplierInfo.groupCode" placeholder="请选择部门" tabindex="2" :disabled="keyFieldsDisable" style="width: 100%;">
            <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="供方简称">
          <el-input v-model="supplierInfo.briefName" :clearable="true" tabindex="5" placeholder="请输入供方简称" />
        </el-form-item>
        <el-form-item label="银行账户名">
          <el-input v-model="supplierInfo.bankAccount" :clearable="true" tabindex="9" placeholder="请输入银行账户名" />
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input v-model="supplierInfo.fax" :clearable="true" tabindex="13" placeholder="请输入传真" />
        </el-form-item>
      </el-col>

      <!-- 第一行 第三列 -->
      <el-col :span="6">
        <el-form-item label="供方编号">
          <el-input v-model="supplierInfo.supplierNo" placeholder="供方编号，保存后自动生成" :readonly="true" :disabled="true" />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="supplierInfo.director" :clearable="true" tabindex="6" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="银行名称">
          <el-input v-model="supplierInfo.bankName" :clearable="true" tabindex="10" placeholder="请输入银行名称" />
        </el-form-item>
        <el-form-item label="邮箱" prop="mailbox">
          <el-input v-model="supplierInfo.mailbox" tabindex="14" placeholder="请输入邮箱" :clearable="true" />
        </el-form-item>
      </el-col>

      <!-- 第一行 第四列 -->
      <el-col :span="6">
        <el-form-item label="供方类型" prop="supplierType">
          <el-select v-model="supplierInfo.supplierType" tabindex="3" placeholder="请选择供方类型" style="width: 100%;" :clearable="true">
            <el-option v-for="dict in supplierTypeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
          </el-select>
          <el-input v-model="supplierInfo.supplierTypeName" type="hidden" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="supplierInfo.phone" :clearable="true" tabindex="7" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="银行账号">
          <el-input v-model="supplierInfo.bankAccount" :clearable="true" tabindex="11" placeholder="请输入银行账号" />
        </el-form-item>
        <el-form-item label="网址" prop="website">
          <el-input v-model="supplierInfo.website" :clearable="true" tabindex="15" placeholder="请输入网址， http://或http://" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row :gutter="24">
      <!-- 第一列 -->
      <el-col :span="12">
        <el-form-item label="地址" prop="companyAddress">
          <el-input v-model="supplierInfo.companyAddress" tabindex="16" placeholder="请输入地址" :clearable="true" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="服务和供应的内容" prop="supplierContent">
          <el-input v-model="supplierInfo.supplierContent" placeholder="请输入服务和供应的内容" type="textarea" tabindex="17" :rows="2" :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="supplierInfo.remark" placeholder="请输入备注信息" tabindex="18" 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-input v-model="supplierInfo.minioFileName" type="hidden" />
          <el-upload
            v-model:file-list="fileNameList"
            multiple
            :http-request="uploadFile"
            :on-remove="handleRemove"
          >
            <el-button type="primary">
              上传
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>