<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">基于Excel初始化</div>
    </div>
    <div class="app-detail-body">
      <div class="guns-layout">
        <guns-split-layout :resizable="false">
          <div class="guns-layout-sidebar width-100">
            <div class="sidebar-content">
              <div class="sidebar-content">
                <a-menu
                  v-model:selectedKeys="selectedKeys"
                  class="sidebar-menu"
                  mode="inline"
                  :open-keys="openKeys"
                  @select="selectChange"
                  @openChange="openChange"
                >
                  <a-sub-menu :key="sItem.key" v-for="sItem in menuList">
                    <template #title>{{ sItem.name }}</template>
                    <div v-for="cItem in sItem.children" :key="cItem.key">
                      <a-menu-item :key="cItem.key">
                        <span class="flex">
                          <icon-font :icon-class="cItem.icon" fontSize="18px" color="#43505E" :style="{ paddingRight: '4px' }" />
                          {{ cItem.name }}
                        </span>
                      </a-menu-item>
                    </div>
                  </a-sub-menu>
                </a-menu>
              </div>
            </div>
          </div>
          <template #content>
            <div class="excel-init-content">
              <!-- Ai识别Excel -->
              <AiIdentify v-if="currentMenuSelect == 'identify'" :businessId="businessId" @stopAnalysis="stopAnalysis" />
              <!-- 生成记录 -->
              <LogList v-if="currentMenuSelect == 'log'" :businessId="businessId" />
            </div>
          </template>
        </guns-split-layout>
      </div>
    </div>
  </div>
</template>

<script setup name="ExcelInit">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted, defineAsyncComponent, computed } from 'vue';
import { useGeneratorStore } from '@/store/modules/generator';
import { storeToRefs } from 'pinia';

const AiIdentify = defineAsyncComponent(() => import('./components/identify/ai-identify.vue'));
const LogList = defineAsyncComponent(() => import('./components/log/log-list.vue'));

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

// 菜单列表
const menuList = ref([
  {
    key: '1',
    name: '初始化生成',
    children: [
      {
        key: 'identify',
        name: 'AI识别Excel',
        icon: 'icon-renwu'
      },
      {
        key: 'log',
        name: '生成记录',
        icon: 'icon-xuqiu'
      }
    ]
  }
]);

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

// 左侧菜单展开列表
const openKeys = ref(['1']);
// 左侧菜单选中列表
const selectedKeys = ref([]);

// 当前菜单选中
const currentMenuSelect = ref('');

const businessId = computed(() => {
  return buinessSelectAppData.value?.businessId || '';
});

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

onMounted(() => {
  const { type } = route.query;
  if (!businessId.value) return back();
  const typeData = menuList.value[0].children.find(item => item.key == type);
  if (typeData) {
    let key = typeData.key;
    selectedKeys.value = [key];
    selectChange({ key });
  }
});

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

// 设置展开
const openChange = () => {
  openKeys.value = ['1'];
};

const stopAnalysis = () => {
  selectedKeys.value = ['log'];
  selectChange({ key: 'log' });
};
</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.4);

    .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;
      }
    }

    .tabs-list {
      color: #43505e;
      text-align: center;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

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

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

    .excel-init-content {
      padding: 0;
      position: relative;
      min-width: 0px;
      flex: auto;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
  }
}
</style>
