<!-- 文件审批 -->
<script name="FileApprovalFormDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IFileApprovalForm } from './approval-interface'
import editFileItemDialog from './dialog/editFileItemDialog.vue'
import SelectFileChangeListDialog from './dialog/SelectFileChangeListDialog.vue'
import type { templateType } from '@/views/system/file/file-interface'
import { useCheckList } from '@/commonMethods/useCheckList'
import FilterFileTemplate from '@/views/resource/common/filterFileTemplate.vue'
import { getDictByCode } from '@/api/system/dict'
// import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
import ApprovalDialog from '@/components/Approval/ApprovalDialogCustom.vue'
import selectApproverDialog from '@/components/ApprovalCustom/selectApproverDialog.vue'
import customApproval from '/public/config/customApproval.json'
import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
import useUserStore from '@/store/modules/user'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { UploadFile } from '@/api/file'
import { addApprovalForm, approvalDelete, cancelApproval, detailFileApprovalForm, draftUpdateApprovalForm, failUpdateApprovalForm, refuseApproval, submitApprovalForm } from '@/api/resource/fileApproval'
import { detailFileChangeForm } from '@/api/resource/fileChange'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
// 从路由中传过来的参数
const type = ref('')
const id = ref('')
const status = ref('')
const processId = ref('') // 流程实例id
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
const approvalDialog = ref() // 审批对话ref
const showSubmitButton = ref(false) // 提交按钮是否禁用
const showApprovalButton = ref(true) // 是否展示审批按钮
const showRefuseEditButton = ref(true) // 是否展示未通过编辑按钮

const flowFormId = 'zyglwjsp' // 资源管理 - 文件审批

const userInfo = useUserStore()
const route = useRoute()
const router = useRouter()
// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'approval-form-basic' },
  { name: '审批详情', value: 'approval-form-approval' },
])
const current = ref('approval-form-basic') // 选择的tab 默认基本信息
// ---------------------------------------------------------------------------------------

const approvalFormRef = ref()
const approvalStatusName = ref('') // 审批状态名称

const pprovalFormRules = ref({
  fileNo: [{ required: true, message: '文件编号不能为空', trigger: 'blur' }],
  fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
  fileVersion: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
  fileTemplateId: [{ required: true, message: '文件模板不能为空，请选择', trigger: 'blur' }],
  attachmentFile: [{ required: true, message: '附件不能为空', trigger: 'blur' }],
}) // 表单验证规则

const approvalForm = ref<IFileApprovalForm>({
  id: '',
  approvalNo: '', // 审批编号
  approvalName: '文件审批单', // 审批名称
  processId: '',
  taskId: '',
  createTime: '',
  createUserId: '',
  createUserName: '',
  fileChangeApplyCode: '', // 文件更改申请单编号
})

// -----------------------------------------文件列表-----------------------------------------------------
const columns = ref<TableColumn[]>([ // 表头
  { text: '实验室', value: 'labCodeName', align: 'center', required: true },
  { text: '部门', value: 'groupCodeName', align: 'center', required: false },
  { text: '文件类型', value: 'fileCategoryName', align: 'center', width: '140', required: true },
  { text: '文件编号', value: 'fileNo', align: 'center', required: true },
  { text: '文件名称', value: 'fileName', align: 'center', required: true },
  { text: '版本号', value: 'fileVersion', align: 'center', required: true },
  { text: '颁布日期', value: 'promulgateTime', align: 'center', width: '120', required: true },
  { text: '实施日期', value: 'executeTime', align: 'center', width: '120', required: true },
  { text: '编制人', value: 'createrName', align: 'center', required: true },
  { text: '文件附件(word版)', value: 'wordUrl', align: 'center', width: '220', required: true },
  { text: '文件附件(pdf版)', value: 'pdfUrl', align: 'center', width: '220', required: true },
  { text: '备注', value: 'remark', align: 'center' },
])
const list = ref([]) as any // 表格数据
const checkoutList = ref([]) as any // 选中数据

// 多选发生改变时
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}

/**
 * 删除行公共方法
 * @param checkoutList 选中的数组
 * @param list 操作的数组
 */
const delRow = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选中要删除的行')
  }
  else {
    list.value = list.value.filter((item: any) => {
      return !checkoutList.value.includes(item)
    })
  }
}
// ----------------------------------------------------------------------------------------------

// 关闭新增页面的回调
const close = () => {
  router.back()
}

// 点击编辑按钮
const editForm = () => {
  type.value = 'edit' // 编辑模式
}

// 根据id查询详情
const detailById = async (id: string) => {
  await detailFileApprovalForm({ id }).then((res) => {
    if (res.code === 200) {
      approvalForm.value = res.data
      list.value = res.data.approvalFileList // 文件列表
    }
  })
}

// 点击删除--已取消
const del = () => {
  ElMessageBox.confirm(
    '确认删除该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      approvalDelete({ id: id.value, taskId: taskId.value }).then(() => {
        ElMessage.success('已删除')
        close()
      })
    })
}

