<template>
  <window-size>
    <div>
      <van-field v-model="inputVal" label="药品名称" right-icon="search" placeholder="在此输入药品名称搜索药品"></van-field>
    </div>
    <div class="flex-box t-head">
      <div style="width: 25%">名称</div>
      <div style="width: 30%">医保码</div>
      <div style="width: 30%">规格</div>
      <div style="width: 15%">价格</div>
    </div>
    <div :style="scrollStyle">
      <div v-for="(fee, index) in filterMedicines.slice(pageSize * (currentPage - 1), pageSize * currentPage)" :key="index">
        <div class="flex-box t-line">
          <div style="width: 25%">{{ fee.name }}</div>
          <div style="width: 30%">{{ fee.nationalCode }}</div>
          <div style="width: 30%">{{ fee.specification }}</div>
          <div style="width: 15%">{{ fee.price }}</div>
        </div>
      </div>
    </div>
    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: white">
      <van-pagination
          v-model="currentPage"
          :total-items="filterMedicines.length"
          :items-per-page="pageSize"
          force-ellipses
          @change="handleCurrentPageChange"
      />
    </div>
  </window-size>
</template>

<script setup>
import {selectMedicinePrices} from '@/api/query-price.js'
import {computed, onMounted, ref} from "vue";
import store from "@/store";

const scrollStyle = {
  height: store.state.screenSize.h - 170 + 'px',
  overflowY: 'scroll',
}

const inputVal = ref(null)

const filterMedicines = computed(() => {
  return medicines.value.filter(item => {
    if (!inputVal.value) {
      return true
    }
    return item.name.indexOf(inputVal.value) > -1
  })
})

const medicines = ref([])

const currentPage = ref(1)
const pageSize = ref(30)
const handleCurrentPageChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  selectMedicinePrices().then(res => {
    medicines.value = res
  })
})
</script>

<style scoped>
.flex-box {
  display: flex;
}

.flex-box > div {
  padding: 0 2px;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
}

.t-head {
  font-size: 14px;
  font-weight: bold;
  padding: 4px 0;
  border-bottom: 1px solid #333;
}

.t-line {
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px solid lightgray;
  align-items: center;
}
</style>