<template>
  <div class="operate">
    <el-form ref="ruleForm" :model="form" class="dialogForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="借阅人:" prop="borrowUserId">
            <el-select v-model="form.borrowUserId" placeholder="请选择借阅人" clearable style="width: 100%">
              <el-option v-for="item in userList" :key="item.borrowUserId" :label="item.borrowUserName" :value="item.borrowUserId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="search"> 搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </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" align="center" />
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip width="200" />
      <el-table-column label="借阅方式" align="center" prop="borrowType" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ findText(document_save_type, row.borrowType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借阅时间" align="center" prop="borrowDate" show-overflow-tooltip />
      <el-table-column label="档案位置" align="center" prop="saveAddressName" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import {
  documentBorrowListReturnList,
  documentBorrowListReturnDoc,
  getDocumentBorrowListReturnFileUsers,
} from '@/api/document/loanManagement/loanRecord';
const emit = defineEmits(['close']);
const { proxy } = getCurrentInstance();
const { document_save_type } = proxy.useDict('document_save_type');
const findText = (list, value) => {
  if (!value) return '';
  const items = value.split(',');
  let text = [];
  for (const item of items) {
    const cur = list.find(it => it.value === item);
    if (cur) text.push(cur.label);
  }
  return text.join();
};
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({}),
  },
});
const { curRow } = props;
const form = reactive({
  borrowUserId: '',
});

const tableData = ref([]);
const loading = ref(false);
const userList = ref([]);

const submit = async () => {
  const checkedList = proxy.$refs.multipleTableRef.getSelectionRows();
  if (!checkedList.length) return proxy.$modal.msgError('请至少选择一项');
  const res = await documentBorrowListReturnDoc({
    ids: checkedList.map(it => it.id),
  });
  if (res?.code !== 200) return;
  proxy.$modal.msgSuccess('操作成功');
  emit('close', { isRefresh: true });
};

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

const search = () => {
  getTableList();
};

const resetQuery = () => {
  proxy.$refs.ruleForm.resetFields();
  search();
};

const getDocumentBorrowListReturnFileUsersFn = async () => {
  const res = await getDocumentBorrowListReturnFileUsers();
  if (res?.code !== 200) return;
  userList.value = res.data || [];
};

onMounted(() => {
  getDocumentBorrowListReturnFileUsersFn();
  getTableList();
});

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

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