<script setup>
import commonHeader from "@/components/header/index.vue";
import img_lczs1 from '~/assets/zbktssys/1.png';
import img_lczs2 from '~/assets/zbktssys/2.png';
import img_lczs3 from '~/assets/zbktssys/3.png';
import img_lczs from '~/assets/zbktssys/bar.png';
import img_tx from '~/assets/zbktssys/tx.png';

import { View as IconView, Histogram as IconHistogram, Search as IconSearch } from '@element-plus/icons-vue';
const activeTab = $ref('first')
function handleClick() {

}

const nj = [
  { n: '全部', v: '1' },
  { n: '幼儿园', v: '' },
  { n: '一年级', v: '' },
  { n: '二年级', v: '' },
  { n: '三年级', v: '' },
  { n: '四年级', v: '' },
  { n: '五年级', v: '' },
  { n: '六年级', v: '' },
  { n: '初一', v: '' },
  { n: '初二', v: '' },
  { n: '初三', v: '' },
  { n: '高一', v: '' },
  { n: '高二', v: '' },
  { n: '高三', v: '' },
  { n: '其他', v: '' },
]

const fc = [
  { n: '全部', v: '1' },
  { n: '上册', v: '' },
  { n: '下册', v: '' },
]

const data = $ref([
  { img: img_lczs1, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
  { img: img_lczs2, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
])


function hrefTo(href) {
  window.open(href, '_blank')
}
</script>

<template>
  <common-header/>
  <div class="w-full flex items-center justify-center shadow-sm h-60px">
    <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="搜索关键字">
        <template #suffix>
          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center">
            <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="activeTab" @tab-click="handleClick">
          <el-tab-pane label="待开始" name="first"></el-tab-pane>
          <el-tab-pane label="已结束" name="second"></el-tab-pane>
        </el-tabs>
      </div>


      <div>
        <div class="flex">
          <div class="font-bold mr-4">年级</div>
          <div class="flex-auto flex-wrap">
            <label v-for="i in nj" :for="i.v" class="text-hex-949494 mx-3 px-4px py-px rounded cursor-pointer"
              :class="i.v && 'text-hex-00A3FF bg-hex-00A3FF bg-opacity-10'">
              <span>{{ i.n }}</span>
            </label>
            <div class="border_b my-4"></div>
          </div>
        </div>

        <div class="flex">
          <div class="font-bold mr-4">分册</div>
          <div class="flex-auto">
            <label v-for="i in fc" :for="i.v" class="text-hex-949494 mx-3 px-4px py-px rounded cursor-pointer"
              :class="i.v && 'text-hex-00A3FF bg-hex-00A3FF bg-opacity-10'">
              <span>{{ i.n }}</span>
            </label>
            <div class="border_b my-4"></div>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap justify-between">
        <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="i.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.title }}</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.bfl }}</span>
              </div>
            </div>

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

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

            <div class="flex text-sm justify-between items-center">
              <div @click="hrefTo('https://rtc.bozedu.net/index.html?uroom=18&uname=txsxnxxb&stream=18_2')"
                class="cursor-pointer flex items-center">
                <el-avatar :size="16" :src="i.tx" /><span class="ml-1">{{ i.ls }}</span>
              </div>
              <div @click="hrefTo('https://rtc.bozedu.net/index.html?uroom=18&uname=txsxnxxa&stream=18')"
                class="h-26px rounded-14px px-2 flex items-center text-hex-0083C5 cursor-pointer"
                :class="i.zt && 'border border-hex-f00 text-hex-f00'">
                <el-icon :color="i.zt ? '#FF0000' : '#949494'">
                  <icon-histogram />
                </el-icon>
                <span class="ml-2 "> {{ i.zt ? '已开始' : '未开始' }}</span>
              </div>
              <div class="h-26px leading-26px px-4 bg-gradient-to-l from-green-400 to-blue-500 text-white rounded-14px">
                讲义</div>
            </div>

          </div>
        </div>
      </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>
