<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="container-box">
      <div class="left-title">
        <a-dropdown>
          <a-button type="primary" size="large" block @click.prevent
            >{{ curStoreName }}<CaretDownOutlined class="text-xs"
          /></a-button>
          <template #overlay>
            <ScrollContainer ref="scrollRef">
              <a-menu>
                <a-menu-item v-for="(item, index) in storeList" :key="index">
                  <a href="javascript:;" @click="handleClick(item)">{{ item.storeName }}</a>
                </a-menu-item>
              </a-menu>
            </ScrollContainer>
          </template>
        </a-dropdown>
      </div>
      <a-tabs
        v-model:activeKey="activeKey"
        tab-position="left"
        @change="
          () => {
            page.current = 1;
            getAppList();
          }
        "
      >
        <a-tab-pane :key="index" v-for="(item, index) in boxInfo">
          <template #tab>
            <svg class="tab-icon" aria-hidden="true">
              <use :xlink:href="`#icon-${item.value}`" />
            </svg>
            {{ item.name }}
          </template>
          <ApplicationBox :content="appList" :title="item.remark" />
          <div class="page-box" v-if="appList && appList.length > 0">
            <a-pagination
              v-model:current="page.current"
              v-model:pageSize="page.pageSize"
              :total="page.total"
              show-less-items
              show-size-changer
              show-quick-jumper
              :show-total="(total) => t(`共 ${total} 条数据`)"
              @change="getAppList"
            />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import {
    onMounted,
    ref,
    //unref
  } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import ApplicationBox from './components/ApplicationBox.vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
  import { getAppListPage, getStoreManageList } from '/@/api/version/storemanage';
  import { CaretDownOutlined } from '@ant-design/icons-vue';
  import { StoreManagePageModel } from '/@/api/version/storemanage/model/StoreManageModel';
  import { getDicDetailList } from '/@/api/system/dic';
  import { DicDetailPageListModel } from '/@/api/system/dic/model';
  const { t } = useI18n();
  const activeKey = ref(0);
  const storeList = ref<Array<StoreManagePageModel>>();
  const curStoreName = ref('应用商店');
  const curStoreId = ref();
  const boxInfo = ref<Array<DicDetailPageListModel>>([]);
  const page = ref({ current: 1, total: 0, pageSize: 8 });
  const appList = ref();
  // [
  //   {
  //     img: officeImg,
  //     text: '智慧写作办公',
  //     description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //     id: '1839153867059257345',
  //     type: '0',
  //   },
  //   {
  //     img: AIToolsImg,
  //     text: '培训AI工具集',
  //     description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //     id: '1658303073108975616',
  //     type: '1',
  //   },
  //   {
  //     img: BIImg,
  //     text: '智慧BI数据大屏',
  //     description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //     type: '2',
  //   },
  //   {
  //     img: AIGCImg,
  //     text: '智慧创课AIGC课程',
  //     description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //     type: '3',
  //   },
  // {
  //   img: examImg,
  //   text: '考试宝企业版',
  //   description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  // },
  // {
  //   img: solutionImg,
  //   text: '3D智慧教育解决方案',
  //   description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  // },
  // {
  //   img: lawImg,
  //   text: '法律服务平台系统',
  //   description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  // },
  // {
  //   img: penAIImg,
  //   text: '新华喵币AI',
  //   description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  // },
  // ];
  // },
  //   {
  //     tabName: '基础软件',
  //     icon: 'ruanjian-copy',
  //     title: '基础软件 - Basic Software',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  //   {
  //     tabName: '协助办公',
  //     icon: 'xiezhubangong',
  //     title: '办公应用 - Office Applications',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  //   {
  //     tabName: '人工智能',
  //     icon: 'rengongzhinengdanao',
  //     title: '人工智能 - Artificial Intelligence',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  //   {
  //     tabName: '财务管理',
  //     icon: 'caiwuguanli',
  //     title: '财务管理 - Financial Management',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  //   {
  //     tabName: '商业智能',
  //     icon: 'shangyezhineng',
  //     title: '商业智能 - Business Intelligence',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  //   {
  //     tabName: '行业解决方案',
  //     icon: 'hangyejiejuefangan',
  //     title: '行业解决方案 - Industry Solution',
  //     content: [
  //       {
  //         img: officeImg,
  //         text: '智慧写作办公',
  //         description: '覆盖表格处理、PPT制作、思维导图制作、知识管理等办公场景，助您职场效率翻倍',
  //       },
  //       {
  //         img: AIToolsImg,
  //         text: '培训AI工具集',
  //         description: '针对教育培训场景的难关痛点研发了一系列的AI工具产品',
  //       },
  //       {
  //         img: BIImg,
  //         text: '智慧BI数据大屏',
  //         description: 'AI驱动的大屏在线生成工具，无需复杂操作，只要拖住组件，即可一键生成高质量',
  //       },
  //       {
  //         img: AIGCImg,
  //         text: '智慧创课AIGC课程',
  //         description: '着力于面向企业培训、院校、IP知识博主等提供AIGC课程生产平台一站式解决方案',
  //       },
  //       {
  //         img: examImg,
  //         text: '考试宝企业版',
  //         description: '考试宝是一款专为企业打造的在线培训、学习与考试解决方案',
  //       },
  //       {
  //         img: solutionImg,
  //         text: '3D智慧教育解决方案',
  //         description: '用3D数字化技术赋能教育推进新时代教育数字化转型升级',
  //       },
  //       {
  //         img: lawImg,
  //         text: '法律服务平台系统',
  //         description: '平台是一款面向企业全生命周期的法务服务工具，提供智能化、个性化的解决方案',
  //       },
  //       {
  //         img: penAIImg,
  //         text: '新华喵币AI',
  //         description: '新华秒笔由新华社媒体融合生产技术与系统国家重点实验室与博特智能联合研发',
  //       },
  //     ],
  //   },
  // ];
  const scrollRef = ref<Nullable<ScrollActionType>>(null);
  onMounted(async () => {
    storeList.value = await getStoreManageList();
    boxInfo.value = await getDicDetailList({ itemId: '1838783020800827394' });
    handleClick(storeList.value[0]);
  });
  function handleClick(it) {
    curStoreName.value = it.storeName;
    curStoreId.value = it.id;
    getAppList();
  }
  async function getAppList() {
    let params = {
      appStoreType: boxInfo.value[activeKey.value].value,
      storeId: curStoreId.value,
      limit: page.value.current,
      size: page.value.pageSize,
    };
    let res = await getAppListPage(params);
    console.log(res);
    let list: any = res?.data?.list || [];
    appList.value = list.map((o) => {
      return {
        img: o.appPicture || '',
        text: o.appName,
        description: o.appRemark,
        id:
          o.appType === '0'
            ? o.appFormId
            : o.appType === '1'
            ? o.appDesktopId
            : o.appType === '2'
            ? o.appBiId
            : o.id,
        type: o.appType,
        appId: o.id,
        storeId: curStoreId.value,
      };
    });
    page.value.total = res?.data?.total;
  }
  // const getScroll = () => {
  //   const scroll = unref(scrollRef);
  //   if (!scroll) {
  //     throw new Error('scroll is Null');
  //   }
  //   return scroll;
  // };

  // function scrollTo(top: number) {
  //   getScroll()?.scrollTo(top);
  // }

  // function scrollBottom() {
  //   getScroll()?.scrollBottom();
  // }
