<script setup>
import { View as IconView, Histogram as IconHistogram, Search as IconSearch } from '@element-plus/icons-vue';
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 CommonHeader from "@/components/header/index.vue";

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

const data = $ref([
  { img: img_lczs1, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
  { img: img_lczs2, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
])
</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">
    <div class="w-full h-full bg_linear" />
    <div class="w-full h-full absolute top-0 z-2 flex flex-col items-center justify-evenly">
      <div class="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 class="flex text-dark-200 divide-dark-200 divide-x">
        <div class="px-2">微课</div>
        <div class="px-2">课件</div>
        <div class="px-2">教案</div>
        <div class="px-2">微视频</div>
        <div class="px-2">网络资源</div>
      </div>
    </div>
  </div>

  <div class="flex justify-center">
    <div class="flex flex-wrap justify-between w-1400px">
      <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">
            <div> {{ i.desc }}</div>
            <div> {{ i.desc1 }}</div>
          </div>


          <div class="text-sm py-1 flex-auto">
            课程介绍： 蓝印花布 蓝印花布 蓝印花布 蓝印花布……
          </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>

</template>

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

.bg_linear {
  opacity: 0.59;
  background: linear-gradient(72deg, rgba(0, 163, 255, 0.00) 18%, rgba(221, 254, 238, 0.57) 64%, rgba(255, 247, 228, 0.89) 100%);
  filter: blur(50px);
}
</style>
