<script setup>
// import CommonHeader from "@/components/CommonHeader/index.vue";
import CheckRow from "~/components/CheckRow/index.vue";

import img_lczs from '~/assets/zbktssys/bar.png';


import { View as IconView, Histogram as IconHistogram, Search as IconSearch } from '@element-plus/icons-vue';
import { getFullUrl, getAvatarUrl } from '~/utils/helper';

const queryForm = reactive({
  ks_status: 2,
  grade_id: undefined,
  team_id: undefined,
  limit: 10,
  page: 1
})
const keyword = $ref('')

watch(
  queryForm,
  () => {
    queryData()
  }
)

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

let nj = $ref()
let fc = $ref()

request({
  url: '/jcxx/grade/index',
  data: {
    limit: 99
  }
}).then(res => {
  if (res.code === '1') {
    nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
  }
})


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

request({
  url: '/kzkt/ssyskc/index',
  data: { ...queryForm, keyword }
}).then(res => {
  if (res.code === '1') {
    fc = [{ n: '全部', v: undefined }].concat(res.data.table_structure.field.team_id.option)
    data = res.data.page_data
    total = res.data.total_rows * 1
  }
})


function hrefTo(href) {
  window.open(href, '_blank')
}

const router = useRouter()

function handleJyClick(row) {
  router.push(`/zbkt/ssys/content/${row.ks_id}`)
}

function handleRtcClick(row) {
  if (row.ks_status === 2) {
    router.push(`/zbkt/ssys/rtc/${row.ks_id}`)
  }
}

</script>

<template>
  <common-header />
  <div class="w-full flex items-center justify-center shadow-sm h-60px bg-hex-fefefe">
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">双师一生</div>
      <el-divider direction="vertical" />
      <div class="text-sm">
        <span class="text-hex-949494">直播课堂</span>
        <span> - 双师一生</span>
      </div>
    </div>
  </div>

  <div class="w-full relative h-200px">
    <img :src="img_lczs" alt="" class="w-full h-full">
    <div class="w-full h-full absolute top-0 z-2 flex flex-col items-center justify-evenly">
      <div class="text-hex-fff text-5xl">双师一生</div>
      <el-input class="input w-500px h-50px rounded-md" placeholder="搜索关键字" v-model="keyword">
        <template #suffix>
          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
            @click="queryData()" >
            <el-icon size="13" color="#fff">
              <IconSearch />
            </el-icon>
          </div>
        </template>
      </el-input>
    </div>
  </div>

  <div class="w-full flex items-center justify-center mt-4">
    <div class="w-1400px flex flex-col">
      <div class="w-full">
        <el-tabs v-model="queryForm.ks_status">
          <el-tab-pane label="进行中" :name="2"></el-tab-pane>
          <el-tab-pane label="待开始" :name="1"></el-tab-pane>
          <el-tab-pane label="已结束" :name="3"></el-tab-pane>
        </el-tabs>
      </div>


      <div class="mt-4">
        <check-row v-model="queryForm.grade_id" label="年级" :items="nj"></check-row>
        <!-- <check-row v-model="queryForm.team_id" label="分册" :items="fc"></check-row> -->
      </div>

      <div class="flex flex-wrap justify-between">
        <template v-if="data.length">
          <div class="w-647px h-155px rounded-xl shadow-lg my-7 flex overflow-hidden" v-for="i in data">
            <div class="w-264px h-full flex-none">
              <img :src="getFullUrl(i.ks_img)" alt="" class="w-full h-full">
            </div>
            <div class="p-2 pr-6 flex-auto flex flex-col">
              <div class="flex justify-between w-full items-center py-1">
                <div class="font-bold">{{ i.ks_name }}</div>
                <div class="text-hex-949494 text-sm flex justify-between items-center">
                  <el-icon :size="14" color="#949494">
                    <icon-view />
                  </el-icon>
                  <span class="ml-1">{{ i.kss_views }}</span>
                </div>
              </div>

              <div class="text-sm text-hex-949494 py-1">
                {{ i.ks_brief }}
              </div>

              <div class="text-sm py-1 flex-auto">
                <span>{{ i.grade_name }}</span>
                <span class="mx-2">|</span>
                <span>{{ i.subject_name }}</span>
              </div>

              <div class="flex text-sm justify-between items-center">
                <div class="cursor-pointer flex items-center">
                  <el-avatar :size="16" :src="getAvatarUrl(i.user_id)" /><span class="ml-1">{{ i.ks_zjjsxm }}</span>
                </div>
                <div @click="handleRtcClick(i)"
                  class="h-26px rounded-14px px-2 flex items-center text-hex-0083C5 cursor-pointer"
                  :class="i.ks_status === 2 && 'border border-hex-f00 text-hex-f00'">
                  <i-bx:bar-chart></i-bx:bar-chart>
                  <span class="ml-2 "> {{ i.ks_status_msg }}</span>
                </div>
                <div
                  class="h-26px leading-26px px-4 bg-gradient-to-l from-green-400 to-blue-500 text-white rounded-14px cursor-pointer"
                  @click="handleJyClick(i)">
                  讲义</div>
              </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">
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="queryForm.page" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.border_b {
  border-bottom: 1px solid #E4E6E8;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: transparent;
}

.input {
  height: 50px;
  width: 500px;
}
</style>
