<template>
  <div class="operate">
    <el-form ref="ruleForm" :model="form" :rules="rules" class="dialogForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="归档名称:" prop="archiveName">
            <el-input v-model="form.archiveName" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归档权属单位:" prop="deptId">
            <el-select v-model="form.deptId" placeholder="请选择权属单位" style="width: 100%">
              <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="归档项目:" prop="refBusinessId">
            <el-select v-model="form.refBusinessId" placeholder="请选择归档项目" style="width: 100%">
              <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="multipleTableRef" :data="tableData" v-loading="loading" stripe :max-height="600">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip />
      <el-table-column label="上传时间" prop="createTime" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { required } from '@/utils/validate-helper';
import {
  getDocumentFileUnArchiveList,
  getProjectArchiveDeptList,
  getProjectArchiveProjectList,
  getProjectArchiveAdd,
} from '@/api/document/dataArchive/archAudit';
const emit = defineEmits(['close']);
const { proxy } = getCurrentInstance();
const form = reactive({
  archiveName: '',
  deptId: '',
  refBusinessId: '',
});
const rules = reactive({
  archiveName: required('归档名称'),
  refBusinessId: required('归档项目'),
});

const tableData = ref([]);
const loading = ref(false);
const deptList = ref([]);
const projectList = ref([]);

const submit = async () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      const checkedList = proxy.$refs.multipleTableRef.getSelectionRows();
      if (!checkedList.length) return proxy.$modal.msgError('请至少选择一项');
      const params = {
        ...form,
        files: checkedList,
      };
      console.log(params);
      const res = await getProjectArchiveAdd(params);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess('操作成功');
      emit('close', { isRefresh: true });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const getTableList = async () => {
  loading.value = true;
  try {
    const res = await getDocumentFileUnArchiveList(form);
    loading.value = false;
    if (res?.code !== 200) return;
    tableData.value = res.data || [];
  } catch (error) {
    loading.value = false;
  }
};

const getProjectArchiveDeptListFn = async () => {
  const res = await getProjectArchiveDeptList();
  if (res?.code !== 200) return;
  if (!Array.isArray(res.data)) return;
  deptList.value = res.data;
};

const getProjectArchiveProjectListFn = async () => {
  const res = await getProjectArchiveProjectList();
  if (res?.code !== 200) return;
  projectList.value = res.data || [];
};

onMounted(() => {
  getProjectArchiveDeptListFn();
  getProjectArchiveProjectListFn();
  getTableList();
});

defineExpose({
  submit,
});
</script>

<style lang="scss" scoped></style>