<!--应用入口-->
<template>
  <card-widget :is-show-tab="false" :style="style">
    <template #header v-if="showHeaderFlag">
      <div style="display: flex; position: relative">
        <div style="flex: 1; display: flex; align-items: center; justify-content: space-between">
          <span class="text_box">{{ title }}</span>
          <a class="custom" @click="customClick">自定义</a>
        </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">
        <div class="quick-list">
          <div class="quick-item" v-for="item in appList" :key="item.appLinkId" @click="appClick(item)">
            <div class="quick-item-box">
              <a-image
                v-if="item?.linkIconFileId && item.iconType == 1"
                :preview="false"
                style="width: 60px; height: 60px;"
                :src="filePreviewUrl + item.linkIconFileId"
                fit="fill"
              />
              <i :class="'quick-item-icon iconfont ' + item.iconCode" v-if="item.iconType == 2"></i>
              <span class="quick-item-name">{{ item?.linkName }}</span>
            </div>
          </div>
        </div>
        <div class="empty-box" v-if="appList.length == 0">
          <a-empty description="暂无数据" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
        </div>
      </div>
    </template>
  </card-widget>

  <CustomQuick
    v-model:visible="showCustom"
    v-if="showCustom"
    @done="getAppLinkRenderDetail"
    :currentUserAppLinkList="appList"
    :filePreviewUrl="filePreviewUrl"
  />
</template>

<script setup name="QuickEnterWidget">
import { ref, onMounted, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { validateHttpURL } from '@/utils/common/validate-util';
import { redirectUrl, 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 { AppCenterApi } from '@/views/app/api/AppCenterApi';

const CustomQuick = defineAsyncComponent(() => import('../operate/custom-quick.vue'));

const props = defineProps({
  widget: Object,
  // 组件名称
  widgetName: {
    type: String,
    default: constant.QUICK_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();

// 应用列表
const appList = ref([]);

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

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

const showCustom = ref(false);

const style = ref({});

const showHeaderFlag = ref(false);

/**
 * 应用点击
 * @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 customClick = () => {
  showCustom.value = true;
};

/**
 * 获取组件应用分类渲染
 */
const getAppLinkRenderDetail = () => {
  loading.value = true;
  AppCenterApi.getCurrentUserLinkList()
    .then(res => {
      appList.value = res.data;
    })
    .finally(() => (loading.value = false));
};

/**
 * 更新组件
 */
const updateWidget = () => {
  if (props.widgetName) {
    title.value = props.widgetName;
  }
  if (props.widget?.param) {
    title.value = props.widget?.param?.elementName;
    if (props.widget?.param?.config) {
      const { showHeader, borderLeft, borderRight, borderTop, borderBottom } = props.widget?.param?.config;
      showHeaderFlag.value = showHeader;
      style.value = {
        'border-left': borderLeft,
        'border-right': borderRight,
        'border-top': borderTop,
        'border-bottom': borderBottom
      };
    }
  }
  // 获取组件应用分类渲染
  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;
  }
}

.app-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.quick-list {
  width: 100%;
  height: 100%;
  overflow: auto hidden;
  display: flex;
  align-items: center;

  .quick-item {
    width: 124px;
    padding: 8px 28px;
    cursor: pointer;

    .quick-item-box {
      width: 100%;

      .quick-item-icon {
        font-size: 60px;
        line-height: 60px;
      }

      .quick-item-name {
        margin-top: 12px;
        display: block;
        text-align: center;
        color: #43505e;
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.custom {
  color: #3f78df;
  font-size: 16px;
  font-weight: 400;
}

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

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