<template>
  <div class="hct-search">
    <el-select
      v-if="isCustom"
      ref="selectRef"
      placeholder="Select"
      filterable
      :teleported="teleported"
      @change="change"
    >
      <el-option disabled>
        <div class="search-title">
          <span>{{ valueText }}</span>
          <span>{{ labelText }}</span>
        </div>
      </el-option>
      <el-option
        v-for="item in tableData[pageNum - 1]"
        :key="item[value]"
        :label="item[label]"
        :value="item[value]"
      >
        <div class="search-content">
          <span>{{ item[value] }}</span>
          <span>{{ item[label] }}</span>
        </div>
      </el-option>
      <div class="footer">
        <span> 共{{ total }}条 </span>
        <el-pagination
          v-model:currentPage="pageNum"
          v-model:page-size="pageSize"
          small="small"
          :background="background"
          layout="prev, slot, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <span key="1">
            {{ pageNum }}
          </span>
        </el-pagination>
        <span key="2"> 共{{ Math.ceil(total / pageSize) }}页 </span>
      </div>
    </el-select>
    <el-select
      v-else
      placeholder="Select"
      filterable
      v-bind="$attrs"
      v-on="$listener"
    >
      <slot />
    </el-select>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
let props = defineProps({
  isCustom: {
    type: Boolean,
    defalut: false,
  },
  list: {
    type: Array,
    defalut: [],
  },
  value: {
    type: String,
    defalut: "value",
  },
  valueText: {
    type: String,
    defalut: "value",
  },
  label: {
    type: String,
    defalut: "label",
  },
  labelText: {
    type: String,
    defalut: "label",
  },
});
const tableData = ref({});
const selectRef = ref();
const teleported = ref(true);
let list = ref(props.list);
let current = ref(0);
list.value.forEach((ele, index) => {
  if (index % 8 == 0) {
    current.value = index / 8;
    tableData.value[current.value] = [ele];
    console.log(current.value);
  } else {
    tableData.value[current.value].push(ele);
    console.log(current.value);
  }
});
setTimeout(() => {
  console.log(tableData.value);
}, 1000);
let pageSize = ref(8);
let pageNum = ref(1);
let total = ref(props.list.length);
const change = (event) => {
  console.log(event);
};
const rowClick = (row, column, event) => {
  console.log(row, column, event);
  // selectRef.value.focus();
  nextTick(() => {
    teleported.value = false;
    selectRef.value.blur();
  });
};
</script>

<script>
export default {
  name: "HctSearch",
};
</script>

<style scoped lang="scss">
.hct-search {
  width: 250px;
  :deep(.el-select-dropdown__item) {
    padding: 0 !important;
    line-height: 24px !important;
    height: 24px !important;
  }
  :deep(.el-select-dropdown__list) {
    padding-bottom: 30px !important;
  }
}
.search-title {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  span {
    display: inline-block;
    width: 50%;
    text-align: center;
    color: #333;
  }
}
.search-content {
  width: 200px;
  line-height: 24px;
  height: 24px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    color: #666;
    // border: 1px solid #ddd;
  }
}
/* 整个滚动条 */
:deep(::-webkit-scrollbar) {
  /* 对应纵向滚动条的宽度 */
  width: 0;
}
.footer {
  height: 30px;
  line-height: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  background-color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
