<script setup>
// import CommonHeader from "@/components/CommonHeader/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";
import {
  zbkt_list,
  zbkt_recommend,
  grade_list,
  team_list,
  zbdg_add,
} from "./api";

const https = ref(window.GLOBAL_CONFIG.api);
let loading = ref(false);
const nj = ref([]);
grade_list().then((res) => {
  console.log(res);
  nj.value = [{ n: "全部", v: null }].concat(
    res.data.page_data.map(({ grade_name, grade_id }) => ({
      v: grade_id,
      n: grade_name,
    }))
  );
});

// const fc = ref([])
team_list().then((res) => {
  console.log(res.data);
  // fc.value = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ subject_name, grade_id }) => ({ v: grade_id, n: grade_name })))
});
// const nj = [
//   { n: "全部", v: null },
//   { n: "幼儿园", v: "20" },
//   { n: "一年级", v: "1" },
//   { n: "二年级", v: "2" },
//   { n: "三年级", v: "3" },
//   { n: "四年级", v: "4" },
//   { n: "五年级", v: "5" },
//   { n: "六年级", v: "6" },
//   { n: "初一", v: "7" },
//   { n: "初二", v: "8" },
//   { n: "初三", v: "9" },
//   { n: "高一", v: "10" },
//   { n: "高二", v: "11" },
//   { n: "高三", v: "12" },
// ];

const fc = [
  { n: "全部", v: null },
  { n: "上册", v: "1" },
  { n: "下册", v: "2" },
];

const data_zzzb = $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: '1' },
  // { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
]);

const data_tjzb = $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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
  {
    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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
  {
    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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
]);

const data_phb = $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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
  {
    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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
  {
    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: "1",
  },
  {
    img: img_lczs3,
    title: "走进生肖文化——寅虎卯兔",
    bfl: 100,
    desc: "领略生肖传奇，品味传统文化！",
    nj: "四年级",
    xk: "美术",
    ls: "尚老师",
    tx: img_tx,
    zt: "1",
  },
]);

function linkZb(i) {
  router.push({
    name: "wlzb_content",
    params: {
      id: i.id,
    },
  });
}
const queryForm = ref({
  keywords: "",
  grade_id: null,
  team_id: null,
  subject_id: null,
});

// 直播课程添加
let addData = {
  kzkt_zbkc: {
    kz_title: "测试",
    kz_kcjj: "简介",
    grade_id: 1,
    subject_id: 1,
    kz_master_teacher: "demo2",
    kz_img: "",
    kz_kss: "",
  },
};
function addZb() {
  zbdg_add(addData).then((res) => {
    console.log(res);
  });
}

let zbMsg = ref([]);
let hfMsg = ref([]);
let zbktData = {
  site: "tyyx",
};
// 直播列表
function getList() {
  loading.value = true;
  zbkt_list(zbktData).then((res) => {
    zbMsg.value = res.data.page_data;
    loading.value = false;
  });
}
// 正在直播
function getListOne() {
  zbkt_list(zbktData).then((res) => {
    zbMsg.value = res.data.page_data;
  });
}
getListOne();

// function getHf() {
//   let zbktData = {
//     site: "tyyx",
//     live: 4,
//   };
//   zbkt_list(zbktData).then((res) => {
//     hfMsg.value = res.data.page_data;
//   });
// }
// getHf();
// addZb();
let keywords = ref("");
// 搜索
function searchKey() {
  Object.assign(zbktData, { keyword: keywords.value });
  getList();
  
}
// 点击年级
function njClick() {
  Object.assign(zbktData, {
    grade_id: queryForm.value.grade_id,
    subject_id: queryForm.value.subject_id,
  });
  getList();
}
// 点击分册
function fcClick() {
  Object.assign(zbktData, {
    grade_id: queryForm.value.grade_id,
    subject_id: queryForm.value.subject_id,
  });
  getList();
}

// 推荐
let tuijianData = {
  site: "tyyx",
};
let tjMsg = ref([]);
function getTuijian() {
  zbkt_list({ limit: "999", site: "tyyx", recommend: 1 }).then((res) => {
    tjMsg.value = res.data.page_data;
  });
}
getTuijian();

// 排行榜
let bangMsg = ref([]);
function getRec() {
  zbkt_list({ kz_phb: "1", limit: "999", site: "tyyx" }).then((res) => {
    bangMsg.value = res.data.page_data;
    console.log(bangMsg.value);
  });
}
getRec();

const router = useRouter();
function handleTjzbClick(i) {
  router.push({
    name: "wlzb_content",
    params: {
      id: i.id,
    },
  });
}

function handlePhbClick(i) {
  router.push({
    name: "wlzb_content",
    params: {
      id: i.id,
    },
  });
}

