<!-- 证书模板管理详情弹窗 -->
<script lang="ts" setup name="CertTempateDetail">
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import showPhoto from '../showPhoto.vue'
import { UploadFile } from '@/api/measure/file'
import { uploadApi } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
import { getPhotoUrl, listPageApi, templateAdd, templateUpdate } from '@/api/system/tool'
import ExcelEdit from '@/views/business/lab/excelEdit/excelEditDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
// 用户信息
const emits = defineEmits(['resetData'])
const { proxy } = getCurrentInstance() as any
const user = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm = reactive({
  templateNo: '', // 模板编号
  templateName: '', //  模板名称
  certificationType: '', // 模板类型
  templateCreator: '', // 负责人
  templateDesc: '', // 内容描述
  createTime: '', // 创建时间
  minioFileName: '', // 附件
  id: '',
}) // 表单
const title = ref('')
const loading = ref(false)
const rules = ref<FormRules>({
  templateName: [{ required: true, message: '模板名称必填', trigger: 'blur' }],
  certificationType: [{ required: true, message: '模板类型必填', trigger: 'blur' }],
  templateCreator: [{ required: true, message: '负责人必填', trigger: 'blur' }],
  minioFileName: [{ required: true, message: '附件必填', trigger: 'blur' }],
  createTime: [{ required: true, message: '创建时间必填', trigger: ['blur', 'change'] }],
}) // 表单验证规则
const dialogVisible = ref<boolean>(false) // 弹窗显示
// ----------------------------------------字典---------------------------------------------
const templateTypeList = ref<dictType[]>([]) // 模板类型
const getDict = () => {
  getDictByCode('certificationType').then((res) => {
    templateTypeList.value = res.data
  })
}
getDict()
// -------------------------------------------------------------------------------------------
const clearForm = () => {
  ruleForm.templateNo = '' // 模板编号
  ruleForm.templateName = '' //  模板名称
  ruleForm.certificationType = '' //  模板类型
  ruleForm.templateCreator = '' //  负责人
  ruleForm.templateDesc = '' //  内容描述
  ruleForm.createTime = ''// 创建时间
  ruleForm.minioFileName = '' // 附件
}

