<script setup lang="ts">
import { Search, } from "@element-plus/icons-vue";
import type { RouteLocationRaw } from 'vue-router'

const router = useRouter()

const searchValue = ref("");


function onClickLeft() {
  router.back()
}

function routerPush(to: RouteLocationRaw) {
  router.push(to)
}
</script>

<template>
  <van-nav-bar title="学生档案" left-text="" left-arrow @click-left="onClickLeft"
    style="--van-nav-bar-background:#397FF6;--van-nav-bar-icon-color:#fff;--van-nav-bar-title-text-color:#fff;--van-nav-bar-title-font-size:18px;--van-nav-bar-text-color:#fff;" />
  <div class="p-10px flex-auto flex flex-col justify-start bg-hex-f2f2f2 space-y-4">
    <el-input autocomplete="off" name="searchValue" v-model="searchValue" size="large" :prefix-icon="Search"
      @focus="searchValue = ''" clearable placeholder="搜索"
      :style="`${searchValue === '搜索' && '--ep-input-text-color:var(--ep-text-color-placeholder);'}`"></el-input>

    <remote-list-half url="/dyaw/xlfw_xsda/index" :d="{
      keyword: searchValue === '搜索' ? undefined : searchValue,
      admin: 1,
    }" class="mt-2 flex-auto">
      <template #default="{ row: item }">
        <div @click="routerPush({ name: 'teacher_archives_stu', params: { id: item.user_id } })"
          class="space-y-2 bg-white shadow rounded  p-3 text-sm">
          <div class="flex">
            <div class="w-18">姓名：</div>
            <div>{{ item.dxx_user_realname }}</div>
          </div>
          <div class="flex">
            <div class="w-18">学校：</div>
            <div>{{ item.dxx_school_name }}</div>
          </div>
          <div class="flex">
            <div class="w-18">年级班级：</div>
            <div>{{ item.dxx_class_name }}</div>
          </div>
          <div class="flex">
            <div class="w-18">咨询次数：</div>
            <div>{{ item.dxx_zxcs }}</div>
          </div>
          <div class="flex">
            <div class="w-18">档案数量：</div>
            <div>{{ item.dxx_dasl }}</div>
          </div>
          <div class="flex_center pt-1"><van-button type="primary" size="small">查看</van-button></div>
        </div>
      </template>
    </remote-list-half>
  </div>
</template>

<style scoped lang="scss">
.xsda {
  background: #fff;
  box-sizing: border-box;
  padding: 1%;
}

.allOptions {
  text-align: right;
  margin-bottom: 10px;
}

.allTables {
  min-height: 300px;
  margin-top: 20px;
}

.pag {
  margin: 20px 0;
  overflow: hidden;
}

.pageC {
  float: right;
}

.el-input__wrapper {
  border-radius: 20px;
}
</style>
