<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-header">
          <span>全部应用</span>
          <a-space :size="16">
            <a-input
              v-model:value="searchText"
              placeholder="请输入关键词（回车搜索）"
              @pressEnter="searchClick"
              style="height: 36px; width: 300px"
            >
              <template #prefix>
                <icon-font iconClass="icon-opt-search"></icon-font>
              </template>
            </a-input>
            <a-button type="primary" class="border-radius" @click="configApp"><setting-outlined />配置</a-button>
          </a-space>
        </div>
        <div class="guns-layout-content-application">
          <div class="content-mian" style="height: 100%; overflow-y: auto; position: relative">
            <div v-for="item in appList" :key="item.id" :class="['app-item', { 'app-item-bb': !(item.show && item?.appLinkList?.length) }]">
              <div class="app-item-header">
                <a-space style="cursor: pointer" @click="changeShow(item)">
                  <img :src="filePreviewUrl + item.categoryIconFileId" alt="" class="app-item-header-icon" v-if="item.iconType == 1"/>
                  <i :class="'app-item-header-icon iconfont ' + item.iconCode"  v-if="item.iconType == 2"></i>
                  <span class="app-item-header-categoryName">{{ item.categoryName }}</span>
                  <down-outlined class="title-down" v-if="item.show" />
                  <right-outlined class="title-down" v-if="!item.show" />
                </a-space>
              </div>
              <div class="app-item-content" v-if="item.show && item?.appLinkList?.length">
                <div
                  :class="[
                    'app-item-content-item',
                    { 'disable-use': !cItem.canUseFlag },
                    { 'not-border-bottom': item.lastList.includes(cItem.id) }
                  ]"
                  v-for="cItem in item?.appLinkList"
                  :key="cItem.id"
                  @click="appClick(cItem)"
                >
                  <div class="app-item-box">
                    <img :src="filePreviewUrl + cItem.linkIconFileId" alt="" class="app-item-content-img" v-if="cItem.iconType == 1"/>
                    <i :class="'app-item-content-img iconfont ' + cItem.iconCode"  v-if="cItem.iconType == 2"></i>
                    <div class="app-item-content-name">{{ cItem.linkName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无应用" class="empty" v-show="appList.length == 0"></a-empty>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { AppCenterApi } from './api/AppCenterApi';
import { useRouter } from 'vue-router';
import { API_BASE_PREFIX } from '@/config/setting';
import { Empty } from 'ant-design-vue';
import { validateHttpURL } from '@/utils/common/validate-util';
import { deepClone, searchTree, redirectUrl, redirectRouterUrl, filtNavArr } from '@/utils/common/util';

const router = useRouter();

const searchText = ref('');

const loading = ref(false);

const appList = ref([]);

const oldAppList = ref([]);

const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

onMounted(() => {
  getAppList();
});

const getAppList = () => {
  loading.value = true;
  AppCenterApi.getTotalCategoryAndLink()
    .then(res => {
      appList.value = setData(res.data);
      oldAppList.value = deepClone(appList.value);
    })
    .finally(() => (loading.value = false));
};

const setData = arr => {
  if (arr?.length) {
    arr.forEach(item => {
      item.id = item.categoryId;
      item.name = item.categoryName;
      item.show = true;
      item.lastList = [];
      if (item?.appLinkList?.length) {
        item.appLinkList.forEach(a => {
          a.id = a.appLinkId;
          a.name = a.linkName;
        });
        const newData = filtNavArr(item.appLinkList, 5);
        if (newData?.length) {
          item.lastList = newData[newData.length - 1].map(n => n.id);
        }
      }
    });
  }
  return arr;
};

// 搜索点击
const searchClick = () => {
  const arr = searchTree(appList.value, oldAppList.value, searchText.value, 'appLinkList', 'id', 'name');
  const data = deepClone(arr.resultList);
  appList.value = setData(data);
};

const changeShow = item => {
  item.show = !item.show;
};

const configApp = () => {
  router.push('/portal/backend/app');
};

const appClick = item => {
  if (!item.canUseFlag) return;
  let url = item.redirectUrl;
  let openType = item.openType;
  let redirectType = item.redirectType;

  // 判断跳转类型是否是内部路由  1:内部路由 2: 外部链接
  if (redirectType === 1) {
    if (validateHttpURL(url)) {
      redirectUrl(url, openType);
      return;
    }
    redirectRouterUrl(url, openType, router);
  } else if (redirectType === 2) {
    redirectUrl(url, openType);
  }
};
</script>

<style scoped lang="less">
.app-item {
  &:not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 8px;
  }
  .app-item-header {
    .app-item-header-icon {
      font-size: 24px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    .app-item-header-categoryName {
      color: #60666b;
      font-size: 16px;
    }
    .title-down {
      color: #838a8f;
      margin-top: 6px;
    }
  }
  .app-item-content {
    margin-top: 16px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #c5cfd166;
    display: flex;
    flex-wrap: wrap;

    .app-item-content-item {
      width: calc(100% / 5);
      padding: 24px 24px;
      box-sizing: border-box;

      cursor: pointer;

      border-bottom: 1px solid #c5cfd166;

      .app-item-box {
        width: 100%;
        display: flex;
        align-items: center;
        border-right: 1px solid #c5cfd166;
      }

      .app-item-content-img {
        font-size: 40px;
        line-height: 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .app-item-content-name {
        flex: auto;
        color: #43505e;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .disable-use {
      cursor: not-allowed;
      .app-item-content-name {
        color: #bfbfbf;
      }
    }

    .not-border-bottom {
      border-bottom: 0px;
    }
  }
}

.app-item-bb {
  border-bottom: 1px solid rgba(197, 207, 209, 0.4);
}

.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -42px;
}
</style>
