<script setup>
import { child } from "~/store/child";
const oss = window.GLOBAL_CONFIG.oss;
const props = defineProps({
  id: {
    type: String,
    default: undefined,
  },
});

const router = useRouter();
function handleNavLeftClick() {
  router.back();
}

let loading = $ref(true);
let detailInfo = $ref();
request({
  url: "/khfw/kcgl/detail",
  data: {
    kk_id: props.id,
    token: child.token,
  },
}).then((res) => {
  if (res.code === "1") {
    detailInfo = res.data.one_info;
    detailInfo.$kk_kcfy = detailInfo.kk_kcfy * 100;
  } else {
  }
  loading = false;
});

function handleDetailBtnClick(item) {
  // console.log('handleDetailBtnClick', item);
  router.push(`/stxk/jz/wd/kcapxq/${item.kkks_id}`);
  // overlayShow = true
}

// let overlayShow = $ref(false)
// const overlayForm = reactive({
//   kcpj: '',
//   lspj: '',
//   fwpj: '',
//   pjnr: '',
// })
// function handleOverlaySubmit() {
//   overlayShow = false
// }
</script>

<template>
  <van-sticky>
    <van-nav-bar title="课程详情" left-arrow @click-left="handleNavLeftClick">
    </van-nav-bar>
  </van-sticky>

  <div class="p-2 w-full">
    <van-skeleton title :row="10" :loading="loading">
      <van-image :src="detailInfo.kk_img" class="w-full"></van-image>

      <div class="text-sm mb-4">
        <div class="flex text-lg py-1">
          <div class="mr-4 font-bold">{{ detailInfo.kk_name }}</div>
          <van-tag type="primary">{{ detailInfo.ksgl_num }}课时</van-tag>
        </div>
        <div class="flex py-1">
          <div class="mr-4">
            <span>讲师：</span><span>{{ detailInfo.kk_teacher.name }}</span>
          </div>
        </div>
        <div class="flex py-1">
          <div>开课时间：</div>
          <div>
            {{ detailInfo.kk_skqjkssj }} -
            {{ detailInfo.kk_skqjjwsj }}（请在开课前报名）
          </div>
        </div>
        <div class="flex py-1" v-show="detailInfo.kk_skdd != ''">
          <div>上课地点：</div>
          <div>{{ detailInfo.kk_skdd }}</div>
        </div>
      </div>
      <!-- <van-divider /> -->

      <van-tabs shrink swipeable>
        <van-tab title="课程详情">
          <div class="my-4">
            <div class="pre font-bold mb-2">课程简介</div>
            <div class="text-sm" v-html="detailInfo.kk_kcjj"></div>
          </div>
          <!-- <div class="my-4">
            <div class="pre font-bold mb-2">课程列表</div>
            <div class="text-sm" v-html="detailInfo.kk_kcjj">
            </div>
          </div> -->
          <div class="mb-10">
            <div class="pre font-bold mb-2">教师简介</div>
            <div v-if="detailInfo.kk_teachers != ''">
              <div
                class="flex text-sm shadow-md p-2 mb-4"
                v-for="item in detailInfo.kk_teachers"
              >
                <div class="w-1/3 flex-none flex flex-col items-center">
                  <van-image
                    :src="item.avatar"
                    width="100"
                    height="100"
                    round
                    fit="cover"
                  >
                  </van-image>
                  <div>
                    <div>{{ item.name }}</div>
                  </div>
                </div>
                <div>{{ item.intro }}</div>
                <!-- <ul class="list-disc list-inside">
                <li>{{ detailInfo.kk_teacher.intro }}</li>
              </ul> -->
              </div>
            </div>
            <div v-else>暂无数据</div>
          </div>
        </van-tab>
        <van-tab title="课程安排">
          <div class="my-4">
            <van-steps direction="vertical" :active="-1">
              <van-step v-for="row in detailInfo.ksgl_list">
                <div class="text-base">{{ row.kkks_name }}</div>
                <div class="flex justify-between items-end">
                  <div>{{ row.time }}</div>
                  <div>{{ row.kkks_skjs }}</div>
                  <van-button
                    plain
                    type="primary"
                    size="small"
                    @click="handleDetailBtnClick(row)"
                    >查看详情</van-button
                  >
                </div>
              </van-step>
            </van-steps>
          </div>
        </van-tab>
      </van-tabs>
    </van-skeleton>

    <!-- <van-overlay :show="overlayShow" @click="overlayShow = false" class="flex justify-center items-center">
      <div class="bg-light-900 w-9/10 p-4 rounded-md dark:bg-dark-900" @click.stop>
        <div class="flex my-2">
          <div class="font-bold text-lg mr-4">教学安排与课堂情况反馈</div>
          <van-tag type="primary">第6节课</van-tag>
        </div>

        <div class="text-sm text-dark-100 dark:text-light-900">
          9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。
          9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。9:00-20:30(所有乐园时间仅供参考，请于游览当天至有课服务处索取乐园时间表，以获取当天最新的活动时间详情及变更通知。
        </div>

        <van-divider />

        <div class="text-sm">课程已结束您可以对此进行评价</div>

        <van-form @submit="handleOverlaySubmit">
          <van-field name="kcpj" label="课程评价">
            <template #input>
              <van-rate v-model="overlayForm.kcpj" />
            </template>
          </van-field>
          <van-field name="lspj" label="老师评价">
            <template #input>
              <van-rate v-model="overlayForm.lspj" />
            </template>
          </van-field>
          <van-field name="fwpj" label="服务评价">
            <template #input>
              <van-rate v-model="overlayForm.fwpj" />
            </template>
          </van-field>
          <van-field v-model="overlayForm.pjnr" name="pjnr" placeholder="请输入评价内容..." maxlength="500" show-word-limit rows="6"
            autosize />

          <div class="text-xs text-red-900">* 只能对课程评价一次，评价后无法修改，请确认后提交</div>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-overlay> -->
  </div>
</template>