// 弹窗初始化
const initDialog = (row: any) => {
  clearForm()
  title.value = row.title as string
  ruleFormRef.value?.resetFields()
  dialogVisible.value = true
  if (row.title === '新增') {
    // 新增
    ruleForm.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.templateCreator = user.name // 负责人
  }
  else if (row.title === '编辑' || row.title === '详情') {
    ruleForm.templateNo = row.templateNo// 模板编号
    ruleForm.templateName = row.templateName//  模板名称
    ruleForm.certificationType = row.certificationType//  模板类型
    ruleForm.templateCreator = row.templateCreator//  负责人
    ruleForm.templateDesc = row.templateDesc//  内容描述
    ruleForm.createTime = row.createTime// 创建时间
    ruleForm.minioFileName = row.minioFileName// 附件
    ruleForm.id = row.id
  }
}
// 关闭弹窗
const close = () => {
  dialogVisible.value = false
  emits('resetData')
}
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      if (title.value === '新增') {
        templateAdd({ ...ruleForm, templateType: ruleForm.certificationType }).then((res) => {
          if (res.code === 200) {
            ElMessage.success('新增成功')
            close()
            loading.value = false
          }
        })
      }
      else {
        templateUpdate({ ...ruleForm, templateType: ruleForm.certificationType }).then((res) => {
          if (res.code === 200) {
            ElMessage.success('更新成功')
            close()
            loading.value = false
          }
        })
      }
    }
  })
}
// 取消
const resetForm = () => {
  dialogVisible.value = false
  emits('resetData')
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    uploadApi(fd).then((res) => {
      if (res.code === 200) {
        ruleFormRef.value?.clearValidate('minioFileName')
        ruleForm.minioFileName = res.data[0]
        ElMessage.success('上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
      loading.close()
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// ------------------------------------excel在线编辑--------------------------------------
const excelEditFileName = ref('') // 进行excel编辑的文件名称
const excelEditRef = ref()
// 点击ExcelEdit在线编辑按钮，打开ExcelEdit在线编辑工具
const handleClickExcelEdit = () => {
  excelEditRef.value.initDialog()
}

function getFileExtension(fileName: string) {
  // 去除前后空格（可选）
  fileName = fileName.trim()
  // 找到最后一个点的索引
  const dotIndex = fileName.lastIndexOf('.')
  // 若存在点，且点不在第一个字符，且点后有内容
  if (dotIndex > 0 && dotIndex < fileName.length - 1) {
    return fileName.slice(dotIndex + 1).toLowerCase() // 转小写（可选）
  }
  return '' // 无后缀
}

// excel初始化完成
const ExcelEditInitComplete = async () => {
  excelEditFileName.value = ruleForm.minioFileName
  if (ruleForm.minioFileName) {
    const loading = ElLoading.service({
      lock: true,
      text: '模板自动导入中，请稍后！',
      background: 'rgba(255, 255, 255, 0.8)',
    })
    const res = await getPhotoUrl(ruleForm.minioFileName)
    const certUrl = await fetch(res.data)
    const file = await certUrl.blob()
    excelEditRef.value.handleImportFile(file, ruleForm, getFileExtension(ruleForm.minioFileName))
    loading.close()
  }
}

// excel在线编辑完成自动上传证书
const handleImportFile = (blob: Blob) => {
  const file = new File([blob], excelEditFileName.value, {
    type: blob.type,
    lastModified: new Date().getTime(),
  })
  // 创建formdata对象
  const fd = new FormData()
  fd.append('multipartFile', file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      ruleForm.minioFileName = res.data[0]
      loading.close()
    }
    else {
      ElMessage.error(res.message)
      loading.close()
    }
  }).catch((e) => {
    ElMessage.error('上传失败，请联系管理员')
    console.log('上传文件失败：', e)
    loading.close()
  })
}

// ------------------------------------------------------------------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :z-index="1199" :title="title" width="65%" append-to-body class="container" @close="resetForm">
    <el-form ref="ruleFormRef" v-loading="loading" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" :class="[title === '详情' ? 'isDetail' : '']">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="模板编号" prop="templateNo">
            <el-input v-model.trim="ruleForm.templateNo" placeholder="系统自动生成" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板名称" prop="templateName">
            <el-input v-model.trim="ruleForm.templateName" :placeholder="title === '详情' ? ' ' : '模板名称'" :disabled="title === '详情'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板类型" prop="certificationType">
            <el-select
              v-model="ruleForm.certificationType"
              :disabled="title === '详情'"
              :placeholder="title === '详情' ? ' ' : '请选择模板类型'"
              style="width: 100%;"
            >
              <el-option v-for="item in templateTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="templateCreator">
            <el-input v-model.trim="ruleForm.templateCreator" :placeholder="title === '详情' ? ' ' : '负责人'" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="内容描述" prop="templateDesc">
            <el-input v-model.trim="ruleForm.templateDesc" type="textarea" style="width: 100%;" autosize :placeholder="title === '详情' ? ' ' : '内容描述'" :disabled="title === '详情'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="ruleForm.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
              clearable
              :disabled="title === '详情'"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="附件" prop="minioFileName">
        <show-photo :minio-file-name="ruleForm.minioFileName" />
        <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '-10px' : '20px' }" @click="upload">
          {{ ruleForm.minioFileName === '' ? '上传' : '更换附件' }}
        </el-button>
        <el-button v-if="proxy.hasPerm(`/lab/excelEditBtn`)" type="warning" @click="handleClickExcelEdit">
          excel在线编辑
        </el-button>
        <input v-show="title === ''" ref="fileRef" type="file" @change="onFileChange">
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button type="info" @click="resetForm">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- excel在线编辑文件 -->
  <excel-edit ref="excelEditRef" @init-complete="ExcelEditInitComplete" @handle-import-file="handleImportFile" />
</template>

<style lang="scss" scoped>
.container {
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        display: none;
      }
    }
  }
}
</style>