<!-- 授权项目信息编辑弹窗 -->
<script name="AuthorizeDialog" lang="ts" setup>
import { ElLoading, ElMessage } from 'element-plus'
import type { IStaffAuthorizeInfo } from '../person-regitster'
import { UploadFile } from '@/api/file'
import { addAuthorizeRec, updateAuthorizeRec } from '@/api/resource/register'

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

const emit = defineEmits(['recordSaved'])

const authorizeFormRef = ref()

const title = ref<string>('')

const staffAuthorize = ref<IStaffAuthorizeInfo>({
  id: '',
  staffId: '',
  authorizeParam: '',
  authorizeContent: '',
  authorizeDate: '',
  validDate: '',
  file: '',
})

const staffAuthorizeRules = ref({
  authorizeParam: [{ required: true, message: '授权参数不能为空', trigger: 'blur' }],
  authorizeContent: [{ required: true, message: '授权内容不能为空', trigger: 'blur' }],
  authorizeDate: [{ required: true, message: '授权日期不能为空', trigger: 'blur' }],
  validDate: [{ required: true, message: '有效期不能为空', trigger: 'blur' }],
}) // 表单验证规则

const showDialog = ref(false)

// 逻辑
const showRecordDialog = (show: boolean, tableTitle = '') => {
  showDialog.value = show
  title.value = tableTitle

  if (show === false) {
    staffAuthorize.value = {
      id: '',
      staffId: '',
      authorizeParam: '',
      authorizeContent: '',
      authorizeDate: '',
      validDate: '',
      file: '',
    }
  }
}

const initRecordData = (record: IStaffAuthorizeInfo) => {
  staffAuthorize.value = { ...record }
}

const uploadAuthorizeFile: 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('附件上传成功')
      staffAuthorize.value.file = res.data[0]
      loading.close()
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('附件上传失败')
  })
}

const saveStaffAuthorize = async () => {
  await authorizeFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      if (staffAuthorize.value.id === '') {
        staffAuthorize.value.staffId = props.staffId
        addAuthorizeRec(staffAuthorize.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('授权项目信息保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`授权项目信息保存失败：${res.message}`)
          }
        })
      }
      else {
        updateAuthorizeRec(staffAuthorize.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('授权项目信息保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`授权项目信息保存失败：${res.message}`)
          }
        })
      }
    }
  })
}

defineExpose({
  showRecordDialog,
  initRecordData,
})
</script>

<template>
  <el-dialog v-model="showDialog" :title="`${title}授权项目信息`" :append-to-body="true" :close-on-click-modal="false">
    <detail-block title="">
      <el-form ref="authorizeFormRef" :model="staffAuthorize" :rules="staffAuthorizeRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="授权参数" prop="authorizeParam">
              <el-input v-model="staffAuthorize.authorizeParam" placeholder="请输入授权参数" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="授权内容" prop="authorizeContent">
              <el-input v-model="staffAuthorize.authorizeContent" placeholder="请输入授权内容" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="授权日期" prop="authorizeDate">
              <el-date-picker v-model="staffAuthorize.authorizeDate" placeholder="请选择授权日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="有效期" prop="validDate">
              <el-date-picker v-model="staffAuthorize.validDate" placeholder="请选择有效期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="附件">
              <el-input v-model="staffAuthorize.file" type="hidden" />

              <el-upload
                :show-file-list="false"
                :http-request="uploadAuthorizeFile"
                style="margin-right: 20px; display: inline-flex;"
              >
                <el-button type="primary">
                  <template v-if="staffAuthorize.file !== ''">
                    替换
                  </template>
                  <template v-else>
                    上传
                  </template>
                </el-button>
              </el-upload>

              <span>{{ staffAuthorize.file }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showRecordDialog(false)">取消</el-button>
        <el-button type="primary" @click="saveStaffAuthorize">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>