<template>
  <div class="h-full pb-52px flex flex-col">
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab v-for="(item, index) in tabData" :key="index" :title="item.title"></van-tab>
    </van-tabs>
    <div class="px-15px flex-1 overflow-auto">
      <template v-if="activeTab.path=='qjkc' && showMain">
        <div class="mt-10px grid grid-cols-2 gap-15px">
          <div class="cardDiv relative" v-for="(item, index) in cjkcData" :key="index" @click="handleClick(item.id)">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </template>
      <template v-else-if="activeTab.path=='jckc' && showMain">
        <div class="mt-10px grid grid-cols-2 gap-15px">
          <div class="cardDiv relative" v-for="(item, index) in jckcData" :key="index" @click="handleClick(item.id)">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </template>
      <template v-else>
        <router-view :course="activeTab"></router-view>
      </template>
    </div>
  </div>
</template>

<script setup>
import cjkc_4 from "~/assets/cjkc/cjkc_4.jpg";
import cjkc_5 from "~/assets/cjkc/cjkc_5.jpg";
import cjkc_6 from "~/assets/cjkc/cjkc_6.jpg";
import cjkc_7 from "~/assets/cjkc/cjkc_7.jpg";
import cjkc_8 from "~/assets/cjkc/cjkc_8.jpg";
import cjkc_9 from "~/assets/cjkc/cjkc_9.jpg";
import jckc_4 from "~/assets/jckc/jckc_4.jpg";
import jckc_5 from "~/assets/jckc/jckc_5.jpg";
import jckc_6 from "~/assets/jckc/jckc_6.jpg";
import jckc_7 from "~/assets/jckc/jckc_7.jpg";
import jckc_8 from "~/assets/jckc/jckc_8.jpg";
import jckc_9 from "~/assets/jckc/jckc_9.jpg";
import jckc_11 from "~/assets/jckc/jckc_11.jpg";
import jckc_12 from "~/assets/jckc/jckc_12.jpg";
import jckc_13 from "~/assets/jckc/jckc_13.jpg";
import jckc_500 from "~/assets/jckc/jckc_500.jpg";

const router = useRouter()

let active = $ref("");
let activeTab = $ref({});
const tabData = $ref([
  {
    title: "秋季课程",
    path: "qjkc",
    url: "/txwx/mszy_kc/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id",
        params: { "from": "tjkc" }
      },
      {
        name: "xk",
        key: "tjzx_id",
        params: { "from": "tjkc" }
      },
      {
        name: "zq",
        key: "tmk_zq"
      }
    ],
    params: {
      "tmk_sftjmszx": "3",
      "tjzx_id": "",
      "tjzn_id": "",
      "tmk_zq": "",
    },
    field: {
      id: "tmk_id",
      img: "tmk_img",
      title: "tmk_kcm",
      teacher: "tmk_zrjs_xm",
      school: "tmk_ssjg_name",
      view: "tmk_lll",
      like: "tmk_dzl",
    },
    detail: "/chapter/qjkc",
    query: {
      is_tjkc: "1"
    }
  },
  {
    title: "基础课程",
    path: "jckc",
    url: "/txwx/mszy_kc/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id",
        params: { "jcxx_nj": "1" }
      },
      {
        name: "xk",
        key: "tjzx_id",
        params: { "jcxx_xk": "1" }
      },
      {
        name: "zq",
        key: "tmk_zq"
      }
    ],
    params: {
      "tmk_sftjmszx": "2",
      "tjzx_id": "",
      "tjzn_id": "",
      "tmk_zq": "",
      "jckc_order": "1",
    },
    field: {
      id: "tmk_id",
      img: "tmk_img",
      title: "tmk_kcm",
      teacher: "tmk_zrjs_xm",
      school: "tmk_ssjg_name",
      view: "tmk_lll",
      like: "tmk_dzl",
    },
    detail: "/chapter/qjkc",
  },
  {
    title: "特色课程",
    path: "tskc",
    url: "/txwx/tskc_kc/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id"
      },
      {
        name: "xk",
        key: "tjzx_id"
      }
    ],
    params: {
      "tjzx_id": "",
      "tjzn_id": "",
    },
    field: {
      id: "ttk_id",
      img: "ttk_img",
      title: "ttk_mc",
      teacher: "ttk_zrjsmc",
      school: "ttk_zrjgmc",
      view: "ttk_lll",
      like: "ttk_dzl",
    },
    detail: "/chapter/tskc",
  },
  {
    title: "作业辅导",
    path: "zyfd",
    url: "/txwx/zyfd/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id"
      },
      {
        name: "xk",
        key: "tjzx_id"
      },
      {
        name: "cb",
        key: "tz_cb"
      },
      {
        name: "dy",
        key: "tz_dy"
      }
    ],
    params: {
      "tjzx_id": "",
      "tjzn_id": "",
      "tz_cb": "",
      "tz_dy": "",
    },
    field: {
      id: "tz_id",
      img: "tz_img",
      title: "tz_mc",
      teacher: "tz_zjyhmc",
      view: "tz_lll",
      like: "tz_dzl",
    },
  },
  {
    title: "家庭教育",
    path: "jtjy",
    url: "/txwx/jtjy_kc/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id"
      },
      {
        name: "xk",
        key: "tjzx_id"
      }
    ],
    params: {
      "tjzx_id": "",
      "tjzn_id": "",
    },
    field: {
      id: "tjk_id",
      img: "tjk_img",
      title: "tjk_mc",
      teacher: "tjk_zrjsmc",
      school: "tjk_zrjgmc",
      view: "tjk_lll",
      like: "tjk_dzl",
    },
    detail: "/chapter/jtjy",
  },
  {
    title: "直播课程",
    path: "zbkc",
    url: "/txwx/zbkc/index",
    filterData: [
      {
        name: "nj",
        key: "tjzn_id"
      },
      {
        name: "xk",
        key: "tjzx_id"
      },
      {
        name: "cb",
        key: "tz_cb"
      },
      {
        name: "dy",
        key: "tz_dy"
      }
    ],
    params: {
      "tjzx_id": "",
      "tjzn_id": "",
      "tjzx_cb": "",
      "tjzx_dy": "",
    },
    field: {
      id: "tz_id",
      img: "tz_img",
      title: "tz_kcbt",
      teacher: "tz_zjrxm",
      school: "tz_ssdw_mc",
      time: "tjzx_zbkqsj",
      view: "tjzx_lll",
    },
    detail: "/chapter/zbkc",
  }
])