// -----------------------------------------------保存-------------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  if (!list.value.length) {
    ElMessage.warning('文件列表不能为空')
    return false
  }
  if (!useCheckList(list.value, columns.value, '文件列表')) {
    return false
  }
  await approvalFormRef.value.validate((valid: boolean) => {
    if (valid) { // 基本信息表单通过校验
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.8)',
        })
        const params = {
          ...approvalForm.value,
          approvalFileList: list.value,
        }
        if (type.value === 'add') { // 新建
          addApprovalForm(params).then((res) => {
            loading.close()
            approvalForm.value.approvalNo = res.data.approvalNo
            approvalForm.value.id = res.data.id
            id.value = res.data.id
            showSubmitButton.value = true // 保存成功显示提交按钮
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (type.value === 'edit') { // 编辑
          if (approvalStatusName.value === '草稿箱') {
            draftUpdateApprovalForm(params).then((res) => {
              loading.close()
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else { // '未通过' || '已取消'
            failUpdateApprovalForm(params).then((res) => {
              loading.close()
              ElMessage.success('已保存')
              type.value = 'detail'
              showRefuseEditButton.value = false
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
const selectApproverRef = ref() // 审批人自选组件ref
// 选好审批人
const confirmSelectApprover = async (approverList: string[] = []) => {
  if (!approverList.length) {
    ElMessage.warning('无审批人，无法提交！')
    return false
  }
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  const params = {
    id: id.value,
    formId: flowFormId,
    processId: processId.value,
    assignees: approverList,
  }
  submitApprovalForm(params).then((res) => {
    ElMessage.success('已提交')
    type.value = 'detail'
    detailById(id.value)
    loading.close()
  })
}
// 提交按钮
const submitForm = () => {
  selectApproverRef.value.initDialog()
}
// -------------------------------------------审批----------------------------------------

// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}

// 审批
const handleApprove = (val: string) => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
      id: id.value,
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '已取消',
          })
          showApprovalButton.value = false
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value, id.value, processId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value, id.value)
  }
}

// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  refuseApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已拒绝',
    })
    showApprovalButton.value = false
  })
}
// -----------------------------------------文件更改申请单-----------------------------------------
const selectFileChangeListDialogRef = ref() // 文件更改申请单组件ref
// 点击文件更改申请单
const selectFileChangeList = () => {
  selectFileChangeListDialogRef.value.initDialog()
}
const fileTypeDict = ref({}) as any // 文件类型
const labCodeDict = ref({}) as any // 实验室
const groupCodeDict = ref({}) as any // 部门
const initDict = async () => {
  // 缓存中没有则调用接口查询
  const resLab = await getDictByCode('bizLabCode')
  resLab.data.forEach((item: { value: string; name: string }) => {
    labCodeDict.value[`${item.value}`] = item.name
  })

  // 缓存中没有则调用接口查询
  const resGroup = await getDictByCode('bizGroupCode')
  resGroup.data.forEach((item: { value: string; name: string }) => {
    groupCodeDict.value[`${item.value}`] = item.name
  })

  // 文件类型
  const resFileType = await getDictByCode('bizFileType')
  resFileType.data.forEach((item: { value: string; name: string }) => {
    fileTypeDict.value[`${item.value}`] = item.name
  })
}

// 确定选择文件更改申请单
const confirmSelectFileChange = (listParam: any) => {
  if (listParam && listParam.length) {
    approvalForm.value.fileChangeApplyCode = listParam[0].formNo // 文件更改申请单编号
    list.value = []
    const loading = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(255, 255, 255, 0.6)',
    })
    initDict().then(() => {
      detailFileChangeForm({ id: listParam[0].id }).then((res) => {
        list.value = res.data.fileList.map((item: { createUserName: string;createUserId: string;effectiveDate: string; promulgateTime: string; labCode: string;groupCode: string;fileCategory: string }) => {
          return {
            ...item,
            labCodeName: `${item.labCode}` ? labCodeDict.value[`${item.labCode}`] : item.labCode, // 实验室
            groupCodeName: `${item.groupCode}` ? groupCodeDict.value[`${item.groupCode}`] : item.groupCode, // 部门
            fileCategoryName: `${item.fileCategory}` ? fileTypeDict.value[`${item.fileCategory}`] : item.fileCategory, // 文件类别
            id: '',
            promulgateTime: item.promulgateTime ? dayjs(item.promulgateTime).format('YYYY-MM-DD') : item.promulgateTime, // 颁布日期
            executeTime: item.effectiveDate ? dayjs(item.effectiveDate).format('YYYY-MM-DD') : item.effectiveDate, // 实施日期
            createrId: item.createUserId, // 编制人id
            createrName: item.createUserName, // 编制人
          }
        })
        loading.close()
      })
    })
  }
}
// ---------------------------------------编辑文件弹窗--------------------------------------------------------
const editFileItemDialogRef = ref()
const editIndex = ref() // 编辑第几行
const editType = ref('add')
const handleEdit = (type: 'add' | 'edit', row?: any, index?: number) => {
  editIndex.value = index
  editType.value = type
  editFileItemDialogRef.value.initDialog(type, row, approvalForm.value.fileChangeApplyCode)
}
// 确定编辑
const confirmEditFileItem = (row: any) => {
  if (editType.value === 'add') {
    list.value.push({ ...row })
  }
  else {
    list.value.splice(editIndex.value, 1, { ...row })
  }
}
// ----------------------------------------------------------------------------------------------------------
const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''
  status.value = params.status !== undefined ? params.status : ''
  approvalStatusName.value = params.approvalStatusName
  processId.value = params.processId// 流程实例id
  taskId.value = params.taskId// 任务id
  switch (params.type) {
    case 'add' :
      approvalForm.value.createUserId = userInfo.id
      approvalForm.value.createUserName = userInfo.name
      approvalForm.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')

      break
    case 'edit':
      showSubmitButton.value = true
      detailById(id.value)
      break
    case 'detail':
      id.value = params.id
      detailById(id.value)
      break
    default:
      break
  }
}