function hrefTo(href) {
  window.open(href, "_blank");
}
</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
        v-model="keywords"
        class="input w-500px h-50px rounded-md overflow-hidden"
        placeholder="搜索关键字"
      >
        <template #suffix>
          <div
            @click="searchKey()"
            class="
              w-26px
              h-26px
              bg-hex-00A3FF
              rounded-md
              flex
              justify-center
              items-center
              cursor-pointer
            "
          >
            <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>
        <check-row
          @click="njClick"
          v-model="queryForm.grade_id"
          label="年级"
          :items="nj"
        ></check-row>
        <check-row
          @click="fcClick"
          v-model="queryForm.subject_id"
          label="分册"
          :items="fc"
        ></check-row>
        <!-- <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="text-lg font-bold mt-7 mb-3">正在直播</div>
      <div v-if="zbMsg != ''" v-loading="loading" class="flex flex-wrap justify-between">
        <div 
          @click="linkZb(i)"
          class="w-647px h-155px rounded-xl shadow-lg mb-7 flex"
          v-for="i in zbMsg"
          :key="i"
        >
          <div class="w-264px h-full flex-none zhiboImg">
            <img :src="https + 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.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.lll }}</span>
              </div>
            </div>

            <div class="text-sm text-hex-949494 py-1">
              {{ i.kcjj }}
            </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="i.master_user_avatar" /><span
                  class="ml-1"
                  >{{ i.master_user_name }}</span
                >
              </div>
              <div
                class="
                  h-26px
                  rounded-14px
                  px-2
                  flex
                  items-center
                  text-hex-0083C5
                  cursor-pointer
                "
                :class="i.status == '1' && 'border border-hex-f00 text-hex-f00'"
              >
                <el-icon :color="i.status == '1' ? '#FF0000' : '#949494'">
                  <icon-histogram />
                </el-icon>
                <span class="ml-2">
                  {{
                    i.status == "1"
                      ? "直播中"
                      : i.status == "2"
                      ? "未开始"
                      : "待回看"
                  }}</span
                >
                <!-- <span v-if="i.status == '1'" class="ml-2">未开始</span>
                <span v-if="i.status == '2'" class="ml-2">直播中</span>
                <span v-if="i.status == '3'" class="ml-2">待回放</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>
      <el-empty v-else description="暂无正在直播的课程"></el-empty>
      <div class="flex w-full justify-between">
        <div class="flex-auto mr-8">
          <div class="text-lg font-bold mt-7 mb-3">推荐直播</div>
          <div v-if="tjMsg !=''" class="flex flex-wrap scrollTj">
            <div
              class="
                w-318px
                h-263px
                rounded-xl
                shadow-lg
                flex flex-col
                overflow-hidden
                cursor-pointer
                tuijian
              "
              v-for="i in tjMsg"
              :key="i"
              @click="handleTjzbClick(i)"
            >
              <div class="w-full flex-none h-187px overflow-hidden">
                <img :src="i.img" alt="" class="w-full" />
              </div>
              <div class="p-2">
                {{ i.name }}
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无推荐直播"/>
        </div>

        <div class="w-320px shadow flex-none p-6 bang">
          <div class="text-lg font-bold mt-1 mb-3">直播课程排行榜</div>
          <template v-for="(i, index) in bangMsg" :key="i">
            <div
              v-if="index < 2"
              class="w-full h-167px mb-4 relative cursor-pointer paihang"
              @click="handlePhbClick(i)"
            >
              <img
                :src="https + i.img"
                alt=""
                class="w-full h-full overflow-hidden rounded-md"
              />
              <div class="p-2 absolute z-2 bottom-0 w-full text-white">
                {{ i.kcjj }}
              </div>
              <div
                class="
                  absolute
                  -top-11px
                  right-20px
                  w-50px
                  h-22px
                  text-white
                  flex_center
                  rounded-sm
                  text-sm
                "
                :class="['bg-red-600', 'bg-yellow-400'][index]"
              >
                Top{{ index + 1 }}
              </div>
            </div>

            <div
              v-else
              class="flex mb-4 cursor-pointer"
              @click="handlePhbClick(i)"
            >
              <div class="w-110px h-70px flex-none relative overflow-hidden">
                <img
                  :src="https + i.img"
                  alt=""
                  class="w-full h-full rounded-sm overflow-hidden"
                />
                <div
                  class="
                    absolute
                    rounded-sm
                    right-0
                    top-0
                    w-20px
                    h-20px
                    bg-hex-6C5DD3
                    text-white
                    flex_center
                    text-xs
                    index
                  "
                >
                  {{ index + 1 }}
                </div>
              </div>
              <div class="px-1 leading-tight">
                <p>{{ i.kcjj }}</p>
                <span class="time">{{ i.starttime }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border_b {
  border-bottom: 1px solid #e4e6e8;
}
.zhiboImg {
  img {
    border-radius: 7.5px;
  }
}
.time {
  height: 30px;
  font-size: 12px;
  font-weight: 400;
  color: #9d9ab9;
  line-height: 30px;
}
.input {
  height: 50px;
  width: 500px;
}
.scrollTj {
  height: 790px;
  padding-right: 15px;
  overflow-y: scroll;
}
.scrollTj::-webkit-scrollbar {
  width: 2px;
}
.scrollTj::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #00a3ff;
}
.bang {
  min-height: 320px;
  max-height: 790px;
  .paihang {
    background: linear-gradient(
      -180deg,
      rgba(0, 0, 0, 0) 2%,
      rgba(0, 0, 0, 0.62)
    );
    border-radius: 8px;
  }
}
.index {
  border-radius: 0 5px 0 0;
}
.tuijian {
  margin-right: 18px;
  // margin-bottom: 0;
}
</style>
