<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 filterable 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="true"
              :props="{ label: 'typeName', children: 'children' }"
              check-strictly
              style="width: 100%"
              class="fileTreeSel"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件标签:" prop="fileTag">
            <el-select filterable 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">
            <ImageFileUpload
              v-model:saveFileArr="form.sysFileSaveRequestList"
              :limit="1"
              :isBackName="true"
              listType="text"
              :disabled="opts.type === 'view'"
              @preview="handlePreview"
              :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf']"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纸质原件:" prop="saveAddressId">
            <el-select filterable 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 { getFileLIst } 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: [],
});
const fileInfo = ref({});
watch(
  () => form.sysFileSaveRequestList,
  val => {
    if (val.length) {
      val[0].refType = 'document_file_attachment';
      fileInfo.value = val[0];
    } else {
      fileInfo.value = {};
    }
    nextTick(() => {
      proxy.$refs.ruleForm.validateField('sysFileSaveRequestList');
    });
  },
  { deep: true }
);

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 getFileLIst({ 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>
.fileTreeSel {
  .el-tree-node__children {
    .el-tree-node__expand-icon {
      visibility: hidden;
    }
  }
}
</style>