<script setup lang='ts'>
import { useRouter, RouteLocationRaw } from 'vue-router'
import user from '~/store/user'
import tabContainer from './container.vue'


const router = useRouter()
function routerPush(_route: RouteLocationRaw) {
  router.push(_route)
}

// const tableData = ref<any[]>([])
// const total = ref(0)

const queryForm = reactive({
  dc_grade_id: '',
  dc_subject_id: '',
  dc_keyword: '',
  page: 1
})

// watch(queryForm, () => {
//   doQuery()
// }, { deep: true, immediate: true })

// function doQuery() {
//   request({
//     url: '/dyaw/ctfx/index',
//     data: {
//       ...queryForm,
//       sm_id: user.sm_info.sm_id,
//       limit: 8,
//       dc_check: '1'
//     }
//   }).then(res => {
//     if (res.code === "1") {
//       tableData.value = res.data.page_data
//       total.value = parseInt(res.data.total_rows)
//     }
//   })
// }

// TODO: 临时处理
function translateString(str: string) {
  return str
}

function getGradeAndSubject({ grade, subject }: { grade: string, subject: string }) {
  console.log(grade, subject)
  queryForm.dc_grade_id = grade
  queryForm.dc_subject_id = subject
}

</script>

<template>
  <tab-container>

    <div class="flex justify-between items-center sticky top-90px z-100  bg-light-50">
      <van-search v-model="queryForm.dc_keyword" placeholder="请输入搜索关键词" class="flex-auto" background="transparent" />
      <span class="pr-10px">
        <multi-tree-select @confirm="getGradeAndSubject"></multi-tree-select>
      </span>
    </div>

    <remote-list url="/dyaw/ctfx/index" :d="{
      ...queryForm,
      sm_id: user.sm_info.sm_id,
      dc_check: '1'
    }" class="mt-2 flex-auto">
      <template #default="{ row: d }">
        <van-cell>
          <div class="cursor-pointer rounded shadow-dark-100 px-4 py-2 shadow-md drop-shadow-md h-110px space-y-2"
            @click="routerPush({ name: 'teacher_index_detail', params: { id: d.dc_id } })">
            <div class="flex justify-between">
              <div class="text-xl whitespace-nowrap overflow-ellipsis overflow-hidden max-w-200px">{{ d.dc_title }}</div>
              <van-tag type="primary">{{ d.dc_keyword }}</van-tag>
            </div>
            <div class="flex space-x-6 text-gray-500">
              <div>{{ d.dc_grade_name }}</div>
              <div>{{ d.dc_subject_name }}</div>
            </div>

            <div class="text-left text-sm text-gray-500 whitespace-nowrap overflow-ellipsis overflow-hidden">{{
              translateString(d.dc_content) }}</div>
          </div>
        </van-cell>
      </template>
    </remote-list>

  </tab-container>
</template>