</script>
<style lang="less" scoped>
  .scrollbar {
    height: 300px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
  }

  .page-box {
    height: 52px;
    border-top: 1px solid rgb(238 238 238 / 93%);
    text-align: right;
    padding: 10px 16px;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 24px;
    border-radius: 16px;
  }

  :deep(.ant-menu-vertical .ant-menu-item) {
    height: 40px;
    line-height: 40px;
  }

  :deep(.ant-menu-vertical .ant-menu-item-selected) {
    background: #eaf4ff;
  }

  .container-box {
    height: 100%;
    width: 100%;

    :deep(.ant-tabs) {
      height: calc(100% - 100px);
      overflow: unset;
      color: #b8babc;

      .ant-tabs-ink-bar {
        right: 0;
        width: 4px;
      }

      .ant-tabs-tabpane {
        position: relative;
      }

      .ant-tabs-tab-active {
        background: #f4faff;

        .tab-icon {
          fill: #3476f5;
        }
      }

      .ant-tabs-tab {
        height: 50px;
        margin: 0;

        .ant-tabs-tab-btn {
          display: flex;
          align-items: center;
        }
      }

      .tab-icon {
        display: inline;
        height: 15px;
        width: 20px;
        margin-right: 10px;
        fill: #9d9ea0;
      }
    }

    .left-title {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px;
      border-radius: 16px 16px 0 0;
      background: #fff;
      width: 220px;

      :deep(.ant-btn) {
        box-shadow: 0 0 20px 0 rgb(28 141 255 / 50%);
      }
    }

    :deep(.ant-tabs-nav) {
      background: #fff;
      width: 220px;
      border-radius: 0 0 16px 16px;
    }

    :deep(.ant-tabs-content-holder) {
      margin-top: -90px;
      overflow: auto;
    }

    :deep(.ant-tabs-content) {
      height: 100%;
    }
  }
</style>
