<!-- 人员登记 基本信息 -->
<script name="RegisterAuthorize" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IStaffAuthorizeInfo } from '../person-regitster'
import AuthorizeDialog from './authorizeDialog.vue'
import FilePreviewDialog from '@/components/filePreview/filePreviewDialog.vue'
import ImagePreviewDialog from '@/components/ImagePreview/imagePreviewDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { delAuthorizeRecList, getAuthorizeList } from '@/api/resource/register'
import { exportOrderFile } from '@/api/resource/order'

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

/** ******* 授权信息表格 ********/
const authListQuery = {
  id: '',
  limit: 20,
  offset: 1,
}

const authorizeColumns = ref<Array<TableColumn>>([
  { text: '授权参数', value: 'authorizeParam', align: 'center' },
  { text: '授权内容', value: 'authorizeContent', align: 'center' },
  { text: '授权日期', value: 'authorizeDate', align: 'center', width: '160' },
  { text: '有效日期', value: 'validDate', align: 'center', width: '160' },
]) // 表头
const authTotal = ref<number>(0) // 数据总条数
const authorizeList = ref<IStaffAuthorizeInfo[]>([]) // 表格数据

// 表格被选中的行
const authorizeSelected = ref<IStaffAuthorizeInfo[]>([])

// 子组件引用
const refAuthorizeDialog = ref()
const refFilePreviewDlg = ref()
const refImagePreviewDlg = ref()

// 逻辑
const authMultiSelect = (e: any) => {
  authorizeSelected.value = e
}

const checkRowDisabled = (row: IStaffAuthorizeInfo, index: number, setSelectable: Function) => {
  if (row.resource !== '' && row.resource!.length > 2) {
    setSelectable('true')
  }
  else {
    setSelectable('false')
  }
}

const getAuthorizeListByStaffId = (staffId = '') => {
  if (staffId !== '') {
    authListQuery.id = staffId
  }
  getAuthorizeList(authListQuery).then((res) => {
    if (res.code === 200) {
      authTotal.value = res.data.total
      authorizeList.value = res.data.rows.map((item: any) => ({
        ...item,
        authorizeDate: dayjs(item.authorizeDate).format('YYYY-MM-DD'),
        validDate: dayjs(item.validDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

// 表格换页
const changeAuthorizePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    authListQuery.limit = val.size
  }
  if (val && val.page) {
    authListQuery.offset = val.page
  }
  getAuthorizeListByStaffId()
}

// 删除授权项目信息记录
const delAuthorizeRecords = () => {
  if (authorizeSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  ElMessageBox.confirm('是否删除授权项目信息记录，此操作不可恢复', '提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
  // 前端界面删除
    authorizeList.value = authorizeList.value.filter(item => authorizeSelected.value.includes(item) === false)

    // 调用后端接口进行删除
    const authIdsSelected = ref<string[]>([])
    authIdsSelected.value = authorizeSelected.value.map((item: { id: string }) => item.id)
    authIdsSelected.value = authIdsSelected.value.filter(item => item !== '')
    if (authIdsSelected.value.length > 0) {
      delAuthorizeRecList({ ids: authIdsSelected.value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除授权项目信息记录成功')
        }
        else {
          ElMessage.error(`删除授权项目信息记录失败：${res.message}`)
        }

        getAuthorizeListByStaffId()
      })
    }
  })
}

const openFilePreviewDialog = (row: IStaffAuthorizeInfo) => {
  if (row.resource === '1') {
    // 手动新增的
    if (row.file.lastIndexOf('.pdf') > 0) {
      refFilePreviewDlg.value.initDialog(row.file)
    }
    else {
      refImagePreviewDlg.value.initDialog(row.file)
    }
  }
  else if (row.resource !== '' && row.resource!.length > 2) {
    // 从授权代理委托书模块中来的数据
    // 首先获取委托书审批单的PDF文件 再进行预览
    exportOrderFile({ id: row.resource!, pdf: true }).then((res) => {
      refFilePreviewDlg.value.initDialogContent(res.data)
    })
  }
}

// 编辑
const showEditDialog = (row: IStaffAuthorizeInfo, tableName: string) => {
  switch (tableName) {
    case 'authorize' :
      refAuthorizeDialog.value.initRecordData(row)
      refAuthorizeDialog.value.showRecordDialog(true, '编辑')
      break

    default:
      break
  }
}

// 新增
const addEditableRow = (tableName: string) => {
  switch (tableName) {
    case 'authorize':
      refAuthorizeDialog.value.showRecordDialog(true, '新增')
      break

    default:
      break
  }
}

watch(() => props.staffId, (newVal: string) => {
  authListQuery.id = newVal

  getAuthorizeListByStaffId()
})

defineExpose({
  getAuthorizeListByStaffId,
})
</script>

<template>
  <app-container>
    <el-form ref="authorizeFormRef" label-position="right" label-width="110px" border stripe>
      <table-container title="授权项目信息">
        <template v-if="props.operation !== 'detail'" #btns-right>
          <el-button type="primary" @click="addEditableRow('authorize')">
            增加行
          </el-button>
          <el-button type="info" @click="delAuthorizeRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="authorizeTabel"
          :data="authorizeList" :total="authTotal" :columns="authorizeColumns"
          :query="{ limit: authListQuery.limit, offset: authListQuery.offset }"
          :is-showmulti-select="props.operation !== 'detail'"
          @change="changeAuthorizePage"
          @multi-select="authMultiSelect"
          @row-disabled="checkRowDisabled"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (authListQuery.offset - 1) * authListQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>

          <template #columns>
            <el-table-column label="附件" align="center" width="480">
              <template #default="scope">
                <el-link @click="openFilePreviewDialog(scope.row)">
                  {{ scope.row.file }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column v-if="props.operation !== 'detail'" fixed="right" label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-button size="small" :disabled="row.resource !== '' && row.resource.length > 2" type="primary" @click="showEditDialog(row, 'authorize')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </el-form>

    <authorize-dialog ref="refAuthorizeDialog" :staff-id="props.staffId" @record-saved="getAuthorizeListByStaffId" />
    <file-preview-dialog ref="refFilePreviewDlg" />
    <image-preview-dialog ref="refImagePreviewDlg" />
  </app-container>
</template>