<script setup lang="ts">
import { useColumns } from "./config/columns";
import { httpList } from "/@/api/srarch/standBook";
import { reactive, ref, onMounted, unref } from "vue";
import { TableProBar } from "/@/components/ReTable";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { DEAFULT_QUERY_FORM, DEFAULT_QUERY_PAGE } from "./config/query";
import { useRouter } from "vue-router";
import { useResponseHandle } from "/@/hooks";
import SearchModal from "./components/search-modal.vue";
import { useUserStoreHook } from "/@/store/modules/user";
import PagePower from "/@/components/PagePower/PagePower.vue";
import { useAppStoreHook } from "/@/store/modules/app";
import { onBeforeRouteLeave } from "vue-router";

defineOptions({
  name: "standBook"
});

const { push } = useRouter();
const { columns } = useColumns();
const responseHandle = useResponseHandle();
const { setSearchParams, searchParams } = useAppStoreHook();

const searchModalRef = ref<InstanceType<typeof SearchModal>>(null);

const loading = ref(false);
const dataList = ref<Array<Record<string, string>>>([]);
const powers = ref<Array<string>>([]);

const formData = ref(
  searchParams.basic ? { ...searchParams.basic } : { ...DEAFULT_QUERY_FORM }
);
const pagination = reactive(
  searchParams.pagination
    ? { ...searchParams.pagination }
    : { ...DEFAULT_QUERY_PAGE }
);

async function handleCurrentChange(val: number) {
  formData.value.page = val;
  await onSearch();
}

async function handleSizeChange(val: number) {
  formData.value.size = val;
  formData.value.page = 1;
  await onSearch();
}

async function handleQueryChange(query) {
  formData.value = { ...unref(formData), ...query };
  await onSearch();
}

async function handleResetQuery() {
  formData.value = { ...DEAFULT_QUERY_FORM };
  searchModalRef.value.onClear();
  await onSearch();
}

function toDetail(id) {
  push({
    path: "/search/standBookDetail",
    query: {
      id
    }
  });
}

onBeforeRouteLeave(({ path }) => {
  //到详情页保存查询参数 到其他页面清空查询参数
  const isDetail = path.indexOf("Detail") >= 0;
  const basicParams = isDetail ? formData.value : null;
  const pagin = isDetail ? pagination : null;
  setSearchParams(basicParams as any, pagin);
});

async function onSearch() {
  if (loading.value) return;
  loading.value = true;
  const { code, data, message } = await httpList(unref(formData));
  responseHandle({
    code,
    message,
    handler: () => {
      const { list, count } = data;
      dataList.value = list ?? [];
      pagination.total = count ?? 0;
      pagination.pageSize = formData.value.size;
      pagination.currentPage = formData.value.page;
    }
  });
  loading.value = false;
}

onMounted(() => {
  const p = useUserStoreHook().getMenuActions("standBook");
  powers.value = p;
  if (p.some(i => i === "001")) onSearch();
});
</script>

<template>
  <div class="main">
    <PagePower :is-show="powers.some(i => i === '001')">
      <TableProBar
        title="数据源"
        :loading="loading"
        :dataList="dataList"
        @refresh="onSearch"
      >
        <template #buttons>
          <el-button
            type="primary"
            :icon="useRenderIcon('add')"
            @click="() => searchModalRef.onDisplay()"
          >
            添加搜索条件
          </el-button>

          <el-button @click="handleResetQuery">重置查询条件</el-button>
        </template>
        <template v-slot="{ size, checkList }">
          <PureTable
            border
            align="left"
            showOverflowTooltip
            table-layout="auto"
            :size="size"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                v-if="powers.some(i => i === '007')"
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="() => toDetail(row.id)"
                :icon="useRenderIcon('eye-view')"
              />
            </template>
          </PureTable>
        </template>
      </TableProBar>
    </PagePower>

    <SearchModal ref="searchModalRef" @confirm-btn-click="handleQueryChange" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
