<template>
  <syCommonDialog
    type="element"
    show-mask
    :visible="visible"
    @close-popup="$emit('update:visible', false)"
    element-dialog-size="medium"
    :element-dialog-props="{
      title: '关联溯源hash',
      classes: ['category_dialog'],
    }"
    @closed="clearProofList"
  >
    <Search
      v-model="searchKeywords"
      placeholder="搜索"
      style="margin-top: -13px"
    ></Search>
    <syScrollBar @scroll-to-end="pagechange" style="height: 370px">
      <div class="floderList">
        <div v-if="proofList.length >= 1" class="infinite-list">
          <div
            v-for="i in proofList"
            class="infinite-list-item flex justify-between"
          >
            <div
              class="overflow-hidden text-ellipsis flex-grow whitespace-nowrap"
            >
              {{ i.name }}
            </div>
            <div class="flex-shrink-0">
              <syButton
                mode="elementBtn"
                size="small"
                style="min-width: 57px"
                @click="preview(i)"
                >预览</syButton
              >
              <syButton
                mode="elementBtn"
                type="primary"
                size="small"
                @click="checkProof(i)"
                style="min-width: 57px"
                >关联</syButton
              >
            </div>
          </div>
        </div>
        <div v-else class="search_empty !pt-20">
          <span v-if="searchKeywords !== ''"
            >没有找到匹配结果，尝试其他关键词搜索</span
          >
          <span v-else>搜索无结果</span>
        </div>
      </div>
    </syScrollBar>
  </syCommonDialog>
</template>

<script setup lang="ts">
import { $ajax } from "@/service";
import {
  GO_URLS,
  syCommonDialog,
  syButton,
  openChainBrowser,
  syScrollBar,
} from "cqk-sy-ui";
import { ref, watch } from "vue";
import Search from "@/components/Search/index.vue";
import { debounce } from "lodash";
import { globalState } from "@/store/state";
const props = defineProps<{
  visible: boolean;
  checkProof: (...args: any) => any;
}>();
const emit = defineEmits(["update:visible", "select"]);
const searchKeywords = ref("");
const page = ref(1);
const proofList = ref<any[]>([]);

function searchByKeyWords() {
  page.value = 1;
  proofList.value = [];
  getCateGoryList(page.value, searchKeywords.value);
}

const debouncedSearch = debounce(() => {
  searchByKeyWords();
}, 800);

watch(searchKeywords, () => {
  debouncedSearch();
});

watch(
  () => props.visible,
  () => {
    if (props.visible) {
      getCateGoryList(page.value, "");
    }
  }
);

const preview = (i: any) => {
  openChainBrowser(i.hash, globalState.urlList.chain_browser_url);
};

async function getCateGoryList(page: number, key_words?: string) {
  const res = await $ajax({
    type: "post",
    url: GO_URLS.list,
    params: {
      is_valid: 0,
      page,
      page_size: 15,
      status: [2],
      key_words,
    },
  });
  if (res && res.data.results) {
    proofList.value = proofList.value.concat(res.data.results);
  }
}

function clearProofList() {
  searchKeywords.value = "";
  page.value = 1;
  proofList.value = [];
}

function pagechange() {
  page.value++;
  getCateGoryList(page.value, searchKeywords.value);
}
</script>

<style lang="scss">
.category_dialog {
  .floderList {
    margin-top: 15px;
    .infinite-list {
      padding: 0 15px;
      .infinite-list-item {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        cursor: pointer;
        &:hover {
          background-color: #f7f9fb;
          color: var(--sy-blue);
        }
      }
    }
    .search_empty {
      box-sizing: border-box;
      height: 300px;
      padding-top: 10px;
      text-align: center;
      color: #c0c4cc;
    }
  }
}
</style>
