<template>
  <el-dialog v-model="dialog" title="手术项目搜索" @close="emit('close')">
    <el-input ref="searchInput" v-model="orderName" clearable style="width: 120px;"
              @keyup.enter="chaXunShouShuXiangMu"></el-input>
    <el-divider direction="vertical"></el-divider>
    <el-button type="primary" @click="chaXunShouShuXiangMu">查询</el-button>
    <el-table :data="shouShuShuJu.data" :height="windowSize.h / 1.5">
      <el-table-column label="编码" prop="opCode"></el-table-column>
      <el-table-column label="名称" prop="opName"></el-table-column>
      <el-table-column label="选中">
        <template #default="scope">
          <el-button @click="emit('xuanZhongShuJu',scope.row) ">选中</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="shouShuShuJu.currentPage"
        :page-size="shouShuShuJu.pageSize"
        :total="shouShuShuJu.total"
        layout="total,  prev, pager, next"
        @current-change="souSuoShouShuFenYe">
    </el-pagination>
  </el-dialog>
</template>

<script>
import {computed, onMounted, ref} from "vue";
import {fenLeiXiangQing} from "@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing";
import store from "@/store";
import {stringNotBlank} from "@/utils/blank-utils";

export default {
  name: "ChaXunShouShuXiangMu",
  emits: ['xuanZhongShuJu', 'close'],
  props: {
    code: {
      type: String,
      default: ''
    }
  },
  setup(props, {emit}) {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const orderName = ref('')
    const code = ref('')
    const searchInput = ref()

    const shouShuShuJu = ref({
      data: [],
      currentPage: 1,
      pageSize: 30,
      total: 0
    })


    const chaXunShouShuXiangMu = () => {
      code.value = ''
      fenLeiXiangQing('', orderName.value, 0, 1, shouShuShuJu.value.pageSize).then((res) => {
        shouShuShuJu.value.total = res.total
        shouShuShuJu.value.data = res.records
      })
    }


    const souSuoShouShuFenYe = (val) => {
      shouShuShuJu.value.currentPage = val
      fenLeiXiangQing(code.value, orderName.value, shouShuShuJu.value.total, val, shouShuShuJu.value.pageSize).then((res) => {
        shouShuShuJu.value.data = res.records
      })
    }

    onMounted(() => {
      if (stringNotBlank(props.code)) {
        code.value = props.code
        fenLeiXiangQing(code.value, orderName.value, shouShuShuJu.value.total, 1, shouShuShuJu.value.pageSize).then((res) => {
          shouShuShuJu.value.data = res.records
          shouShuShuJu.value.total = res.total
        })
      }
      setTimeout(() => {
        searchInput.value.focus()
      }, 100)
    })

    return {
      dialog: true,
      emit,
      orderName,
      chaXunShouShuXiangMu,
      shouShuShuJu,
      souSuoShouShuFenYe,
      searchInput,
      windowSize
    }
  }
}
</script>

<style scoped>

</style>
