<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 img_bg1 from "~/assets/zbkt/bg1.png";

import { Histogram as IconHistogram } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { zbkt_detail, zbdg_add } from "./api";
const https = ref(window.GLOBAL_CONFIG.api);
const route = useRoute();
const router = useRouter();
let detailData = {
  id: route.params.id,
  // id:10182,
  site: "tyyx",
};
let detailMsg = ref({});
function getDetail() {
  zbkt_detail(detailData).then((res) => {
    console.log(res);
    detailMsg.value = res.data.one_info;
  });
}
getDetail();

function linkDetail(i) {
  router.push({
    name: "wlzb_detail",
    params: {
      id: i.id,
    },
  });
}
// const data_kczjdg = $ref([
//   {
//     img: img_lczs1,
//     title: "01 课时 形成问题",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "1",
//   },
//   {
//     img: img_lczs2,
//     title: "02 课时 行程问题",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "",
//   },
//   {
//     img: img_lczs3,
//     title: "03 课时 过桥问题",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "",
//   },
//   {
//     img: img_lczs3,
//     title: "04 课时 流水问题",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "",
//   },
// ]);

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

const addData = {
  kz_id: route.params.id,
  site: "tyyx",
  kzkt_zbkc_kcdg: {
    kzk_no: "10185",
    kzk_title: "测试",
    kzk_starttime: "2022-09-07 00:00:00",
    kzk_endtime: "2022-09-30 22:00:00",
    kzk_master_teacher: "demo1",
    kzk_master_user_name: "demo1",
    kzk_slave_teacher: "",
    kzk_slave_user_name: "",
    kzk_img: "",
    kzk_video: "",
    kzk_public: 1,
  },
};
// function addDg(){
//   zbdg_add(addData).then(res=>{
//     console.log(res);
//   })
// }
// addDg();
// const data_kcap = $ref([
//   { time: '7月11日', sknr: '1.数的巧算', skls: '姚荣华' },
//   { time: '7月12日', sknr: '2.定义新运算', skls: '顾国东' },
//   { time: '7月13日', sknr: '3.循环小数', skls: '朱海锋' },
//   { time: '7月14日', sknr: '4.十进制和二进制简介', skls: '吴克锋' },
//   { time: '7月15日', sknr: '5.解决问题的策略', skls: '宋海芬' },
//   { time: '7月16日', sknr: '6.长方体正方体的综合应用', skls: '徐铢凤' },
//   { time: '7月17日', sknr: '7.因数倍数的综合应用', skls: '王斌莺' },
//   { time: '7月18日', sknr: '8.五年级阶段性练习', skls: '罗杰' },
// ])
</script>

  <template>
  <common-header />
  <div
    class="w-full flex items-center justify-center shadow 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 class="text-hex-949494"> - 网络直播</span>
        <span> - 内容</span>
      </div>
    </div>
  </div>

  <div class="w-full flex items-center justify-center mt-4">
    <div class="w-1400px flex flex-col">
      <div class="w-full mb-4 relative">
        <!-- detailMsg.img -->
        <img
          style="width: 100%; height: 322px"
          :src="img_bg1"
          alt=""
        />
        <div
          class="
            absolute
            w-full
            h-full
            top-0
            flex flex-col
            justify-center
            p-16
            text-white
          "
        >
          <div class="text-2xl mb-4">{{ detailMsg.kz_title }}</div>
          <div class="flex mb-6">
            <div class="mr-12">责任教师:{{ detailMsg.kz_master_teacher }}</div>
            <div>机构名称:{{ detailMsg.kz_master_user_name }}</div>
          </div>
          <div class="text-sm">
            <div>简介：</div>
            <div>
              {{ detailMsg.kz_kcjj }}
            </div>
          </div>
        </div>
      </div>

      <div class="flex w-full">
        <div class="flex-auto shadow p-4">
          <div class="font-bold mb-8">课程章节大纲</div>
          <ul>
            <li
              v-for="i in detailMsg.kcdg"
              class="
                border_top
                cursor-pointer
                flex
                w-full
                justify-between
                px-4
                py-2
                my-4
                bg-opacity-5 bg-hex-00A3FF
              "
              :class="i.status == 1 && 'bg-opacity-50 text-white'"
            >
              <div>{{ i.title }}</div>
              <div
                @click="linkDetail(i)"
                class="h-26px rounded-14px px-2 flex items-center mr-4 border"
                :class="
                  i.status == 1
                    ? 'border-hex-ff0f00 text-hex-ff0f00'
                    : 'border-hex-949494 text-hex-949494'
                "
              >
                <el-icon :color="i.status == 1 ? '#FF0000' : '#949494'">
                  <icon-histogram />
                </el-icon>
                <span class="ml-2 text-xs"> {{ i.status_msg }}</span>
              </div>
            </li>
          </ul>
        </div>

        <div class="w-500px ml-10px shadow p-4 relative">
          <div class="font-bold mb-8">课程安排</div>
          <!-- <a class="cursor-pointer rounded-5px border border-hex-949494 px-1" :href="https+detailMsg.kz_kcap">点击预览</a> -->
          <iframe v-if="detailMsg.kz_kcap" :src="detailMsg.file_preview" frameborder="0" class="w-full h-min-700px"></iframe>
          <el-empty v-else description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.border_top {
  border-radius: 1rem 1rem 0 0;
}
</style>

