<template>
  <div class="loanRequest">
    <div class="top">
      <el-form ref="ruleForm" inline :model="form">
        <el-form-item label="借阅人:" prop="borrowUserId">
          <el-select v-model="form.borrowUserId" 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="status">
          <el-select v-model="form.status" placeholder="请选择审核状态" clearable>
            <el-option label="待审核" value="approve" />
            <el-option label="已审核" value="end" />
          </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>
          <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">
        <el-button type="primary" plain icon="Plus" @click="openDialog({})">新增</el-button>
      </el-row>
      <el-table :data="tableData" v-loading="loading" stripe :max-height="600">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="借阅人" prop="borrowUserName" show-overflow-tooltip />
        <el-table-column label="借阅人部门" prop="borrowDeptName" show-overflow-tooltip />
        <el-table-column label="借阅原因" prop="borrowReason" show-overflow-tooltip />
        <el-table-column label="借阅时间" prop="borrowDate" show-overflow-tooltip width="160" />
        <el-table-column label="借阅天数" prop="borrowDays" show-overflow-tooltip />
        <el-table-column label="借阅文件数（份）" prop="fileCount" show-overflow-tooltip />
        <el-table-column label="审核状态" prop="status" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag v-if="row.status === 'end'" type="success">{{ statusMap.get(row.status) }}</el-tag>
            <el-tag type="danger" v-else>{{ statusMap.get(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="需归还时间" prop="needReturnDate" show-overflow-tooltip width="160" />
        <el-table-column label="操作" show-overflow-tooltip width="180">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog3(row, 'view')">详情</el-button>
            <template v-if="row.status === 'approve'">
              <el-button type="primary" link @click="openDialog3(row, 'audit')" v-if="row.hasApproveAuth">审核</el-button>
              <template v-else>
                <!-- <el-button type="primary" link @click="openDialog2(row)">进度</el-button> -->
                <el-button type="primary" link @click="rushHandle(row)">催办</el-button>
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
    </div>
    <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>
    <el-dialog v-model="visible2" title="资料借阅申请-查询进度" :close-on-click-modal="false" width="20%" class="dialog">
      <step />
    </el-dialog>
    <el-dialog
      v-model="visible3"
      :title="`资料借阅${opts === 'audit' ? '审核' : '详情'}`"
      :close-on-click-modal="false"
      width="50%"
      :before-close="close3"
      class="dialog"
    >
      <audit v-if="visible3" ref="auditRef" :cur-row="curRow" :type="opts" @close="close3"></audit>
      <template #footer v-if="opts === 'audit'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submit3">授权借阅</el-button>
          <el-button @click="close3">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, shallowRef } from 'vue';
import { usePagination } from '@/hooks';
import operate from './operate.vue';
import audit from './audit.vue';
import step from './step.vue';
import {
  getDocumentBorrowRecordPage,
  documentBorrowRecordUserLis,
  documentBorrowRecordReturnDoc,
} from '@/api/document/loanManagement/loanRequest';
const { proxy } = getCurrentInstance();
const { document_save_type } = proxy.useDict('document_save_type');
const findText = (list, value) => {
  const cur = list.find(item => item.value === value);
  return cur?.label || '';
};
const statusMap = new Map([
  ['approve', '待审核'],
  ['end', '已审核'],
]);
const form = reactive({
  borrowUserId: '',
  status: '',
  borrowStatus: '',
});
const visible = ref(false);
const curRow = shallowRef({});
const visible2 = ref(false);
const visible3 = ref(false);
const userList = ref([]);
const opts = ref('');

const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getDocumentBorrowRecordPage, { 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 openDialog2 = row => {
  visible2.value = true;
};

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

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

const openDialog3 = (data, type) => {
  visible3.value = true;
  curRow.value = data;
  opts.value = type;
};

const close3 = result => {
  if (result?.isRefresh) search();
  visible3.value = false;
  curRow.value = {};
  opts.value = '';
};

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

const rushHandle = row => {
  proxy.$modal
    .confirm('确认进行催办吗？催办后将通过语音电话、短信验证码的方式向审核进行通知。')
    .then(async () => {
      // const res = await documentTypeDel(row.id)
      // if(res?.code !== 200)return
      // getTableList()
      proxy.$modal.msgSuccess('资料审核催办成果，稍后催办电话和短息提醒将下发到审核者，请关注审核动态。');
    })
    .catch(() => {});
};

const returnDocHandle = row => {
  proxy.$modal
    .confirm('确认归还吗？')
    .then(async () => {
      const res = await documentBorrowRecordReturnDoc({ id: row.id });
      if (res?.code !== 200) return;
      getTableList();
      proxy.$modal.msgSuccess('操作成功');
    })
    .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>
.loanRequest {
  padding: 20px;
  height: 90vh;
  overflow-y: hidden;
  .top {
    margin-bottom: 15px;
  }
}

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