let showMain = $ref(true);

init()
function init() {
  let path = router.currentRoute.value.path;
  let index = tabData.findIndex(item => path.includes(item.path));
  active = index == -1 ? 0 : index;
  activeTab = tabData[active];

  if (sessionStorage.getItem("query")) {
    showMain = false;
    let query = JSON.parse(sessionStorage.getItem("query"));
    activeTab.params.tjzn_id = query.tjzn_id;
    activeTab.filterData.map((item) => {
      if (item.key === "tjzn_id") {
        item.value = query.tjzn_id;
      }
    })
  }
}

function onClickTab({ name }) {
  showMain = true;
  sessionStorage.removeItem("query");

  activeTab = tabData[name];
  let path = tabData[name].path;
  router.push({
    path: `/main/course/${path}`
  })
}

let cjkcData = $ref([
  {
    id: "4",
    img: cjkc_4
  },
  {
    id: "5",
    img: cjkc_5
  },
  {
    id: "6",
    img: cjkc_6
  },
  {
    id: "7",
    img: cjkc_7
  },
  {
    id: "8",
    img: cjkc_8
  },
  {
    id: "9",
    img: cjkc_9
  }
])
let jckcData = $ref([
  {
    id: "4",
    img: jckc_4
  },
  {
    id: "5",
    img: jckc_5
  },
  {
    id: "6",
    img: jckc_6
  },
  {
    id: "7",
    img: jckc_7
  },
  {
    id: "8",
    img: jckc_8
  },
  {
    id: "9",
    img: jckc_9
  },
  {
    id: "11",
    img: jckc_11
  },
  {
    id: "12",
    img: jckc_12
  },
  {
    id: "13",
    img: jckc_13
  },
  {
    id: "500",
    img: jckc_500
  }
])

function handleClick(tjzn_id) {
  activeTab.params.tjzn_id = tjzn_id;
  activeTab.filterData.map((item) => {
    if (item.key === "tjzn_id") {
      item.value = tjzn_id;
    }
  })

  showMain = false;
  let query = { tjzn_id };
  sessionStorage.setItem("query", JSON.stringify(query));
}

watch(
  () => router.currentRoute.value.path,
  (val) => {
    if (!val.includes("/main/course")) {
      sessionStorage.removeItem("query");
    }
  },
)
</script>

<style lang="scss" scoped>
:deep() {
  .van-tab--active {
    padding: 0;
    .van-tab__text {
      border: 1px solid #154a9a;
      border-radius: 16px;
      color: #154A9A;
      padding: 5px 10px;
    }
  }
  .van-tabs__line {
    display: none;
  }
}
</style>
