<template>
  <div class="loanRecord">
    <div class="top">
      <el-form ref="ruleForm" inline :model="form">
        <el-form-item label="借阅人:" prop="borrowUserName">
          <el-select v-model="form.borrowUserName" placeholder="请选择借阅人" clearable>
            <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="借阅状态:" prop="borrowStatus">
          <el-select v-model="form.borrowStatus" placeholder="请选择借阅状态" clearable>
            <el-option label="借阅中" value="reading" />
            <el-option label="已归还" value="returned" />
            <el-option label="已逾期" value="overdue" />
          </el-select>
        </el-form-item>
        <el-form-item label="借阅方式:" prop="saveType">
          <el-select v-model="form.saveType" placeholder="请选择借阅方式" clearable>
            <el-option v-for="dict in document_save_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="借阅时间:" prop="name4">
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="form.name4"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item> -->
        <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-form>
      <el-row class="mb8" v-if="userStore.userInfo.admin">
        <el-button type="primary" plain @click="openDialog({}, 'add')">借阅归还</el-button>
      </el-row>
    </div>
    <el-table :data="tableData" v-loading="loading" stripe :max-height="600">
      <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="userName" show-overflow-tooltip />
      <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="needReturnDate" show-overflow-tooltip />
      <el-table-column label="借阅状态" align="center" prop="borrowStatus" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tag v-if="borrowStatusMap.get(row.borrowStatus)" :type="borrowStatusMap.get(row.borrowStatus).type">{{
            borrowStatusMap.get(row.borrowStatus).text
          }}</el-tag>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="归还方式" align="center" prop="returnType" show-overflow-tooltip />
      <el-table-column label="逾期天数" align="center" prop="expireDay" show-overflow-tooltip />
      <el-table-column label="操作" align="center" show-overflow-tooltip width="240">
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="Edit"
            link
            @click="rushHandle(row)"
            v-if="row.adminUser && row.borrowType.includes('paper') && row.borrowStatus !== 'returned'"
            >催办</el-button
          >
          <el-button type="primary" icon="Edit" link v-if="!row.adminUser && row.borrowStatus !== 'returned'" @click="previewHandle(row)"
            >阅读</el-button
          >
          <el-button
            type="primary"
            icon="Edit"
            link
            v-if="row.adminUser && row.borrowType.includes('paper') && row.borrowStatus !== 'returned'"
            @click="returnHandle(row)"
            >归还</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />

    <el-dialog v-model="visible" title="借阅归还" :close-on-click-modal="false" width="50%" :before-close="close" class="dialog">
      <operate v-if="visible" ref="operateRef" :cur-row="curRow" @close="close"></operate>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">提交归还</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, shallowRef } from 'vue';
import { usePagination } from '@/hooks';
import operate from './operate.vue';
import { documentBorrowRecordUserLis } from '@/api/document/loanManagement/loanRequest';
import { getDocumentBorrowListPage, documentBorrowListReturnDoc } from '@/api/document/loanManagement/loanRecord';
import { documentAccessRecordAdd } from '@/api/document/fileManagement/loanRecord';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
console.log(userStore);
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 borrowStatusMap = new Map([
  ['reading', { text: '借阅中', type: '' }],
  ['returned', { text: '已归还', type: 'success' }],
  ['overdue', { text: '已逾期', type: 'danger' }],
]);

const form = reactive({
  borrowUserName: '',
  borrowStatus: '',
  saveType: '',
});

const visible = ref(false);
const curRow = shallowRef({});
const userList = ref([]);

const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getDocumentBorrowListPage, { value: form });

const search = () => {
  pageNum.value = 1;
  getTableList();
};

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

const openDialog = (data, type) => {
  visible.value = true;
  curRow.value = data;
};

const close = result => {
  if (result.isRefresh) search();
  visible.value = false;
  curRow.value = {};
};

const submit = () => {
  proxy.$refs.operateRef.submit();
};

const rushHandle = row => {
  proxy.$modal
    .confirm('是否催办？')
    .then(async () => {
      // const res = await documentTypeDel(row.id)
      // if(res?.code !== 200)return
      // getTableList()
    })
    .catch(() => {});
};

const previewHandle = row => {
  const file = row?.sysFileList?.[0] || null;
  if (!file) return;
  window.open(file.url);
  documentAccessRecordAdd({
    fileId: row.id,
  });
};

const returnHandle = row => {
  proxy.$modal
    .confirm('是否归还？')
    .then(async () => {
      const res = await documentBorrowListReturnDoc({ id: row.id });
      if (res?.code !== 200) return;
      getTableList();
    })
    .catch(() => {});
};

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

onMounted(() => {
  documentBorrowRecordUserLisFn();
  getTableList();
});
</script>

<style lang="scss" scoped>
.loanRecord {
  padding: 20px;
  height: 90vh;
  overflow-y: hidden;
  .top {
    margin-bottom: 15px;
  }
}

::v-deep(.dialog) {
  .el-dialog__body {
    padding-bottom: 20px !important;
  }
  .el-dialog__footer {
    padding-top: 0 !important;
  }
}
</style>