<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElInput } from "element-plus";

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 rationType = ref('selectedLib');

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 topSize = ref(60)
const bottomSize = ref(40)

const handleTopResize = (size: number) => {
  topSize.value = size
}

const handleBottomResize = (size: number) => {
  bottomSize.value = size
}


const showRationTable = ref(false)

const Render = () => {
  // 重新渲染
  // hotRef.value && hotRef.value.Render();
  console.log('lib ration render')
}

defineExpose({
  Render
})
</script>

<template>
  <section class="lib-ration">
    <!-- 过滤栏 -->
    <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-radio-group class="nav-button-group" v-model="rationType" size="mini">
        <el-radio-button label="selectedLib">本定额</el-radio-button>
        <el-radio-button label="all">全部定额</el-radio-button>
      </el-radio-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)' }"
    >
      <resizable-layout direction="vertical" ref="layoutRef">
        <!-- 章节 -->
        <resizable-layout-item
          :weight="topSize"
          :min-height="200"
          @resize="handleTopResize"
          v-if="!showSearchResult"
        >
          <!-- <handsontable
            :data="chapterTableTreeData"
            :settings="chapterTableSettings"
            tree
            border="bottom"
            :loading="chapterLoading"
            ref="chapterHotRef"
            @dblclick="handleChapterDbClick"
          />-->
          <span
            class="临时待删"
            style="display: block; height:100%; width:100%; background: #eee;"
          >上面表格区域</span>
        </resizable-layout-item>
        <!-- 定额 -->
        <resizable-layout-item :weight="bottomSize" :min-height="200" @resize="handleBottomResize">
          <!-- <context-menu :item-groups="contextMenuGroups" :read-only="unitReadOnly"> -->
          <!-- <handsontable
              v-if="showRationTable"
              :data="rationTableData"
              :settings="rationTableSettings"
              :loading="rationLoading"
              border="top"
              ref="rationHotRef"
              @dblclick="handleRationDbClick"
          />-->
          <span
            class="临时wrap，待删"
            style="display: block; height:100%; width:100%; background: #eee;"
            v-if="showRationTable"
          >下面表格区域</span>
          <el-empty
            v-else
            :image-size="80"
            style="border-top: 1px solid #ddd"
            description="请选择具体章节"
          />
          <!-- </context-menu> -->
        </resizable-layout-item>
      </resizable-layout>
    </div>
  </section>
</template>

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