<!-- 编辑文件列表弹窗 -->
<script name="EditFileItemDialog" lang="ts" setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import type { IFileForm } from '../approval-interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { UploadFile } from '@/api/file'
import { getStaffList } from '@/api/resource/register'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import useUserStore from '@/store/modules/user'
const emits = defineEmits(['confirm'])
const user = useUserStore() // 用户信息
const formRef = ref()
const form = ref<IFileForm>({
  labCode: '', // 实验室
  labCodeName: '', // 实验室名称
  groupCode: '', // 部门
  groupCodeName: '', // 部门名称
  fileCategory: '', // 文件类型
  fileCategoryName: '', // 文件类型名称
  fileNo: '', // 文件编号
  fileName: '', // 文件名称
  fileVersion: '', // 版本号
  promulgateTime: '', // 颁布日期
  executeTime: '', // 实施日期
  createrName: '', // 编制人
  createrId: '', // 编制人Id
  wordUrl: '', // 文件附件(word版)
  pdfUrl: '', // 文件附件(pdf版)
  remark: '', // 备注
  id: '',
})
const loading = ref(false)
const fileChangeApplyCode = ref() // 更改文件申请单的编号
const dialogVisible = ref(false) // 弹窗显示状态
// 校验规则
const rules = reactive<FormRules>({
  labCode: [{ required: true, message: '实验室必填', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '部门必填', trigger: ['blur', 'change'] }],
  fileCategory: [{ required: true, message: '文件类型必填', trigger: ['blur', 'change'] }],
  fileNo: [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }],
  fileName: [{ required: true, message: '文件名称必填', trigger: ['blur', 'change'] }],
  fileVersion: [{ required: true, message: '版本号必填', trigger: ['blur', 'change'] }],
  promulgateTime: [{ required: true, message: '颁布日期必填', trigger: ['blur', 'change'] }],
  executeTime: [{ required: true, message: '实施日期必填', trigger: ['blur', 'change'] }],
  createrId: [{ required: true, message: '编制人必填', trigger: ['blur', 'change'] }],
  wordUrl: [{ required: true, message: '文件附件(word版)必填', trigger: ['blur', 'change'] }],
  pdfUrl: [{ required: true, message: '文件附件(pdf版)必填', trigger: ['blur', 'change'] }],
})
// // -------------------------------------------字典------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门
const fileTypeList = ref<dictType[]>([]) // 文件类型
const staffUserList = ref<dictType[]>([]) // 计量人员
// 获取字典值
async function getDict() {
  // 实验室
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })

  // 文件类型
  getDictByCode('bizFileType').then((response) => {
    fileTypeList.value = response.data
  })
  // 计量人员
  getStaffList({
    staffNo: '', // 人员编号
    name: '', // 姓名
    deptId: '', // 所在部门
    limit: 999999,
    offset: 1,
  }).then((res: any) => {
    staffUserList.value = res.data.rows.map((item: { staffName: string;id: string }) => {
      return {
        name: item.staffName,
        id: item.id,
      }
    })
  })
}
getDict()
// ------------------------------------------------------------------------------------------------------------------------------------方法------------------------------------------------
//  初始化审批弹窗
function initDialog(type: 'add' | 'edit', row: any, fileChangeApplyCodeParam = '') {
  if (type === 'edit') {
    form.value.labCode = row.labCode || '' // 实验室
    form.value.labCodeName = row.labCodeName || '' // 实验室名称
    form.value.groupCode = row.groupCode || '' // 部门
    form.value.groupCodeName = row.groupCodeName || '' // 部门名称
    form.value.fileCategory = row.fileCategory || '' // 文件类型
    form.value.fileCategoryName = row.fileCategoryName || '' // 文件类型名称
    form.value.fileNo = row.fileNo || '' // 文件编号
    form.value.fileName = row.fileName || '' // 文件名称
    form.value.fileVersion = row.fileVersion || '' // 版本号
    form.value.promulgateTime = row.promulgateTime || '' // 颁布日期
    form.value.executeTime = row.executeTime || '' // 实施日期
    form.value.createrName = row.createrName || '' // 编制人
    form.value.createrId = row.createrId || '' // 编制人Id
    form.value.wordUrl = row.wordUrl || '' // 文件附件(word版)
    form.value.pdfUrl = row.pdfUrl || '' // 文件附件(pdf版)
    form.value.remark = row.remark || '' // 备注
    form.value.id = row.id || ''
    fileChangeApplyCode.value = fileChangeApplyCodeParam // 更改文件申请单的编号
  }
  else {
    nextTick(() => {
      form.value.labCode = user.bizLabCode // 实验室
      form.value.labCodeName = user.labCodeName // 实验室名称
      form.value.groupCode = '' // 部门
      form.value.groupCodeName = '' // 部门名称
      form.value.fileCategory = '' // 文件类型
      form.value.fileCategoryName = '' // 文件类型名称
      form.value.fileNo = '' // 文件编号
      form.value.fileName = '' // 文件名称
      form.value.fileVersion = '' // 版本号
      form.value.promulgateTime = '' // 颁布日期
      form.value.executeTime = '' // 实施日期
      form.value.createrName = '' // 编制人
      form.value.createrId = '' // 编制人Id
      form.value.wordUrl = '' // 文件附件(word版)
      form.value.pdfUrl = '' // 文件附件(pdf版)
      form.value.remark = '' // 备注
      form.value.id = ''
      fileChangeApplyCode.value = fileChangeApplyCodeParam // 更改文件申请单的编号

      console.log('---------', `${fileChangeApplyCode.value}`)
    })
  }

  dialogVisible.value = true // 显示弹窗
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
}

