<!--应用入口-->
<template>
  <card-widget :is-show-tab="showTab" :active-key="activeKey" :tab-list="appTabsList" @tab-change="tabClick" :style="style">
    <template #header v-if="showHeaderFlag">
      <div style="display: flex; position: relative">
        <div style="flex: 1; display: flex; align-items: center">
          <span class="text_box">{{ title }}</span>
        </div>
      </div>
    </template>

    <template #body>
      <!--加载状态-->
      <a-spin :spinning="loading" style="position: absolute; left: 50%; top: 50%; z-index: 100"></a-spin>

      <div class="app-list">
        <a-row v-if="appList.length > 0" v-for="(item, index) in appList" :key="index">
          <a-col :span="spanCol" v-for="(col, index) in item" :key="index">
            <div class="app-item" @click.stop="appClick(col)">
              <a-image
                v-if="col?.linkIconFileId"
                :preview="false"
                style="width: 60px; height: 60px"
                :src="filePreviewUrl + col.linkIconFileId"
                fit="fill"
              />
              <span>{{ col?.linkName }}</span>
            </div>
          </a-col>
        </a-row>

        <template v-else>
          <div class="empty-box">
            <a-empty description="暂无数据" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
          </div>
        </template>
      </div>
    </template>
  </card-widget>
</template>

<script setup name="AppEnterWidget">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { validateHttpURL } from '@/utils/common/validate-util';
import { redirectUrl, filtNavArr, redirectRouterUrl } from '@/utils/common/util';
import CardWidget from '@/views/home/components/card_widget.vue';
import { Empty } from 'ant-design-vue';
import { API_BASE_PREFIX } from '@/config/setting';
import { constant } from '@/views/portal/constant/constant';
import { AppApi } from '../../backend/config_detail/app/api/AppApi';

const props = defineProps({
  widget: Object,
  // 组件名称
  widgetName: {
    type: String,
    default: constant.APPLICATION_ENTRANCE
  },
  // 组件id
  widgetId: {
    type: String,
    default: '',
    required: true
  },
  /**
   * 是否是预览模式 表示不可点击
   */
  preview: {
    type: Boolean,
    default: false
  },
  // 门户设计id
  designId: String
});

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

const router = useRouter();

// tab选中的值
const activeKey = ref('');
// tabs列表
const appTabsList = ref([]);
// 应用列表
const appList = ref([]);

// 标题
const title = ref(constant.APPLICATION_ENTRANCE);

// 加载状态
const loading = ref(false);

// 栅格占比
const spanCol = ref(8);

const rowCol = ref(3);

const style = ref({});

const showHeaderFlag = ref(false);

const showTab = computed(() => {
  return appTabsList.value?.length > 1 ? true : false;
});

/**
 * tab点击
 */
const tabClick = e => {
  activeKey.value = e;
  const data = appTabsList.value.find(item => item.key == e);
  if (data) {
    getAppList(data?.portalAppLinkList);
  }
};

const getAppList = list => {
  spanCol.value = Math.floor(24 / rowCol.value);
  appList.value = filtNavArr(list, rowCol.value);
};

/**
 * 应用点击
 * @param item
 */
const appClick = async item => {
  if (props.preview) {
    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);
  }
};

/**
 * 获取组件应用分类渲染
 */
const getAppLinkRenderDetail = () => {
  if (props.widget?.param) {
    title.value = props.widget?.param?.elementName;
    if (props.widget?.param?.config) {
      const { showHeader, borderLeft, borderRight, borderTop, borderBottom, span } = props.widget?.param?.config;
      showHeaderFlag.value = showHeader;
      rowCol.value = span || 3;
      style.value = {
        'border-left': borderLeft,
        'border-right': borderRight,
        'border-top': borderTop,
        'border-bottom': borderBottom
      };
    }
  }
  if (props.widget?.param?.selectCateList?.length) {
    loading.value = true;

    AppApi.summary({ designId: props.designId, categoryIdList: props.widget?.param?.selectCateList.map(item => item.id) })
      .then(res => {
        if (res.data?.length) {
          appTabsList.value = res.data?.map(item => {
            return { key: item.categoryId, name: item.categoryName, ...item };
          });
          activeKey.value = res.data[0].categoryId;
          getAppList(res.data[0]?.portalAppLinkList);
        }
      })
      .catch(() => {
        appTabsList.value = [];
      })
      .finally(() => {
        loading.value = false;
      });
  }
};

/**
 * 更新组件
 */
const updateWidget = () => {
  if (props.widgetName) {
    title.value = props.widgetName;
  }
  // 获取组件应用分类渲染
  getAppLinkRenderDetail();
};

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

defineExpose({
  updateWidget
});
</script>

<style scoped lang="less">
.app-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;

  :deep(.ant-image) {
    margin-bottom: 8px;
  }
}

.app-item:hover {
  span {
    color: #409eff;
  }
}

:deep(.ant-tabs-ink-bar) {
  background-image: linear-gradient(216deg, #5cb431 0%, #0091da 79%);
  border-radius: 2px;
}

.app-list {
  width: 100%;
  height: v-bind('showTab ? "calc(100% - 60px)" : "100%"');
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.empty-box {
  height: 100%;
  position: relative;

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