<script setup>
import { getFullUrl } from '~/utils/helper';

const props = defineProps({
  pid: String
})

const page = sessionStorage.getItem('personal/homework/ssys/xszy/list-page')
const queryForm = reactive({
  limit: 60,
  page: page ? parseInt(page) : 1,
  ks_id: props.pid,
  yys_id: undefined,
  keyword: undefined
})
let data = $ref([])
let total = $ref(0)

const router = useRouter()
function routerPush(name, data) {
  sessionStorage.setItem('personal/homework/ssys/xszy/list-page', queryForm.page)
  router.push({ name, ...data })
}

function queryData() {
  request({
    url: '/yzy/zy_ssys_dtjl/index',
    data: queryForm
  }).then(res => {
    if (res.code === '1') {
      data = res.data.page_data
      total = res.data.total_rows * 1
    }
  })
}
queryData()


const checkboxValue = $ref([])
function handleDel() {
  console.log('checkboxValue :>> ', checkboxValue);
  if (checkboxValue.length) {
    request({
      url: '/yzy/zy_ssys_dtjl/delete',
      data: {
        yzsd_id: checkboxValue//.join(',')
      }
    }).then(res => {
      if (res.code === '1') {
        queryData()
      }
    })
  }
}

function getImgUrl(item) {
  if (item.yzsd_file && (item.yzsd_file.endsWith('.mp3') || item.yzsd_file.endsWith('.mp4'))) {
    return item.yz_img_cropping
  }
  return item.yzsd_file
}

</script>

<template>
  <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4 mb-4 justify-between">
    <div class="flex">
      <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 class="text-hex-949494"> - 学生作业</span>
        <span> - 学生作业</span>
      </div>
    </div>

    <el-button type="primary" @click="router.back()">返回</el-button>
  </div>
  <div class="w-full p-4 shadow">

    <!-- 上传 -->
    <div class="flex items-center justify-between w-full mb-8">
      <div class="w-280px">
        <remote-select v-model="queryForm.yys_id" url="/yzy/zy_ssys/index" :d="{ 'ssyskc_id': props.pid }"
          :fields="['yys_id', 'yys_name']" size="large" placeholder="全部" :change="queryData"></remote-select>
      </div>


      <div class="flex space-x-6">
        <div class="w-100px h-40px flex_center rounded bg-red-500 text-white cursor-pointer" @click="handleDel">
          删除作业
        </div>
        <div class="w-100px h-40px flex_center rounded bg-hex-00A3FF text-white cursor-pointer"
          @click="routerPush('personal_homework_ssys_xszy_up')">
          上传作业
        </div>
        <div class="w-500px h-40px">
          <search-input v-model="queryForm.keyword" @search="queryData" class="h-40px"></search-input>
        </div>
      </div>
    </div>

    <div class="flex flex-wrap w-full justify-start">
      <template v-if="data.length">
        <el-checkbox-group class="flex flex-wrap w-full justify-start" v-model="checkboxValue">
          <div class="w-1/5 flex_center mb-4 " v-for="i in data" :key="i.yzsd_id">
            <div class="w-268px h-234px rounded-xl shadow bg-white flex flex-col overflow-hidden cursor-pointer relative">
              <!-- <div class="flex_center absolute "></div> -->
              <el-checkbox :label="i.yzsd_id" class="nonchecklabel left-4 top-4 z-10" style="position: absolute;" />
              <div class="w-full flex-none h-187px">
                <img :src="getFullUrl(getImgUrl(i))" alt="" class="w-full h-full object-contain" />
              </div>
              <div class="p-2 flex justify-between items-center flex-auto">
                <!-- {{ i.name }} -->
                <el-rate disabled :model-value="i.yzsd_star * 1"></el-rate>
                <div>
                  <div
                    class=" w-58px h-24px flex_center rounded-full border border-hex-00A3FF text-hex-00A3FF text-xs cursor-pointer"
                    @click="routerPush('personal_homework_ssys_xszy_edit', { params: { id: i.yzsd_id } })">评价</div>
                  <!-- <div class="w-58px h-24px flex_center rounded-full border border-hex-00A3FF text-hex-00A3FF text-xs cursor-pointer" @click="routerPush('personal_homework_ssys_xszy_detail',{params:{id:i.yzsd_id}})">查看</div> -->
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </template>

      <div v-else class="flex justify-center w-full">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <div class="flex justify-end mt-6 mb-2">
      <el-pagination background layout="prev, pager, next" :page-size="queryForm.limit" :total="total"
        v-model:current-page="queryForm.page" @current-change="queryData()" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nonchecklabel {
  --el-checkbox-input-width: 20px;
  --el-checkbox-input-height: 20px;

  :deep(.el-checkbox__label) {
    display: none;
  }

  :deep(.el-checkbox__inner::after) {
    top: 3px;
    left: 7px;
    height: 10px;
  }
}
</style>