watch(() => status.value, (val) => {
  if (val === '1' || type.value === 'add') { // 草稿箱把审批详情删了
    if (radioMenus.value[radioMenus.value.length - 1].value === 'approval-form-approval') {
      radioMenus.value.pop()
    }
    console.log(radioMenus.value)
  }
  else { // 非全部和草稿箱把审批详情加上
    if (radioMenus.value[radioMenus.value.length - 1].value !== 'approval-form-approval') {
      radioMenus.value.push({ name: '审批详情', value: 'approval-form-approval' })
    }
  }
})

onMounted(() => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="`文件审批 (${textMap[type]})`">
      <template #btns>
        <el-button v-if="type === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="type === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="type === 'detail' && approvalStatusName === '审批中' && showApprovalButton" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button
          v-if="type === 'add' || (type === 'edit' && approvalStatusName !== '未通过' && approvalStatusName !== '已取消' && approvalStatusName !== '全部')"
          type="primary"
          :disabled="!showSubmitButton"
          @click="submitForm"
        >
          提交
        </el-button>
        <el-button v-if="approvalStatusName !== '已审批' && type === 'detail' && approvalStatusName === '未通过' && showRefuseEditButton" type="primary" @click="editForm">
          编辑
        </el-button>
        <el-button v-if="type !== 'detail'" :disabled="type === 'add' && id !== ''" type="primary" @click="saveForm">
          保存
        </el-button>
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-radio-group v-model="current">
        <el-radio-button
          v-for="item in radioMenus"
          :key="item.value"
          :label="item.value"
          :disabled="!id"
        >
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-page>

    <detail-block v-if="current === 'approval-form-basic'" title="">
      <el-form ref="approvalFormRef" :model="approvalForm" :rules="pprovalFormRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="系统编号">
              <el-input v-model="approvalForm.approvalNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="approvalForm.createUserName" disabled />
              <el-input v-model="approvalForm.createUserId" type="hidden" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="approvalForm.createTime" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="文件更改申请单">
              <el-input v-model="approvalForm.fileChangeApplyCode" placeholder="请选择文件更改申请单" disabled>
                <template v-if="type !== 'detail'" #append>
                  <el-button size="small" :disabled="type === 'detail'" @click="selectFileChangeList">
                    选择
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="approvalForm.fileChangeApplyCode" type="hidden" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <detail-block v-if="current === 'approval-form-basic'" title="文件列表">
      <template #btns>
        <el-button v-if="type !== 'detail' && approvalForm.fileChangeApplyCode === ''" type="primary" @click="handleEdit('add')">
          增加行
        </el-button>
        <el-button v-if="type !== 'detail' && approvalForm.fileChangeApplyCode === ''" type="info" @click="delRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="list"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="type !== 'detail'" fixed="left" type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          show-overflow-tooltip
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <show-photo v-if="item.value === 'wordUrl' || item.value === 'pdfUrl'" :minio-file-name="scope.row[item.value]" />
            <span v-else>{{ scope.row[item.value] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type !== 'detail'"
          fixed="right"
          label="操作"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              link
              @click="handleEdit('edit', scope.row, scope.$index)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type === 'detail'"
          label="发放状态"
          width="120"
          align="center"
          prop="grantStatus"
        />
      </el-table>
    </detail-block>

    <!-- 审批弹窗 -->
    <!-- <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" @refuse="refuse" /> -->
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" approval-module="fileApproval" :last-name="customApproval.approvalLastName.fileApproval" @on-success="approvalSuccess" @refuse="refuse" />
    <!-- 选择审批人弹窗 -->
    <select-approver-dialog ref="selectApproverRef" @confirm="confirmSelectApprover" />

    <!-- 审批详情 -->
    <template v-if="current === 'approval-form-approval'">
      <approval-record-table :process-id="approvalForm.processId" />
    </template>

    <!-- 编辑文件组件 -->
    <edit-file-item-dialog ref="editFileItemDialogRef" @confirm="confirmEditFileItem" />

    <!-- 文件更改申请单 -->
    <select-file-change-list-dialog ref="selectFileChangeListDialogRef" @confirm="confirmSelectFileChange" />
  </app-container>
</template>