<template>
  <!-- 药品 库存  -->
  <el-dialog
    :title="title"
    @close="openClose()"
    v-model="openStudentInfo"
    :width="`${style.width}`"
  >
    <!-- 查询功能 -->
    <el-form :model="queryParamsStuden" ref="queryRef" label-width="68px">
      <!--  -->
      <el-row>
        <!--  -->
        <el-col :span="8" v-if="controlQueryParams[0].display" >
          <el-form-item :label="`${controlQueryParams[0].label}`" :prop="`${controlQueryParams[0].prop}`">
            <!-- 后面 使用 数组 存储  -->
            <el-input
              v-model="queryParamsStuden.name"
              :placeholder="`${controlQueryParams[0].placeholder}`"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <!--  -->
        <el-col :span="8" v-if="controlQueryParams[1].display" >
          <el-form-item :label="`${controlQueryParams[1].label}`" :prop="`${controlQueryParams[1].prop}`">
            <el-input
              v-model="queryParamsStuden.barcode"
              :placeholder="`${controlQueryParams[1].placeholder}`"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <!--  -->
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 显示列表 -->
    <el-row>
      <el-col :span="24">
        <!-- 表格  -->
        <el-table
          v-loading="loading"
          :data="studentList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <!--  -->
          <el-table-column v-if="controlData[0].display" :label="`${controlData[0].label}`" 
          :align="`${controlData[0].align}`" :prop="`${controlData[0].prop}`" />
          <!--  -->
          <el-table-column v-if="controlData[1].display" :label="`${controlData[1].label}`" 
          :align="`${controlData[1].align}`" :prop="`${controlData[1].prop}`" />
          <!-- 操作 -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="selectValue(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParamsStuden.pageNum"
          v-model:limit="queryParamsStuden.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>


<script setup name="StudentInfoList">

const { proxy } = getCurrentInstance();

// 显示 的 控制
const openStudentInfo = ref(false)

const loading = ref(false);
const total = ref(0);


const props = defineProps({
  open: {
    type: Boolean,
    onUpdate: Function,
  },
  style: {
    type: Object,
    onUpdate: Function,
    default: {
        width: '90%'
    }
  },
  // 请求  参数
  queryParams: {
    type: Object,
    onUpdate: Function,
  },
  // 控制 查询 的 参数 显示  
  controlQueryParams: {
    type: Array,
    default: () => [
        {
            id: 0,
            name: "",
            display: true,
            label: "学号",
            prop: "studentId",
            model: "studentId",
            placeholder: "请输入学号",
        },
        {
            id: 1,
            name: "",
            display: true,
            label: "姓名",
            prop: "name",
            model: "name",
            placeholder: "请输入姓名",
        }
    ]
  },
  // 控制 列表 显示 的 数据 
  controlData: {
    type: Array,

    default: () => [
        {
            id: 0,
            name: "编号",
            display: true,
            prop: "id",
            label: "编号",
            align: "",
            width: "",
        },
        {
            id: 1,
            name: "学号",
            display: true,
            prop: "studentId",
            label: "学号",
            align: "",
            width: "",
            
        }
    ]
  }
});



const queryParamsStuden = ref({
    studentId: "",
    name: "",
});


// import { getStudentInfo } from "@/api/healthcare/outpatientService/patientDiagnosis"

const studentList = ref([]);

// 获取 学生 列表 
function getList() {
    // //
    // loading.value = true;
    // getStudentInfo(queryParamsStuden.value).then((response)=> {
    //     studentList.value = response.rows
    //     loading.value = false
    // })
}


// 搜索 功能 
function handleQuery() {
    getList()
}


// 重置 功能 
function resetQuery() {

}


// 方法 控制 弹框 的 显示
const openDialog = () => {
    openStudentInfo.value = true;
};

// 方法 控制 弹框 的 隐藏
const closeDialog = () => {
    openStudentInfo.value = false;
};


// 可以 给 queryRef 组件 暴露 方法   父组件 可以 调用 子组件 的 方法
defineExpose({
  openDialog,
  closeDialog,
});


</script>


