<script setup lang="ts">
import { isNotStudyMachine } from '@/utils'
import { useRouter } from 'vue-router'
import { openBridge, $XXL } from '@/utils'
import { subjectStore, userStore } from '@/stores'
import {
  baseApps,
  yuwenElementaryApps,
  yuwenMiddleApps,
  shuxueElementaryApps,
  shuxueMiddleApps,
  yingyuToolApps,
  yingyuElementaryApps,
  yingyuMiddleApps,
  yingyuOtherApps,
  diliBaseApps,
  shengwuBaseApps,
  wuliBaseApps,
  huaxueBaseApps,
} from './app'
import type { App } from './app'
import { cloneDeep } from 'lodash-es'
import { storeToRefs } from 'pinia'

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const app_bg = `url(${OSS_URL}/urm/app_bg.png) bottom/contain no-repeat`
// const pattern = `url(${OSS_URL}/urm/subject_item_pattern.svg) left/cover no-repeat`;

const category_tool = 4
const category_other = 3

const { subject } = storeToRefs(subjectStore())
const router = useRouter()
const { userInfo } = storeToRefs(userStore())
const isWebOrSchool = computed(() => isNotStudyMachine || userInfo.value.isTaskStudent)
const activeClass = ref(category_tool)
const classList = computed(() => {
  const category = [
    {
      id: category_tool,
      name: '工具',
      show: ['英语'].includes(subject.value.name),
    },
    {
      id: 0,
      name: '常用',
      show: !isWebOrSchool.value && ['语文', '数学', '英语'].includes(subject.value.name),
    },
    {
      id: 1,
      name: '小学',
      show: !isWebOrSchool.value && ['语文', '数学', '英语'].includes(subject.value.name),
    },
    {
      id: 2,
      name: '中学',
      show: !isWebOrSchool.value && ['语文', '数学', '英语'].includes(subject.value.name),
    },
    {
      id: category_other,
      name: '其他',
      show: !isWebOrSchool.value && ['英语'].includes(subject.value.name),
    },
  ]
  return category.filter(i => i.show)
})

async function onBarChange(item: anyObj) {
  // taskList.value = item.taskActivityVoList;
}
const appList = computed(() => {
  let app: App[] = []
  const base = cloneDeep(baseApps)
  switch (activeClass.value) {
    case 0:
      base[3].extra = {
        StartArgs: `同步视频|${subject.value.name}`,
      }
      base[4].extra = {
        StartArgs: `知识点视频|${subject.value.name}`,
      }
      if (subject.value.name === '地理') {
        base.push(...diliBaseApps)
      } else if (subject.value.name === '生物') {
        base.push(...shengwuBaseApps)
      } else if (subject.value.name === '物理') {
        base.push(...wuliBaseApps)
      } else if (subject.value.name === '化学') {
        base.push(...huaxueBaseApps)
      }

      if (['语文', '英语'].includes(subject.value.name)) {
        app = [
          {
            iconPath: `${OSS_URL}/urm/app_kebendiandu.png`,
            appName: '课本点读',
            pkName: 'com.jinxin.shumeiyun.book',
          },
          ...base,
        ]
      } else {
        app = base
      }
      break
    case 1:
      if (subject.value.name === '语文') {
        app = yuwenElementaryApps
      } else if (subject.value.name === '数学') {
        app = shuxueElementaryApps
      } else if (subject.value.name === '英语') {
        app = yingyuElementaryApps
      }
      break
    case 2:
      if (subject.value.name === '语文') {
        app = yuwenMiddleApps
      } else if (subject.value.name === '数学') {
        app = shuxueMiddleApps
      } else if (subject.value.name === '英语') {
        app = yingyuMiddleApps
      }
      break
    case category_other:
      if (subject.value.name === '英语') {
        app = yingyuOtherApps
      }
      break
    case category_tool:
      if (subject.value.name === '英语') {
        app = yingyuToolApps
      }
      break
  }
  return app
})

watch(
  [() => isWebOrSchool.value, () => subject.value.name],
  () => {
    activeClass.value = isWebOrSchool.value || subject.value.name === '英语' ? category_tool : 0
  },
  {
    immediate: true,
  },
)

function onOpen(item: anyObj) {
  if (item.href) {
    // window.location.href = item.href;
    $XXL.openExternalURL(item.href)
    return
  }
  if (item.path) {
    router.push({
      path: item.path,
      query: item.query,
    })
    return
  }
  openBridge(
    'app',
    JSON.stringify({
      pkg: item.pkName,
      cls: item.cls,
      extra: item.extra,
      flags: 1,
    }),
  )
}
</script>
<template>
  <div class="page">
    <BackBar :leftText="`【${subject?.name}】学习神器`" class="backBar" />
    <div class="content">
      <div v-if="classList.length > 1" class="left">
        <Sidebar
          v-model="activeClass"
          :config="classList as any"
          class="left-vbar"
          @handle-change="onBarChange"
        ></Sidebar>
      </div>
      <div
        :class="{
          right: true,
          full: classList.length <= 1,
        }"
      >
        <el-scrollbar>
          <div class="list">
            <div v-for="item in appList" :key="item.appName" class="item" @click="onOpen(item)">
              <img :src="item.iconPath" />
              <div class="title">
                <div class="name">{{ item.appName }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;

  .content {
    width: 100%;
    height: calc(100% - 11vh);
    margin-top: 4.33vh;
    display: flex;

    .left {
      width: 260px;
      height: 100%;
      margin-right: $space-8;
      flex-shrink: 0;
      &-vbar {
        height: 100%;
        position: static;
      }
    }

    .right {
      flex: 1;
      // width: calc(100% - 340px);
      height: 100%;
      .list {
        width: 100%;
        height: calc(100% - 6.67vh);
        display: grid;
        grid-template-columns: repeat(4, 346px);
        grid-auto-rows: 25.33vh;
        gap: $space-5_h $space-3;

        .item {
          border-radius: $radius-5;
          overflow: hidden;
          position: relative;
          display: flex;
          justify-content: center;
          cursor: pointer;

          .title {
            position: absolute;
            bottom: 0;
            width: 358px;
            height: 26.83vh;
            background: v-bind(app_bg);
            .name {
              position: absolute;
              bottom: 2vh;
              width: 100%;
              font-family: $font-special;
              font-size: 3.67vh;
              line-height: 6.67vh;
              text-align: center;
            }
          }

          img {
            width: 15vh;
            height: 15vh;
            margin-top: $space-2_h;
            z-index: 1;
          }
        }
      }

      &.full {
        .list {
          display: grid;
          grid-template-columns: repeat(5, 340px);
          .title {
            width: 340px;
          }
        }
      }
    }
  }
}
</style>
