<script setup lang='ts'>
import { TypeMap, formatNumber, getFullPath } from '~/pages/detail/util'
import zzzbImg from '~/assets/zzzb.png'

const props = defineProps<{
  type: string
  tmk_id: string
}>()
console.log('detail list props : ', props)
const router = useRouter()
const theType = TypeMap[props.type]

const otherData: any = {}
if (Array.isArray(theType.pid)) {
  const values = props.tmk_id.split('-')
  theType.pid.forEach((item: string, idx: number) => {
    otherData[item] = values[idx]
  })
}
else {
  otherData[theType.pid] = props.tmk_id
}

const queryForm = reactive({
  ...otherData,
  keyword: '',
})
</script>

<template>
  <van-nav-bar left-arrow title="相关章节" @click-left="() => router.back()" />
  <van-search v-model="queryForm.keyword" placeholder="请输入搜索关键词" :clearable="false" />

  <remote-list :url="`/txwx/${props.type}/index`" :d="queryForm">
    <template #default="{ rows }">
      <div class="px-14px py-20px grid grid-cols-2 gap-10px">
        <div
          v-for="item in rows" :key="item[theType.id]"
          class="relative w-44vw rounded-8px overflow-hidden shadow flex flex-col"
          @click="router.push(`/detail/${props.type}/${props.tmk_id}/${item[theType.id]}`)"
        >
          <template v-if="props.type === 'zbkc_ks'">
            <div v-if="item.status === 1" class="rounded-tl-6px rounded-br-6px absolute top-0 left-0 text-12px text-white bg-hex-ef7a02d9 px-10px py-5px">
              {{ item.status_msg }}
            </div>
            <div v-if="item.status === 2" class="rounded-t-6px absolute z-10 w-full h-100px top-0 left-0 text-14px text-hex-00A3FF bg-hex-00000066 flex items-center">
              <div class="text-center w-full">
                <img class="m-auto" :src="zzzbImg" alt="">
                <div>{{ item.status_msg }}</div>
              </div>
            </div>
            <div v-if="item.status === 3" class="rounded-tl-6px rounded-br-6px absolute top-0 left-0 text-12px text-white bg-hex-797979d9 px-10px py-5px">
              {{ item.status_msg }}
            </div>
          </template>

          <div class="absolute top-0 right-0 flex text-12px px-6px py-4px text-white bg-hex-00000050">
            <div class="flex items-center">
              <van-icon name="eye-o" size="12" />
              <div class="ml-4px w-24px tracking-tighter">
                {{ formatNumber(item[theType.lll]) }}
              </div>
            </div>
            <div class="flex items-center ml-4px">
              <van-icon name="good-job-o" size="12" />
              <div class="ml-4px w-24px tracking-tighter">
                {{ formatNumber(item[theType.dzl]) }}
              </div>
            </div>
          </div>
          <img :src="getFullPath(item[theType.img])" alt="" class="w-full h-24.75vw">
          <div class="p-8px  flex-auto flex flex-col justify-between">
            <div class="text-14px font-bold pb-8px leading-16px truncate">
              {{ item[theType.title] }}
            </div>
            <div class="flex justify-between text-12px ">
              <div class="whitespace-nowrap mr-8px">
                {{ item[theType.teacher] }}
              </div>
              <div class="truncate max-w-48px">
                {{ item[theType.school] }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </remote-list>
</template>
