<template>
  <div class="operate">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="dialogForm"
      :label-width="90"
      :disabled="opts.type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="文件名称:" prop="fileName">
            <el-input
              v-model="form.fileName"
              type="text"
              placeholder="请输入分类名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保密等级:" prop="secretLevel">
            <el-select
              v-model="form.secretLevel"
              placeholder="请选择保密等级"
              style="width: 100%"
            >
              <el-option
                v-for="dict in document_secret_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属分类:" prop="typeId">
            <el-tree-select
              v-model="form.typeId"
              :data="treeData"
              node-key="id"
              :render-after-expand="false"
              :props="{label: 'typeName'}"
              check-strictly
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件标签:" prop="fileTag">
            <el-select
              v-model="form.fileTag"
              placeholder="请选择文件标签"
              clearable
              style="width: 100%"
              multiple
            >
              <el-option
                v-for="dict in document_tag"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电子档:" prop="sysFileSaveRequestList">
            <FileUpload
              v-model="form.sysFileSaveRequestList"
              :limit="1"
              :isBackName="true"
              :disabled="opts.type === 'view'"
              @preview="handlePreview"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纸质原件:" prop="saveAddressId">
            <el-select
              v-model="form.saveAddressId"
              placeholder="请选择纸质原件存放地址"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in documentSaveAddressList"
                :key="item.id"
                :label="item.addressName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="电子档名称:">
            <el-input
              :model-value="fileInfo.name"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子档格式:">
            <el-input
              :model-value="fileInfo.extension"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子档大小:">
            <el-input
              :model-value="handleFileSize(fileInfo.size)"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="文件描述:" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入文件描述"
              resize="none"
              :rows="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { required } from '@/utils/validate-helper'
import { handleFileSize } from '@/utils'
import {
  getDocumentSaveAddressList,
  documentFileAdd,
  documentFileEdit,
  documentFileDetail
} from '@/api/document/fileManagement/list'
import { documentAccessRecordAdd } from '@/api/document/fileManagement/loanRecord'
import { documentTypeTree } from '@/api/document/dataClassify'
import FileUpload from '@/components/FileUpload'
import { fileList } from '@/api/system/file'
const methed = {
  add: documentFileAdd,
  edit: documentFileEdit
}

const { proxy } = getCurrentInstance()
const {
  document_secret_level,
  document_tag,
  document_save_type
} = proxy.useDict('document_secret_level', 'document_tag', 'document_save_type')

const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  opts: {
    type: Object,
    default: () => ({})
  }
})
const { curRow, opts } = props
const emit = defineEmits(['close'])
const treeData = ref([])
const form = reactive({
  id: curRow.id || '',
  fileName: '',
  secretLevel: '',
  saveType: '',
  saveAddressId: '',
  typeId: '',
  fileTag: [],
  remark: '',
  sysFileSaveRequestList: []
})
watch(() => form.sysFileSaveRequestList, (val) => {
  if(val[0]){
    val[0].refType = 'document_file_attachment'
  }
  fileInfo.value = val[0] || {}
  nextTick(() => {
    proxy.$refs.ruleForm.validateField('sysFileSaveRequestList')
  })
})
const fileInfo = ref({})

const rules = reactive({
  fileName: required('文件名称'),
  secretLevel: required('保密等级'),
  typeId: required('所属分类'),
  fileTag: required('文件标签'),
  sysFileSaveRequestList: required('电子档')
})

const documentSaveAddressList = ref([])

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      let api = methed[opts.type]
      if(!api) return
      let saveType = 'electronic'
      if(form.saveAddressId){
        saveType = 'electronic,paper'
      }
      const params = {
        ...form,
        fileTag: form.fileTag.join(),
        saveType
      }
      const res = await api(params)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      emit('close', opts)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getDocumentSaveAddressListFn = async () => {
  const res = await getDocumentSaveAddressList()
  if(res?.code !== 200) return
  documentSaveAddressList.value = res.data || []
}

const getTreeData = async () => {
  const res = await documentTypeTree()
  if(res?.code !== 200) return
  treeData.value = res.data || []
}

const getDetail = async () => {
  const res = await documentFileDetail(curRow.id)
  if(res?.code !== 200) return
  inheritAttr(res.data, form)
  form.fileTag = form.fileTag ? form.fileTag.split(',') : []
  getFileInfo(res.data.id, 'document_file_attachment', (data) => {
    if(!data.length) return
    const fileInfo = data[0]
    form.sysFileSaveRequestList = [{ ...fileInfo, refType: 'document_file_attachment' }]
  })
}

const getFileInfo = async (id, refType, callback) => {
  const res = await fileList({ refId: id, refType })
  if(res?.code !== 200) return
  callback && callback(res.data)
}

const handlePreview = () => {
  console.log(form.id)
  documentAccessRecordAdd({
    fileId: form.id
  })
}

onMounted(() => {
  getDocumentSaveAddressListFn()
  getTreeData()
  if(curRow?.id) getDetail()
})

defineExpose({
  submit
})
</script>

<style lang="scss" scoped>

</style>