<script setup>
import img_bg1 from '~/assets/zbkt/bg1.png';
import QrcodeVue from "qrcode.vue";

const props = defineProps({
  id: String
})

let data_detail = $ref()
let loading = $ref(true)


request({
  url: '/kzkt/zbkc/detail',
  data: {
    id: props.id
  }
}).then(res => {
  if (res.code === '1') {

    data_detail = res.data.one_info
    loading = false
  }
})

const router = useRouter()
function handleClickAdd() {
  router.push({ name: 'personal_create_wlzb_kcdg_add' })
}
function handleClickEdit(i) {
  router.push({ name: 'personal_create_wlzb_kcdg_edit', params: { bid: i.id } })
}


function handleClickDel(i) {
  request({
    url: '/kzkt/zbkc_kcdg/delete',
    data: {
      kzk_id: i.id
    }
  }).then(res => {
    if (res.code === '1') {
      ElMessage.success('已删除')
      queryData()
    }
  })
}

function queryData() {
  request({
    url: '/kzkt/zbkc/detail',
    data: {
      id: props.id
    }
  }).then(res => {
    if (res.code === '1') {

      data_detail = res.data.one_info
    }
  })
}

function getShareLink(i) {
  return `${location.origin}/#/zbkt/wlzb/detail/${i.id}`
}


function hrefTo(url){
  window.open(url)
}
</script>

<template>
  <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4">

    <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 class="text-hex-949494"> - 网络直播</span>
      <span> - 课程大纲</span>
    </div>
  </div>


  <div class="w-full flex items-center justify-center mt-4 flex-col shadow bg-white p-4" v-loading="loading">
    <div class="w-full" v-if="!loading">
      <div class="w-full mb-4 relative min-h-300px">
        <!-- data_detail.img -->
        <img :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-3xl mb-4">{{data_detail.kz_title}}</div>
          <div class="flex mb-6">
            <div class="mr-12">责任教师:{{data_detail.kz_master_teacher}}</div>
            <!-- <div>机构名称:{{data_detail.master_user_name}}</div> -->
          </div>
          <div class="text-sm">
            <div>简介： </div>
            <div>
              {{data_detail.kz_kcjj}}
            </div>
          </div>
        </div>
      </div>



      <div class="flex w-full">
        <div class="flex-auto  p-4">
          <div class="flex justify-between items-center mb-4">
            <div class="font-bold ">课程章节大纲</div>
            <div
              class="w-100px h-40px flex_center rounded bg-transparent border text-hex-00A3FF cursor-pointer text-sm border-hex-00A3FF"
              @click="handleClickAdd">添加</div>
          </div>
          <ul>
            <li v-for="i in data_detail.kcdg" class="my-4 flex">
              <div
                class="border_top cursor-pointer flex flex-auto justify-between px-4 py-2 bg-opacity-5 bg-hex-00A3FF hover:bg-opacity-50 hover:text-white">
                <div>{{ i.title }}</div>
                <div @click="hrefTo(getShareLink(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'">
                  <i-bx:bar-chart></i-bx:bar-chart>
                  <span class="ml-2 text-xs"> {{ i.status_msg }}</span>
                </div>
              </div>
              <div class="ml-8 w-120px flex justify-around text-base items-center">
                <el-popover placement="top" :width="120" trigger="hover">
                  <template #reference>
                    <i-bx:category class="cursor-pointer" />
                  </template>
                  <QrcodeVue :value="getShareLink(i)" :size="120" level="H"></QrcodeVue>
                </el-popover>

                <i-bx:edit-alt class="cursor-pointer" @click.stop="handleClickEdit(i)" />
                <i-ep:delete class="cursor-pointer" @click.stop="handleClickDel(i)" />
              </div>
            </li>
          </ul>
        </div>

      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
.border_top {
  border-radius: 1rem 1rem 0 0;
}
</style>
