<script setup lang="ts">
import { ElInput } from "element-plus";
import { reactive, ref, nextTick, watch } from "vue";
import useHotRef from '@/composables/useHotRef';

const libID = ref('1')
const options = reactive([
  {
    ID: '1',
    name: 'Option1',
  },
  {
    ID: '2',
    name: 'Option2',
  },
])

const showSearchResult = ref(false)
const searchCount = ref(0)

// 搜索框的模板引用
const searchRef = ref<typeof ElInput>();

const searchValue = ref('')
const handleSearch = () => {
  console.log('搜索')

  searchRef.value && searchRef.value.blur();
  searchCount.value = 0;
  // searchResults.length = 0;
  // currentIndex = -1;
  showSearchResult.value = true;
  // const searchKey = searchValue.value.toLowerCase();
}


const preMatch = () => {
  console.log('上一个')
}

const nextMatch = () => {
  console.log('下一个')
}

const { getHotRef, notNull } = useHotRef();
const hotRef = getHotRef();

// 重新渲染表格
const Render = () => {
  hotRef.value && hotRef.value.Render();
  console.log('std bill render')
}

// const tableData = []

// const tableSettings = {
// }

// 显示或隐藏搜索结果栏，都重新 Render hot
watch(showSearchResult, async () => {
  await nextTick();
  Render()
});

defineExpose({
  Render
})
</script>

<template>
  <section class="std-bill">
    <!-- 过滤栏 -->
    <div class="filter-bar">
      <el-select size="mini" style="width: 100%" v-model="libID">
        <el-option v-for="item in options" :key="item.ID" :label="item.name" :value="item.ID" />
      </el-select>
      <el-input
        size="mini"
        placeholder="输入编码或名称"
        v-model="searchValue"
        @keypress.enter="handleSearch"
        ref="searchRef"
      >
        <template #prefix>
          <iconfont class="dsk-search" style="color: #6d7679" />
        </template>
        <template #suffix>
          <iconfont class="dsk-enter-key" style="color: #37599f" />
        </template>
      </el-input>
    </div>
    <!-- 搜索结果栏 -->
    <div class="search-result-nav" v-show="showSearchResult">
      <p class="count">搜索结果: {{ searchCount }}</p>
      <el-button-group class="nav-button-group">
        <el-button type="primary" size="mini" @click="preMatch">上一个</el-button>
        <el-button type="primary" size="mini" @click="nextMatch">下一个</el-button>
      </el-button-group>
      <i class="el-icon-close close-button" @click="showSearchResult = false" />
    </div>
    <!-- 表格区域 -->
    <div
      class="table-area"
      :style="{ height: showSearchResult ? 'calc(100% - 68px)' : 'calc(100% - 36px)' }"
    >
      <!-- <handsontable :data="tableData" :settings="tableSettings" border="none" ref="hotRef" /> -->
      表格区域
    </div>
  </section>
</template>

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