<template>
  <div class="app-detail">
    <div class="app-detail-header">
      <div class="back-btn" @click="back">
        <left-outlined class="back-btn-icon" />
        <span>返回</span>
      </div>
      <a-divider type="vertical" class="divider" />
      <div class="tabs-list">
        <a-tabs v-model:activeKey="activeKey" class="devops-tabs" style="margin-top: 2px" @change="activeKeyChange">
          <template v-for="item in menuList">
            <a-tab-pane :key="item.key" v-if="item.show">
              <template #tab> {{ item.name }} · {{ businessStatCount[item.field] || 0 }} </template>
            </a-tab-pane>
          </template>
        </a-tabs>
      </div>
    </div>
    <div class="app-detail-body">
      <!-- 数据表 -->
      <BusinessSheet v-if="activeKey == 'sheet'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- 表单 -->
      <BusinessForm v-if="activeKey == 'form'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- 视图 -->
      <BusinessView v-if="activeKey == 'view'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- 业务图 -->
      <BusinessGraph v-if="activeKey == 'busGraph'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- 字典 -->
      <BusinessDict v-if="activeKey == 'dict'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- 流程图 -->
      <BusinessFlow v-if="activeKey == 'flow'" :getBusinessStatCount="getBusinessStatCount" />
      <!-- Excel表格 -->
      <BusinessExcel v-if="activeKey == 'excel'" :getBusinessStatCount="getBusinessStatCount" />
    </div>
  </div>
</template>

<script setup name="AppDetail">
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { ref, defineAsyncComponent, onMounted, computed } from 'vue';
import { BusinessApi } from '../list/api/BusinessApi';
import { useGeneratorStore } from '@/store/modules/generator';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();

const route = useRoute();
const router = useRouter();

// 数据表
const BusinessSheet = defineAsyncComponent(() => import('../sheet/index.vue'));
// 表单
const BusinessForm = defineAsyncComponent(() => import('../form/index.vue'));
// 视图
const BusinessView = defineAsyncComponent(() => import('../view/index.vue'));
// 业务图
const BusinessGraph = defineAsyncComponent(() => import('../business-graph/index.vue'));
// 字典
const BusinessDict = defineAsyncComponent(() => import('../dict/index.vue'));
// 流程图
const BusinessFlow = defineAsyncComponent(() => import('../flow/index.vue'));
// Excel表格
const BusinessExcel = defineAsyncComponent(() => import('../excel/manage/index.vue'));

const activeKey = ref('');

// 菜单列表
const menuList = ref([
  {
    key: 'sheet',
    name: '数据表',
    code: 'SHUJUBIAO',
    show: false,
    field: 'tableCount'
  },
  {
    key: 'form',
    name: '表单',
    code: 'BIAODAN',
    show: false,
    field: 'formCount'
  },
  {
    key: 'view',
    name: '视图',
    code: 'SHITU',
    show: false,
    field: 'viewCount'
  },
  {
    key: 'busGraph',
    name: '业务图',
    code: 'YEWUTU',
    show: false,
    field: 'diagramCount'
  },
  {
    key: 'dict',
    name: '字典',
    code: 'ZIDIAN',
    show: false,
    field: 'dictCount'
  },
  {
    key: 'flow',
    name: '流程图',
    code: 'LIUCHENGTU',
    show: false,
    field: 'flowCount'
  },
  {
    key: 'excel',
    name: 'Excel表格',
    code: 'EXCEL',
    show: false,
    field: 'excelCount'
  }
]);

// 权限列表
const authorities = computed(() => {
  return userStore.authorities ?? [];
});

// 当前选中应用数据
const { buinessSelectAppData } = storeToRefs(useGeneratorStore());

const businessStatCount = ref({});

// tab选中
const activeKeyChange = key => {
  router.replace({ query: { type: key } });
  activeKey.value = key;
};

onMounted(() => {
  const { type } = route.query;
  menuList.value.forEach(item => {
    if (authorities.value.includes(item.code)) {
      item.show = true;
    }
  });
  const data = menuList.value.find(item => item.show);
  const typeData = menuList.value.find(item => item.show && item.key == type);
  if (data || typeData) {
    let key = type && typeData ? typeData.key : data.key;
    activeKeyChange(key);
  }
  getBusinessStatCount();
});

const getBusinessStatCount = async () => {
  if (buinessSelectAppData.value?.businessId) {
    businessStatCount.value = await BusinessApi.getBusinessStatCount({ businessId: buinessSelectAppData.value?.businessId });
  }
};

const back = () => {
  router.push('/mid/app/list');
};
</script>

<style scoped lang="less">
.app-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .app-detail-header {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    height: 52px;
    align-items: center;
    position: relative;
    gap: 16px;
    border-bottom: 1.5px solid rgba(197, 207, 209, 0.40);

    .back-btn {
      color: #60666b;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      display: flex;
      align-items: center;
      cursor: pointer;

      .back-btn-icon {
        font-size: 14px;
        color: #898e91;
        margin-right: 4px;
      }
    }

    .divider {
      border-right: 1.5px solid #c5cfd1;
      height: 16px;
      top: 1px;
    }
  }

  .app-detail-body {
    width: 100%;
    flex: 1 0 0;
  }
}

:deep(.devops-tabs .ant-tabs-tab) {
  font-size: 16px;
}
</style>
