<script setup>
// import { Search as IconSearch } from '@element-plus/icons-vue';
import { getFullUrl } from '~/utils/helper';

const queryForm = reactive({
  keyword: '',
  page: 1,
  limit: 10,
  show_kc: 1
})

let total = $ref(0)
let data = $ref([])

let activeTab = $ref('fav')

const fromOptions = [
  { k: '课程资源', v: 'kczy', url: '/kczy/files_', field: { fd: 'kczy_files', name: 'kf_name', file: 'kf_img', star: 'kf_star_num', fav: '', like: 'kf_like_num' } },
  { k: '智慧教研', v: 'zhjy', url: '/zhjy/zxxx_', field: { fd: 'zhjy_zxxx', name: 'zz_name', file: 'zz_img', star: 'zz_star_num', fav: 'zz_fav_num', like: 'zz_like_num' } },
  { k: '艺术广场', v: 'ysgc', url: '/ysgc/zp_', field: { fd: 'ysgc_zp', name: 'yz_name', file: 'yz_img', star: 'yz_star_num', fav: 'yz_fav_num', like: 'yz_like_num' } },
]
const activeFrom = $ref(fromOptions[0])


function tabTo(name) {
  activeTab = name
}

function queryData() {
  request({
    url: `${activeFrom.url}${activeTab}/index`,
    data: queryForm
  }).then(res => {
    if (res.code === '1') {
      console.log('res :>> ', res);
      total = res.data.total_rows * 1
      data = res.data.page_data.map((i) => {
        const item = i[activeFrom.field.fd]
        return ({
          name: item[activeFrom.field.name],
          file: item[activeFrom.field.file],
          star: item[activeFrom.field.star] * 1
        })
      })
    }
  })
}
queryData()

watch(
  () => [$$(activeFrom), $$(activeTab), $$(queryForm)],
  () => {
    queryData()
  },
  { deep: true }
)

</script>

<template>
  <!-- <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4 mb-4">
    <div class="text-lg text-hex-050026">创建作业</div>
    <el-divider direction="vertical" />
    <div class="text-sm">
      <span class="text-hex-949494">作业</span>
      <span class="text-hex-949494"> - 全景课堂</span>
      <span> - 创建作业</span>
    </div>
  </div> -->

  <div class="w-full shadow bg-white rounded-md flex items-center px-4 py-4 flex-col">
    <div class="flex items-center justify-between w-full mb-8">
      <div class="border p-1 rounded-md flex text-hex-666 ">
        <div @click="tabTo('fav')" class="w-14 text-center rounded-md py-1 px-2 cursor-pointer "
          :class="activeTab==='fav'&&'text-black bg-hex-E8F3FA font-semibold'">赞</div>
        <div @click="tabTo('like')" class="w-14 text-center rounded-md py-1 px-2 cursor-pointer "
          :class="activeTab==='like'&&'text-black bg-hex-E8F3FA font-semibold'">收藏</div>
      </div>

      <div class="flex">
        <el-select v-model="activeFrom" value-key="v" class="w-200px" size="large">
          <el-option v-for="opt in fromOptions" :label="opt.k" :value="opt"></el-option>
        </el-select>
        <div class="w-300px ml-8">
          <search-input class=" h-40px" v-model="queryForm.keyword" @search="queryData"></search-input>
        </div>
      </div>
    </div>

    <div class="flex flex-wrap w-full justify-start">
      <template v-if="data.length">
        <div class="w-1/5 flex_center mb-4" v-for="i in data">
          <div class="w-268px rounded-xl shadow bg-white flex flex-col overflow-hidden cursor-pointer" :key="i">
            <div class="w-full flex-none h-157px">
              <img :src="getFullUrl(i.file)" alt="" class="w-full h-full" />
            </div>
            <div class="p-2 flex flex-col flex-auto">
              <div>{{ i.name }}</div>
              <el-rate disabled :model-value="i.star*1"></el-rate>
            </div>
          </div>
        </div>
      </template>

      <div v-else class="flex justify-center w-full">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <div class="flex justify-end mb-8 w-full mt-8">
      <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="queryForm.page" />
    </div>
  </div>


</template>