// 点击确定
const confirm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emits('confirm', form.value)
      handleClose()
    }
  })
}
// -------------------------------------------文件上传--------------------------------------
// 文件上传
const wordFileRef = ref() // 文件附件ref
const pdfFileRef = ref() // 文件附件pdfRef

// 考核表word
const onWordFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/msword' && event.target.files[0].type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
    ElMessage.warning('请上传doc、docx文件格式')
    return
  }
  UploadFileFn(event, 'wordUrl', '文件上传成功')
}
// 考核表pdf
const onPdfFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/pdf') {
    ElMessage.warning('请上传pdf格式')
    return
  }
  UploadFileFn(event, 'pdfUrl', '文件上传成功')
}

// 上传文件操作
function UploadFileFn(event: any, prop: string, message: string) {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    loading.value = true
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value[prop] = res.data[0]
        event.target.value = null
        // 重置当前验证
        ElMessage.success(message)
        loading.value = false
      }
      else {
        ElMessage.error(res.message)
        event.target.value = null
        loading.value = false
      }
    }).catch(() => {
      event.target.value = null
    })
  }
}

const upload = (fileRef: any) => {
  fileRef.click()
}
// ---------------------------------------------钩子、事件-----------------------------------------
// 修改部门
const changeGroupCode = (val: string) => {
  const index = groupCodeList.value.findIndex(item => item.value === val)
  if (index !== -1) {
    form.value.groupCodeName = groupCodeList.value[index].name
  }
}

// 修改实验室
const changeLabCode = (val: string) => {
  const index = labCodeList.value.findIndex(item => item.value === val)
  if (index !== -1) {
    form.value.labCodeName = labCodeList.value[index].name
  }
}

// 修改文件类型
const changeFileType = (val: string) => {
  const index = fileTypeList.value.findIndex(item => item.value === val)
  if (index !== -1) {
    form.value.fileCategoryName = fileTypeList.value[index].name
  }
}

// 选择编制人变化
const changePerson = (id: string) => {
  const index = staffUserList.value.findIndex(item => item.id === id)
  if (index !== -1) {
    form.value.createrName = staffUserList.value[index].name
  }
}
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑文件"
    width="800"
    :before-close="handleClose"
  >
    <el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="实验室" prop="labCode">
            <el-select
              v-model="form.labCode"
              placeholder="实验室"
              class="short-input"
              filterable
              style="width: 100%;"
              :disabled="fileChangeApplyCode !== ''"
              @change="changeLabCode"
            >
              <el-option v-for="item in labCodeList" :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="groupCode">
            <el-select
              v-model="form.groupCode"
              placeholder="部门"
              class="short-input"
              filterable
              style="width: 100%;"
              :disabled="fileChangeApplyCode !== ''"
              @change="changeGroupCode"
            >
              <el-option v-for="item in groupCodeList" :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="fileCategory">
            <el-select
              v-model="form.fileCategory"
              placeholder="请选择文件类型"
              class="short-input"
              filterable
              style="width: 100%;"
              :disabled="fileChangeApplyCode !== ''"
              @change="changeFileType"
            >
              <el-option v-for="item in fileTypeList" :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="fileNo">
            <el-input v-model="form.fileNo" :disabled="fileChangeApplyCode !== ''" placeholder="请输入文件编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件名称" prop="fileName">
            <el-input v-model="form.fileName" :disabled="fileChangeApplyCode !== ''" placeholder="请输入文件名称" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="版本号" prop="fileVersion">
            <el-input v-model="form.fileVersion" placeholder="请输入版本号" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="颁布日期:" prop="promulgateTime">
            <el-date-picker
              v-model="form.promulgateTime"
              type="date"
              placeholder="请选择颁布日期"
              class="full-width-input"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="实施日期:" prop="executeTime">
            <el-date-picker
              v-model="form.executeTime"
              type="date"
              placeholder="请选择实施日期"
              class="full-width-input"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编制人" prop="createrId">
            <el-select
              v-model="form.createrId"
              placeholder="请选择编制人"
              class="short-input"
              filterable
              style="width: 100%;"
              @change="changePerson"
            >
              <el-option v-for="item in staffUserList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="文件附件(word版):" label-width="150px" prop="wordUrl">
            <show-photo v-if="form.wordUrl" :minio-file-name="form.wordUrl" />
            <input v-show="false" ref="wordFileRef" type="file" @change="onWordFileChange">
            <el-button id="file" type="primary" :style="{ 'margin-left': form.wordUrl === '' ? '0px' : '20px' }" @click="upload(wordFileRef)">
              {{ form.wordUrl === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文件附件(pdf版):" label-width="150px" prop="pdfUrl">
            <show-photo v-if="form.pdfUrl" :minio-file-name="form.pdfUrl" />
            <input v-show="false" ref="pdfFileRef" type="file" @change="onPdfFileChange">
            <el-button id="file" type="primary" :style="{ 'margin-left': form.pdfUrl === '' ? '0px' : '20px' }" @click="upload(pdfFileRef)">
              {{ form.pdfUrl === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="form.remark" type="textarea" autosize
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="confirm">
        提交
      </el-button>
      <el-button type="info" @click="handleClose">
        取消
      </el-button>
    </template>
  </el-dialog>
</template>